[学习]TabLayout和ViewPager2的简单使用（一）

我们仍然使用 kotlin 和 databinding 的方式。这个示例是官网推荐的最佳实践，我觉得很简单，网上我看了很多都写得不够简单，这个我觉得很简单。

首先我们新建一个 Fragment ，并定义 layout 文件：

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

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_layout"
                style="@style/Widget.MaterialComponents.TabLayout.Colored"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabSelectedTextColor="@color/white"
                app:tabIconTint="@drawable/tab_icon_color_selector"
                app:tabTextColor="@color/design_default_color_on_secondary"/>

            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

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

这个文件很简单，就是 TabLayout 和 ViewPager2 。最终达到的效果如下：

使用这两者需要一个 TabLayoutMediator ，通过这个类我们就可以将两者联系起来：

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
    tab.setIcon(getIcon(position))
    tab.text = getTitle(position)
}.attach()

记住最后的 attach ，我刚开始没有写，一直不可以，导致我都开始怀疑是不是过时了；其中 tabLayout 和 viewPager 对应如下：

val binding = FragmentHomeBinding.inflate(inflater, container, false)
val viewPager = binding.pager
val tabLayout = binding.tabLayout

其中 viewPager 需要编写适配器，主要目的是联动其他的 Fragment ：

class PagerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {

    private val tabFragmentsCreators = mapOf(MAIN to { MainFragment() }, MINE to { MineFragment() })

    override fun getItemCount(): Int = tabFragmentsCreators.size

    override fun createFragment(position: Int): Fragment {
        return tabFragmentsCreators[position]?.invoke() ?: throw IndexOutOfBoundsException()
    }
}

代码很简单，就是在 createFragment 函数中根据下标选择对应的 Fragment 即可。下面就是设置适配器了：

viewPager.adapter = PagerAdapter(this)

在上面使用到的两个函数分别为：

    private fun getIcon(position: Int): Int {
        return when(position) {
            MAIN -> R.drawable.main
            MINE -> R.drawable.mine
            else -> throw IndexOutOfBoundsException()
        }
    }

    private fun getTitle(position: Int): String {
        return when(position) {
            MAIN -> "主页"
            MINE -> "我的"
            else -> throw IndexOutOfBoundsException()
        }
    }

这样就成功了。连 TabLayout 都没有特意进行设置，比网上的简单很多。