【Android】使用ViewPager2与TabLayout实现顶部导航栏＋页面切换

【Android】使用ViewPager2与TabLayout实现顶部导航栏＋页面切换

TabLayout与ViewPager2概述

TabLayout

TabLayout 是 Android 支持库中的一个组件，它是 Design 支持库的一部分。TabLayout 提供了一个水平的标签页界面，允许用户在不同的视图或数据集之间进行切换。以下是 TabLayout 的一些主要特性和使用方法

主要特性

1. 标签页模式：TabLayout 可以显示多个标签页，每个标签页可以包含文本、图标或两者兼有。
2. 动态标签页：可以动态地添加、删除或重新排序标签页。
3. 与 ViewPager 结合使用：TabLayout 可以与 ViewPager 无缝集成，使得用户在滑动 ViewPager 的页面时，TabLayout 的选中标签页也会相应地变化。
4. 自定义标签页：可以自定义标签页的布局、样式和行为。
5. 滚动标签页：当标签页数量超过屏幕宽度时，它们可以水平滚动。

官方文档：

TabLayout | Android Developers (google.cn)

ViewPager2

ViewPager2 是 Android Jetpack 库中的一个组件，它是 ViewPager 的一个改进版本，提供了更好的性能和更多的功能。ViewPager2 允许用户左右滑动来浏览不同的视图，类似于一个滑动页面的控件。

主要特性

1. 更好的性能：ViewPager2 优化了滑动性能，特别是在处理大量页面或复杂视图时。
2. 垂直和水平滑动：支持水平和垂直滑动，而 ViewPager 仅支持水平滑动。
3. 动态添加和删除页面：可以动态地添加、删除或重新排序页面。
4. 与 TabLayout 集成：可以与 TabLayout 集成，实现标签页和页面视图的联动。
5. 自定义适配器：支持自定义适配器，可以灵活地控制页面内容的显示。
6. 滑动事件监听：提供滑动事件的监听，可以获取用户滑动的详细信息。

官方文档：

ViewPager2 | Jetpack | Android Developers (google.cn)

使用 ViewPager2 创建包含标签的滑动视图 | Android Developers (google.cn)

示例展示

本篇博客，笔者将带大家实现这样一个标题栏+Fragment水平切换页面的案例。

步骤详解

创建Activity并加入TabLayout和ViewPager2组件

创建Activity的步骤不再赘述，这里放上写好的xml文件：

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    style="@style/LayoutStyle">

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


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