Android 使用TabLayout + ViewPager2 实现标签页的视图切换

学习笔记

步骤概览

添加依赖
创建布局文件
创建 ViewPager2 适配器
设置 TabLayout 和 ViewPager2 的联动
自定义每个页面内容（Fragment）
自定义 TabLayout 样式（可选）

1. 添加依赖

首先，你需要在 build.gradle 文件中添加 TabLayout 和 ViewPager2 的依赖。

dependencies {implementation 'com.google.android.material:material:1.6.0'  // TabLayoutimplementation 'androidx.viewpager2:viewpager2:1.0.0'  // ViewPager2
}

2. 创建布局文件

在布局文件中，使用 TabLayout 和 ViewPager2 组件。TabLayout 用来显示标签页，而 ViewPager2 用来展示与标签页对应的页面。

假设你的布局文件是 activity_main.xml，你可以使用以下代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"tools:context=".MainActivity"><!-- TabLayout，显示顶部的标签 --><com.google.android.material.tabs.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabMode="fixed"app:tabGravity="fill"/><!-- ViewPager2，显示页面内容 --><androidx.viewpager2.widget.ViewPager2android:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/tabLayout" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 创建 `ViewPager2` 适配器

ViewPager2 需要一个适配器来提供页面的内容，通常你会创建一个 FragmentStateAdapter（或者 FragmentPagerAdapter，但 FragmentStateAdapter 更常用且支持动态添加和删除页面）。

创建适配器类

你需要创建一个继承自 FragmentStateAdapter 的类，用于为每个页面提供一个 Fragment 实例。

假设我们有三个页面（Tab1, Tab2, Tab3），它们的内容分别是不同的 Fragment。

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;public class MainActivity extends AppCompatActivity {private ViewPager2 viewPager;private TabLayout tabLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewPager = findViewById(R.id.viewPager);tabLayout = findViewById(R.id.tabLayout);// 设置 ViewPager2 的适配器MyFragmentStateAdapter adapter = new MyFragmentStateAdapter(this);viewPager.setAdapter(adapter);// 设置 TabLayout 和 ViewPager2 的联动new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {// 设置每个 Tab 的标题switch (position) {case 0:tab.setText("Tab 1");break;case 1:tab.setText("Tab 2");break;case 2:tab.setText("Tab 3");break;}}).attach();}// ViewPager2 的适配器public static class MyFragmentStateAdapter extends FragmentStateAdapter {public MyFragmentStateAdapter(@NonNull AppCompatActivity fragmentActivity) {super(fragmentActivity);}@NonNull@Overridepublic Fragment createFragment(int position) {// 根据 Tab 的位置返回对应的 Fragmentswitch (position) {case 0:return new TabFragment1();case 1:return new TabFragment2();case 2:return new TabFragment3();default:return new TabFragment1();}}@Overridepublic int getItemCount() {return 3;  // 总共3个页面}}
}

4. 创建 `Fragment` 页面内容

你需要为每个 Tab 页创建对应的 Fragment，每个 Fragment 可以包含不同的 UI 内容。

TabFragment1.java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;public class TabFragment1 extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// 加载 Tab 1 的布局return inflater.inflate(R.layout.fragment_tab1, container, false);}
}

5. 自定义 TabLayout 样式（可选）

你可以根据需要自定义 TabLayout 的外观，例如设置不同的选中颜色、未选中颜色、图标等。

在布局文件中自定义 TabLayout 样式：

<com.google.android.material.tabs.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabMode="fixed"app:tabGravity="fill"app:tabIndicatorColor="@android:color/holo_blue_light"  <!-- 指示器颜色 -->app:tabSelectedTextColor="@android:color/holo_blue_dark"  <!-- 选中文本颜色 -->app:tabTextColor="@android:color/darker_gray" />  <!-- 未选中文本颜色 -->

使用 Tab 图标：

你也可以为 TabLayout 的每个标签添加图标，而不仅仅是文本。

new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {switch (position) {case 0:tab.setText("Tab 1");tab.setIcon(R.drawable.ic_tab1);break;case 1:tab.setText("Tab 2");tab.setIcon(R.drawable.ic_tab2);break;case 2:tab.setText("Tab 3");tab.setIcon(R.drawable.ic_tab3);break;}
}).attach();

总结

TabLayout 用于显示标签页，而 ViewPager2 用于显示每个标签页对应的页面内容。
使用 FragmentStateAdapter 创建 ViewPager2 的适配器，并为每个页面返回相应的 Fragment。
使用 TabLayoutMediator 来将 TabLayout 和 ViewPager2 关联起来，使它们联动。
可以自定义 TabLayout 的外观，包括文本、颜色和图标等。