介紹

在使用之前，一定要先看一下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

看起來滑動卡是因為我用鼠標拖動的，不順手，并不是程序原因！