[Android] BottomNavigation 사용하기 (+ ViewPager2 로 스와이프)

BottomBottomNavigation 과 ViewPager2 를 사용하면 스와이프로 화면을 전환할 수 있는 바텀네비게이션을 만들 수 있다.

사용해보기

종속성 추가

android {

    buildFeatures {
        viewBinding true
    }
}

dependencies {

    // 뷰페이저 2
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

뷰바인딩과 뷰페이저2를 추가해준다.

바텀네비게이션 아이템 추가

바텀네비게이션을 사용하기 위해서는 그곳에서 사용할 아이템 메뉴를 추가해주어야 한다.

New -> Android Resource Directory 에서

type을 menu로 하여 새로운 디렉토리를 추가해준다.

그 디렉토리에서 메뉴 리소스 파일을 생성하여

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/item_one"
        android:title="One"
        android:icon="@mipmap/ic_launcher_round"/>
    <item android:id="@+id/item_two"
        android:title="Two"
        android:icon="@mipmap/ic_launcher_round"/>
    <item android:id="@+id/item_three"
        android:title="Three"
        android:icon="@mipmap/ic_launcher_round"/>

</menu>

사용할 아이템들을 작성해준다.

메인 레이아웃

<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation_item" />

뷰페이저2와 바텀네비게이션을 생성하고 app:menu로 아까 만든 메뉴를 연결해준다.

그 후, 임의의 프래그먼트를 3개 만든다.

뷰페이저 어댑터

class ViewPagerAdapter (fragment : FragmentActivity) : FragmentStateAdapter(fragment){
    override fun getItemCount(): Int = 3

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> Fragment1()
            1 -> Fragment2()
            else -> Fragment3()
        }
    }
}

뷰페이저에 연결해주기 위한 어댑터를 만들어준다.

메인 액티비티

class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener {
    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 페이저에 어댑터 연결
        binding.pager.adapter = ViewPagerAdapter(this)

        // 슬라이드하여 페이지가 변경되면 바텀네비게이션의 탭도 그 페이지로 활성화
        binding.pager.registerOnPageChangeCallback(
            object : ViewPager2.OnPageChangeCallback() {

                override fun onPageSelected(position: Int) {
                    super.onPageSelected(position)
                    binding.bottomNavigationView.menu.getItem(position).isChecked = true
                }
            }
        )

        // 리스너 연결
        binding.bottomNavigationView.setOnNavigationItemSelectedListener(this)
    }


    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.item_one -> {
                // ViewPager의 현재 item에 첫 번째 화면을 대입
                binding.pager.currentItem = 0
                return true
            }
            R.id.item_two -> {
                // ViewPager의 현재 item에 두 번째 화면을 대입
                binding.pager.currentItem = 1
                return true
            }
            R.id.item_three -> {
                // ViewPager의 현재 item에 세 번째 화면을 대입
                binding.pager.currentItem = 2
                return true
            }
            else -> {
                return false
            }
        }
    }
}

하나씩 살펴보면