Android中TabLayout结合ViewPager实现页面切换

下面我就为您详细讲解“Android中TabLayout结合ViewPager实现页面切换”的完整攻略。

1. 准备工作

在进行具体实现之前，我们需要进行一些准备工作：

1. 添加相关依赖库，在build.gradle文件中加入以下依赖：

groovy
implementation 'com.google.android.material:material:1.3.0'

这里我们使用了Google的material库，包含了TabLayout以及ViewPager等控件。

1. 在布局文件中添加TabLayout和ViewPager控件。

2. 实现过程

2.1 创建Fragment

我们需要先创建4个Fragment用于作为ViewPager的子页面，可以通过右键新建一个Blank Fragment来创建。

2.2 创建PagerAdapter

接着我们需要创建一个PagerAdapter来提供ViewPager的显示内容，内容就是我们刚刚创建的4个Fragment。

class MyPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    private val fragments = listOf(HomeFragment(), CategoryFragment(), CartFragment(), MineFragment())

    // 获取指定位置的Fragment
    override fun getItem(position: Int): Fragment {
        return fragments[position]
    }

    // 获取页面数量
    override fun getCount(): Int {
        return fragments.size
    }

    // 获取指定页面的标题
    override fun getPageTitle(position: Int): CharSequence? {
        return when (position) {
            0 -> "首页"
            1 -> "分类"
            2 -> "购物车"
            3 -> "我的"
            else -> ""
        }
    }
}

2.3 初始化TabLayout

在Activity或Fragment中获取TabLayout实例并进行初始化。

val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
tabLayout.setupWithViewPager(viewPager)
tabLayout.tabMode = TabLayout.MODE_FIXED

其中，setupWithViewPager方法会自动设置TabLayout的标题，而tabMode则用于设置标签的呈现模式。这里我们使用的是MODE_FIXED，表示标签数量不超过屏幕宽度，一直占据屏幕宽度。

2.4 填充ViewPager

接着我们需要将PagerAdapter与ViewPager控件进行关联。

val viewPager = findViewById<ViewPager>(R.id.view_pager)
val pagerAdapter = MyPagerAdapter(supportFragmentManager)
viewPager.adapter = pagerAdapter

然后我们就可以运行程序，查看效果了。

3. 示例说明

3.1 示例1：自定义TabLayout样式

如果我们想要改变TabLayout的样式，可以通过修改TabLayout的布局文件来实现。例如，我们可以将标签的文字和图标排成一列。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIconGravity="textTop"
    app:tabIndicatorHeight="0dp"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabPadding="16dp"
    app:tabTextColor="#555"
    app:tabSelectedTextColor="#343434"
    app:tabBackground="@color/white"
    app:tabLayout="@layout/layout_tab_vertical"/>

同时，我们需要创建一个新的布局文件“layout_tab_vertical.xml”，用于定义每个标签的样式。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.tabs.TabItem xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:id="@+id/tab_icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_gravity="center"/>

        <TextView
            android:id="@+id/tab_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="@color/tab_text_color"/>
    </LinearLayout>

</com.google.android.material.tabs.TabItem>

同时在PagerAdapter中的getPageTitle方法中为ViewPager填充内容时需要修改：

override fun getPageTitle(position: Int): CharSequence? {
    return null
}

//修改FragmentPagerAdapter  getItem 方法
override fun getItem(position: Int): Fragment {
    return fragments[position]
}

// 添加一个getName方法，用于获取标签的文字和图标
fun getName(position: Int): Pair<Int, String> {
    return when (position) {
        0 -> Pair(R.drawable.ic_home_24, "首页")
        1 -> Pair(R.drawable.ic_category_24, "分类")
        2 -> Pair(R.drawable.ic_cart_24, "购物车")
        3 -> Pair(R.drawable.ic_mine_24, "我的")
        else -> Pair(0, "")
    }
}

最后修改TabLayout中的Tab标签的图标和文字(addOnTabSelectedListener监听点击事件)：

for (i in 0 until 4) {
    val tab = tabLayout.getTabAt(i)
    tab?.customView = tabItemView(i)
}

// 创建标签的视图
private fun tabItemView(position: Int): View {
    val tabItemView = layoutInflater.inflate(R.layout.layout_tab_vertical, null) as LinearLayout
    val imageView = tabItemView.findViewById<ImageView>(R.id.tab_icon)
    val textView = tabItemView.findViewById<TextView>(R.id.tab_title)
    val name = pagerAdapter.getName(position)
    imageView.setImageResource(name.first)
    textView.text = name.second
    return tabItemView
}

// 添加选中监听
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    //当标签被选择时，设置标签的状态
    override fun onTabSelected(tab: TabLayout.Tab?) {
        val view = tab?.customView
        val imageView = view?.findViewById<ImageView>(R.id.tab_icon)
        val textView = view?.findViewById<TextView>(R.id.tab_title)
        imageView?.setColorFilter(Color.parseColor("#007AFF"))
        textView?.setTextColor(Color.parseColor("#007AFF"))
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
        val view = tab?.customView
        val imageView = view?.findViewById<ImageView>(R.id.tab_icon)
        val textView = view?.findViewById<TextView>(R.id.tab_title)
        imageView?.setColorFilter(Color.parseColor("#343434"))
        textView?.setTextColor(Color.parseColor("#343434"))
    }

    override fun onTabReselected(tab: TabLayout.Tab?) {}
})

3.2 示例2：修改ViewPager切换模式

默认情况下，ViewPager的切换模式为水平滑动的页面切换，我们也可以通过修改ViewPager属性来改变切换模式。例如，我们可以设置为竖直方向上的页面切换。

val viewPager = findViewById<ViewPager>(R.id.view_pager)
viewPager.adapter = MyPagerAdapter(supportFragmentManager)
viewPager.orientation = ViewPager2.ORIENTATION_VERTICAL

这里需要注意的是，使用ViewPager2时需要将PagerAdapter改为FragmentStateAdapter，且需要指定FragmentStateAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT模式。

class MyPagerAdapter(fm: FragmentManager, lifecycle: Lifecycle) : FragmentStateAdapter(fm, lifecycle) {
    ...
}

val viewPager = findViewById<ViewPager2>(R.id.view_pager)
viewPager.adapter = MyPagerAdapter(supportFragmentManager, lifecycle)
viewPager.orientation = ViewPager2.ORIENTATION_VERTICAL

至此，Android中TabLayout结合ViewPager实现页面切换的完整攻略就已经讲解完毕了。