[Android] ViewPager2 + TabLayout 연동

1. xml 작성

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

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorBlack"
    >

        <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/vp_home"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tl_home"/>

        <com.google.android.material.tabs.TabLayout
                android:id="@+id/tl_home"
                style="@style/StatisticTabStyle"
                android:background="@android:color/transparent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

기존의 TabLayout 같은 경우에는 TabItem을 넣어주어서 Tab의 요소들을 넣어주었지만 TabLayoutMediator를 사용하므로 TabItem을 넣어주지 않는다.

이유는 TabLayout의 attach() 함수를 호출하면서 populateTabsFromPagerAdapter() 함수에서 어댑터에 있는 데이터들을 통해 Tab의 Item들을 설정해 주게 되는데 removeAllTabs()를 이용해서 그 전에 만들었었던 TabItem들을 모두 없애버리기 때문에 xml상에서 TabItem을 넣어주어도 의미가 없다.

그러므로, 자바 코드 상에서 TabItem을 넣어주도록 한다.

 

TabLayoutMediator의 populateTabsFromPagerAdapter() 함수

 @SuppressWarnings("WeakerAccess")
  void populateTabsFromPagerAdapter() {
    tabLayout.removeAllTabs();

    if (adapter != null) {
      int adapterCount = adapter.getItemCount();
      for (int i = 0; i < adapterCount; i++) {
        TabLayout.Tab tab = tabLayout.newTab();
        tabConfigurationStrategy.onConfigureTab(tab, i);
        tabLayout.addTab(tab, false);
      }
      // Make sure we reflect the currently set ViewPager item
      if (adapterCount > 0) {
        int lastItem = tabLayout.getTabCount() - 1;
        int currItem = Math.min(viewPager.getCurrentItem(), lastItem);
        if (currItem != tabLayout.getSelectedTabPosition()) {
          tabLayout.selectTab(tabLayout.getTabAt(currItem));
        }
      }
    }
  }

2. 코드 작성

    private fun setUpViewPager() {
        homeFragmentStateAdapter = HomeFragmentStateAdapter(requireActivity())
        binding.vpHome.apply {
            adapter = homeFragmentStateAdapter
            setPageTransformer(ZoomOutPageTransformer())
            registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
                override fun onPageSelected(position: Int) {
                    binding.tlHome.setScrollPosition(position, 0F, false)
                }
            })
        }

        TabLayoutMediator(binding.tlHome, binding.vpHome) { tab, position ->
            tab.text = tabNameList[position]
        }.attach()
    }

3. Adapter 작성

class HomeFragmentStateAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {

    override fun createFragment(position: Int): Fragment =
        when (position) {
            0 -> EvaluateFragment()
            else -> FollowingFragment()
        }

    override fun getItemCount(): Int = 2
}

4. style 작성

    <style name="StatisticTabStyle" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">@color/lavender_blue</item>
        <item name="tabIndicatorHeight">3dp</item>
        <item name="tabTextColor">#f5f5f7</item>
        <item name="tabSelectedTextColor">@color/lavender_blue</item>
        <item name="tabTextAppearance">@style/StatisticTabTextAppearance</item>
    </style>

    <style name="StatisticTabTextAppearance">
        <item name="fontFamily">@font/apple_sd_gothic_neo_medium</item>
        <item name="android:textSize">18sp</item>
        <item name="android:textStyle">normal</item>
    </style>

TabLayoutMediator를 이용해서 ViewPager2와 연동해주면 되고 poistion마다 tab의 text를 설정해주면 된다.

그 외적으로 setPageTransformer() 함수를 이용해서 ViewPager가 넘어가는 애니메이션을 설정해 줄 수 있다.