标签页 (Tabs)

源：Tabs

标签页在不同屏幕、数据集或其他交互之间组织内容。

变体对比

1. Primary tabs (主要标签页): 放置在内容面板顶部，通常位于应用栏下方。用于显示主要内容目的地。
2. Secondary tabs (次要标签页): 用于内容区域内部，进一步划分相关内容。

---

代码实现

1. 基础用法

布局

<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:text="推荐"
        android:icon="@drawable/ic_star" />

    <com.google.android.material.tabs.TabItem
        android:text="关注" />

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

监听切换

tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) {
        // 处理选中
    }
    // ...
})

2. 配合 ViewPager2 使用

这是实战中最常见的用法。

TabLayoutMediator(tabLayout, viewPager2) { tab, position ->
    tab.text = "页面 ${position + 1}"
}.attach()

---

核心功能

1. 徽章 (Badges)

你可以在 Tab 上添加红点或数字提示：

val badge = tabLayout.getTabAt(0)?.getOrCreateBadge()
badge?.isVisible = true
badge?.number = 99

2. 滚动模式

如果 Tab 很多，开启 scrollable 模式：

<com.google.android.material.tabs.TabLayout
    app:tabMode="scrollable" ... />

---

主题化

你可以自定义指示器（Indicator）的高度、颜色和动画。

<style name="Widget.App.TabLayout" parent="Widget.Material3.TabLayout">
    <!-- 将指示器高度改为 4dp 并使用圆角样式 -->
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabIndicatorAnimationMode">elastic</item>
</style>