ViewPager2와 TabLayout 연결하기

ViewPager2 사용하기

build.gradle 파일에 다음의 종속성을 추가

implementation("androidx.viewpager2:viewpager2:1.0.0")

그다음 뷰페이저를 사용할 레이아웃 xml 파일에 ViewPager2와 TabLayout을 추가해준다.

<com.google.android.material.tabs.TabLayout
                android:id="@+id/album_info_tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                app:tabRippleColor="@null"
                app:tabIndicatorFullWidth="false"
                app:tabIndicatorColor="#3f3fff"
                app:tabSelectedTextColor="#3f3fff">

<androidx.viewpager2.widget.ViewPager2
                android:id="@+id/album_info_tab_vp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

ViewPager2는 단독으로 사용할 수 없고 어댑터 클래스 파일을 만들어서 프래그먼트를 바꿔 끼워주는 방식으로 사용한다. 따라서 어댑터 클래스와 뷰페이저에 들어갈 프래그먼트도 만들어 주자.

• 어댑터 클래스 파일

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

    override fun createFragment(position: Int): Fragment {
        return when (position){
            0 -> Fragment1()

            1 -> Fragment2()

            else -> Fragment3()
        }
    }
}

• 프래그먼트 클래스 (1,2,3 세개 만들어준다)

class Fragment1 : Fragment() {

    lateinit var binding : Fragment1Binding

    override fun onCreateView(inflater: LayoutInflater,
    					container: ViewGroup?,
    					savedInstanceState: Bundle?): View? {
        binding = Fragment1Binding.inflate(inflater, container, false)

        return binding.root
    }
}

이제 뷰페이저가 속해있는 레이아웃 클래스파일에 가서 뷰페이저 어댑터를 연결해주면 뷰페이저가 동작하게 된다.

val pagerAdapter = ViewPagerAdapter(this)
        binding.albumInfoTabVp.adapter = pagerAdapter

여기까지 왔다면 퓨페이저가 동작은 잘 하겠지만 아직 탭 레이아웃에 연결시켜주지 않았기 때문에 뷰페이저와 탭 레이아웃이 따로놀게 된다.

이 때 TabLayoutMediator 객체를 사용해서 둘을 연결시킬 수 있다.

TabLayoutMediator(binding.albumInfoTabLayout, binding.albumInfoTabVp){

// 탭 레이아웃을 코드에서 재정의하기 때문에 xml이 아닌 이곳에서 탭레이아웃을 꾸민다.
            tab, position -> tab.text = tab_items[position]
      
      }.attach()

https://developer.android.com/reference/com/google/android/material/tabs/TabLayoutMediator
안드로이드 공식문서에 public method와 parameters 들이 명시되어 있으니 확인해보면 좋을것 같다.
.attach()까지 해주어야 완벽하게 연결이 된다.