ViewPager2和TabLayout的使用

介绍

在使用之前，一定要先看一下ViewPager2的介绍

迁移至 ViewPager2 | AndroidDevSummit 中文字幕视频

目前ViewPager已经停止维护了，所以以后只会更新ViewPager2，搭配上Fragment，可以实现Tab点击切换页面 以及滑动页面的效果

ViewPager2是基于RecyclerView构建，新增了以下几个属性：

• 可以进行垂直切换页面，只需要设置属性：android:orientation="vertical"
• 从右到左的布局，只需要设置属性：android:layoutDirection="rtl"

使用

首先，添加依赖，可在Project Structure -- Dependencies中搜索关键词进行添加

也可以手动添加：

implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'com.google.android.material:material:1.2.0-alpha02'

然后新建几个Fragment用于切换布局，并在activity_main.xml中添加TabLayout和ViewPager2

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </com.google.android.material.tabs.TabLayout>

    <View
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="?android:attr/listDivider" />

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

打开MainActivity，为ViewPager2设置适配器

viewPager2.adapter = object : FragmentStateAdapter(this) {
    override fun getItemCount() = 3

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> FirstFragment()
            1 -> SecondFragment()
            else -> ThirdFragment()
        }
    }
}

再编写TabLayout的绑定代码

TabLayoutMediator(
    tabLayout,
    viewPager2,
    object : TabLayoutMediator.TabConfigurationStrategy {
        override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
            when (position) {
                0 -> tab.text = "First"
                1 -> tab.text = "Second"
                else -> tab.text = "Third"
            }
        }
    }).attach()  //一定别忘了attach()！！！

当然以上代码可以简化为成Lambda表达式表示

TabLayoutMediator(tabLayout, viewPager2) { tab, position ->
            when (position) {
                0 -> tab.text = "First"
                1 -> tab.text = "Second"
                else -> tab.text = "Third"
            }
        }.attach()

这样就完成了一个Tab点击+滑动的效果了

效果图如下：

GIF.gif

看起来滑动卡是因为我用鼠标拖动的，不顺手，并不是程序原因！