[BottomNavigation] ViewPager2 적용

 먼저 참고할 문서 

- ViewPager2 [보러가기]

- ViewPager2 사용가능 메서드 [보러가기]

- 정리가 잘된 블로그 [보러가기]

 

 

기본 설정  

0. gradle 확인 androidx.viewpager2.widget.VieaPager2 가 import되는지 확인해본다. (웬만하면 들어있는듯)

1. menu xml 생성 후 원하는 item 메뉴의 종류를 만든다. 

- icon, title까지 다 설정해주고, enabled = true를 해준다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_map"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_map_24"
        android:title="지도"
        />

    <item
        android:id="@+id/nav_record"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_note_add_24"
        android:title="기록"
        />
    <item
        android:id="@+id/nav_list"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_format_list_bulleted_24"
        android:title="리스트"
        />
    <item
        android:id="@+id/nav_setting"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_settings_24"
        android:title="설정"
        />
</menu>

2. 해당 layout파일로 가서 보여질 화면 ViewPager2와 bootttomnavigationview를 만들어준다. 

- id를 꼭 만든다. 

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintTop_toTopOf="parent" />

3. 해당 Activity로 이동하여 설정한 메뉴들과 화면을 연동해준다. 

- ViewBinding을 사용하였다. (findviewbyid 대신 사용하는 것임.)

- Kotlin 을 사용하였다.

- Fragment를 사용하였다. 

class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener {
	
    //ViewBinding 선언
    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // ViewBinding 정의 구간
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
        
		// bottom 네비리스너 설정
        binding.bottomNavigationView.setOnNavigationItemSelectedListener(this)
        
        // adapter설정
        binding.보여질화면ID.adapter = ViewPagerAdapter(supportFragmentManager, lifecycle)
        
        // callback설정
        binding.보여질화면ID.registerOnPageChangeCallback(ViewPagerPageChangeCallback())
    }

 

 

기억해야할 메서드이다.

1) onNavigationItemSelected()

2) ViewPagerAdapter()

3) ViewPagerPageChangeCallback() 

 

4. Fragment와 소통할 Adapter를 만든다. 

- inner class (내부 클래스) 이다. 

- FragmentStateAdapter 를 상속한다. 

    private inner class ViewPagerAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle) 
    	: FragmentStateAdapter(fragmentManager, lifecycle)  {
        
        override fun getItemCount(): Int  = 4  //menu의 갯수

        override fun createFragment(position: Int): Fragment {
            return when (position) {
                0 -> 사용할 프래그먼트1()
                1 -> 사용할 프래그먼트2()
                2 -> 사용할 프래그먼트3()
                3 -> 사용할 프래그먼트4()
                else -> error("No Fragment")
            }
        } //createFragment
        
    } // ViewPagerAdapter

 

5. ViewPager2의 변화를 인지하는 콜백메서드를 작성한다. 

- bottom메뉴의 선택이 일어났을때, 자동으로 화면이 이동하게 해준다. 

    private inner class ViewPagerPageChangeCallback: ViewPager2.OnPageChangeCallback() {
    
        override fun onPageSelected(position: Int) {
            binding.bottomNavigationView.selectedItemId = when(position){
            
                0 -> R.id.menu1
                1 -> R.id.menu2
                2 -> R.id.menu3
                3 -> R.id.menu4
                else -> error("no menu.")
                
            }
        }
    }

 

6. BottonNavigation의 선택된 메뉴의 리스너를 설정해준다. 

    override fun onNavigationItemSelected(item: MenuItem): Boolean {

        when(item.itemId){
            R.id.menu1 -> {
                binding.보여질화면ID.currentItem = 0
                return true
            }
            R.id.menu2 -> {
                binding.보여질화면ID.currentItem = 1
                return true
            }
            R.id.menu3 -> {
                binding.보여질화면ID.currentItem = 2
                return true
            }
            R.id.menu4 -> {                
                binding.보여질화면ID.currentItem = 3
                return true
            }
        }
        return false
        
    } // onNavigationItemSeleceted

 

이렇게 하면 화면이 이동하고 좋지만, 

너무 민감하게 반응해서 

간단한 리스트화면이나 카카오톡 같은 화면들의 이동시 사용하면 좋겠다. 

민감도를 낮추는 방법도 있는 듯하다. 

개인적으로는 사용해봤지만, 비추다.