[Android] ViewPager2로 TabLayout 구성하기

한 화면에 여러 콘텐츠를 보여주기 위해 다양한 앱에서 TabLayout과 ViewPager를 사용한다.

이 두 가지 기능을 사용하면 탭을 클릭하거나 스와이프를 하여 콘텐츠를 변경할 수 있다.

TabLayoutMediator를 사용하여 해당 기능을 구현해 보려고 한다.

 

예제로 4개의 탭에 각 탭을 구분할 수 있도록 '첫번째' ~ '네번째'라고 텍스트가 적힌 프로젝트를 만들어봤다.

---

TabLayout 설정

/**
 * TabLayout 설정
 */
private fun faqTabInit() {
    TabLayoutMediator(mBinding.tabMain, mBinding.vpMain) { tab, pos ->
        tab.text = pos.toString()
        when (pos) {
            0 -> tab.text = getString(R.string.first)
            1 -> tab.text = getString(R.string.second)
            2 -> tab.text = getString(R.string.third)
            3 -> tab.text = getString(R.string.fourth)
        }
    }.attach()
}

TabLayoutMediator는 TabLayout을 ViewPager2와 연결하는 객체이다.

탭이 선택될 때 ViewPager2의 위치를 선택한 탭과 동기화하고, 스와이프를 할 때 TabLayout의 위치를 스와이프된 위치와 동기화한다.

내용 참고

탭의 포지션에 따라 탭에 "~번째" 라는 텍스트를 설정했다.

---

ViewPager2 설정

/**
 * ViewPager2 설정
 */
private fun faqViewPagerInit() {
    val fragmentList = listOf(
        OneFragment(),
        TwoFragment(),
        ThreeFragment(),
        FourFragment()
    )
    viewPagerAdapter = ViewPagerAdapter(this)
    viewPagerAdapter.fragments.addAll(fragmentList)
    mBinding.vpMain.adapter = viewPagerAdapter
}

표시할 Fragment를 리스트에 담고 Adapter에 전달한다.

---

ViewPagerAdapter 생성

class ViewPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    val fragments = mutableListOf<Fragment>()

    override fun getItemCount(): Int = fragments.size

    override fun createFragment(position: Int): Fragment = fragments[position]

}

ViewPager2를 사용하는 방법으로 RecyclerView를 사용해도 되지만 ViewPager2에서 제공하는 Adapter Class인 FragmentStateAdapter를 사용했다.(FragmentStateAdapter는 RecyclerView.Adapter를 상속받고 있다.)

 

FragmentStateAdapter를 상속받으면 getItemCount와 createFragment를 override 해야 한다.

Fragment를 리스트에 담아서 그 개수와 아이템을 전달하면 Adapter의 세팅은 끝난다.

---

전체 코드