Android :: Bottom Navigation와 ViewPager 연결

💡 Bottom Navigation

 

BottomNavigationView는 화면 하단에 포함되는 View이며, 크게 2가지 View 정의가 필요하다.

(1) BottomNavigationView에서 사용할 메뉴를 나타내는 navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/menu_home"
        android:icon="@drawable/ic_home_white"
        android:title="Home"/>
    <item android:id="@+id/menu_book"
        android:icon="@drawable/ic_book_white"
        android:title="Book"/>
    <item android:id="@+id/menu_person"
        android:icon="@drawable/ic_person_white"
        android:title="MyPage"/>
</menu>

(2) BottomNavigationView를 사용할 layout에서 BottomNavigationView 정의

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemIconTint="@color/bottom_selector"
        app:itemTextColor="@color/bottom_selector"
        app:menu="@menu/navigation"/>

 

ViewPager

 

ViewPager는 데이터를 페이지 단위로 표시하고 화면을 쓸어 넘기는 동작인 스와이프(Swipe)를 통해 페이지 전환을 할 수 있는 컨테이너(Container)이다. ViewPager의 사용 방식은 다음과 같다.
(1) 먼저 원하는 페이지 개수만큼 Fragment를 생성한다.

(2) ViewPager에서 이용하는 페이지 뷰(View)들을 생성해주는 Adapter를 만든다.

(3) Adapter를 통해 Fragment를 ViewPager에 등록한다.

 

 

📝 Bottom Navigation와 ViewPager 연결

 

1. PagerAdapter를 생성한다.

class MainPagerAdapter(fm:FragmentManager) : FragmentPagerAdapter(fm,
    BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getItem(position: Int): Fragment {
        return when(position) {
            0 -> HomeFragment()
            1 -> LibraryFragment()
            else -> MypageFragment()
        }
    }
    override fun getCount() = 3 // 전체 페이지 수
}

PagerAdapter는 ViewPager에서 이용하는 페이지 뷰를 생성하기 위한 용도의 어댑터이다.
Adapter가 있어야 fragment와 ViewPager사이의 연결이 가능하므로 필수로 구현해야 한다.

 

 

2. 어댑터를 사용하여 ViewPager와 fragment를 연결한다.

main_viewPager.adapter = MainPagerAdapter(supportFragmentManager)
main_viewPager.offscreenPageLimit = 2

offscreenPageLimit : 뷰 계층 구조에 보관된 페이지, View/Fragment 수를 제어할 수 있다.

 

 

3. BottomNavigation의 메뉴를 클릭했을 때 해당하는 프래그먼트가 호출되어 화면에 표시되도록 한다.

(1) 뷰페이저의 페이지 이동 (swipe) → 하단 네비게이션 메뉴의 item도 바뀜

main_viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    override fun onPageScrollStateChanged(state: Int) {}

    override fun onPageScrolled(
        position: Int,
        positionOffset: Float,
        positionOffsetPixels: Int
    ) {}
    
     override fun onPageSelected(position: Int) {
     	// 네비게이션 메뉴 아이템 체크상태
        bottomNavigationView.menu.getItem(position).isChecked = true
    }
})

(2) 하단 네비게이션 메뉴의 item을 선택했을 때 → 해당하는 페이지로 바뀜

bottomNavigationView.setOnNavigationItemSelectedListener {
    when(it.itemId) {
        // itemId에 따라 viewPager 바뀜
        R.id.menu_home -> main_viewPager.currentItem = 0
        R.id.menu_book -> main_viewPager.currentItem = 1
        R.id.menu_person -> main_viewPager.currentItem = 2
    }
    true
}