如何实现TabLayout选中Tab切换图标并同步Tab颜色？求实现方案及示例代码

嘿，我来给你两种实用的实现方案，刚好匹配你要的「选中Tab切换图标+文字颜色和选中图标统一」的需求～

方式一：用Drawable选择器（简单快捷，无需自定义布局） #

这种方式利用Android自带的状态选择器，自动根据Tab的选中状态切换图标和文字颜色，代码量少还省心。

1. 给每个Tab创建图标状态选择器 #

在res/drawable目录下，为每个Tab单独创建图标选择器文件，比如tab_home_icon_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态显示你的高亮图标 -->
    <item android:drawable="@drawable/ic_home_selected" android:state_selected="true"/>
    <!-- 未选中状态显示默认图标 -->
    <item android:drawable="@drawable/ic_home_unselected"/>
</selector>

同理，给其他Tab创建对应的选择器文件（比如tab_profile_icon_selector.xml）。

2. 创建文字颜色状态选择器 #

在res/color目录下创建tab_text_color_selector.xml，让文字颜色和选中图标的主色完全匹配：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态颜色，直接用你选中图标的主色值 -->
    <item android:color="@color/tab_selected_color" android:state_selected="true"/>
    <!-- 未选中状态颜色 -->
    <item android:color="@color/tab_unselected_color"/>
</selector>

3. 配置TabLayout #

直接在布局文件里给TabLayout绑定选择器就行：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextColor="@color/tab_text_color_selector"
    app:tabIndicatorColor="@color/tab_selected_color" <!-- 可选：让指示器颜色和选中色统一 -->
    app:tabGravity="fill"
    app:tabMode="fixed">

    <!-- 首页Tab -->
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_home_icon_selector"
        android:text="@string/tab_home"/>

    <!-- 我的Tab -->
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_profile_icon_selector"
        android:text="@string/tab_profile"/>
</com.google.android.material.tabs.TabLayout>

如果是动态添加Tab，代码也很简单：

val tabLayout = findViewById<TabLayout>(R.id.tabLayout)
// 添加首页Tab
tabLayout.addTab(tabLayout.newTab()
    .setIcon(R.drawable.tab_home_icon_selector)
    .setText(R.string.tab_home))
// 添加我的Tab
tabLayout.addTab(tabLayout.newTab()
    .setIcon(R.drawable.tab_profile_icon_selector)
    .setText(R.string.tab_profile))

这种方式下，Tab的选中/未选中状态会自动触发选择器的切换，不需要额外写监听逻辑～

方式二：自定义Tab布局（更灵活，适合复杂样式） #

如果你的Tab需要特殊布局（比如图标在上、文字在下，或者加额外装饰），用自定义布局的方式更可控。

1. 编写自定义Tab布局文件 #

在res/layout下创建custom_tab_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="8dp">

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

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textSize="12sp"/>
</LinearLayout>

2. 绑定Tab并监听选中状态 #

在Activity/Fragment里初始化Tab，然后监听选中事件来切换图标和颜色：

val tabLayout = findViewById<TabLayout>(R.id.tabLayout)

// 准备Tab数据：未选中图标、选中图标、文字
val tabDataList = listOf(
    Triple(R.drawable.ic_home_unselected, R.drawable.ic_home_selected, R.string.tab_home),
    Triple(R.drawable.ic_profile_unselected, R.drawable.ic_profile_selected, R.string.tab_profile)
)

// 初始化每个Tab
tabDataList.forEachIndexed { index, (unselectedIcon, selectedIcon, textRes) ->
    val tab = tabLayout.newTab()
    val tabView = LayoutInflater.from(this).inflate(R.layout.custom_tab_item, null)
    // 默认设置未选中状态
    tabView.findViewById<ImageView>(R.id.tab_icon).setImageResource(unselectedIcon)
    tabView.findViewById<TextView>(R.id.tab_text).apply {
        text = getString(textRes)
        setTextColor(getColor(R.color.tab_unselected_color))
    }
    tab.customView = tabView
    tabLayout.addTab(tab)
}

// 设置默认选中第一个Tab
tabLayout.getTabAt(0)?.select()

// 监听Tab选中事件
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab) {
        val tabView = tab.customView ?: return
        // 设置选中图标和文字颜色
        val (_, selectedIcon, _) = tabDataList[tab.position]
        tabView.findViewById<ImageView>(R.id.tab_icon).setImageResource(selectedIcon)
        tabView.findViewById<TextView>(R.id.tab_text).setTextColor(getColor(R.color.tab_selected_color))
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
        val tabView = tab.customView ?: return
        // 设置未选中图标和文字颜色
        val (unselectedIcon, _, _) = tabDataList[tab.position]
        tabView.findViewById<ImageView>(R.id.tab_icon).setImageResource(unselectedIcon)
        tabView.findViewById<TextView>(R.id.tab_text).setTextColor(getColor(R.color.tab_unselected_color))
    }

    override fun onTabReselected(tab: TabLayout.Tab) {
        // 可选：重复选中时的操作，比如刷新当前页面
    }
})

小提示 #

• 要保证文字选中色和图标主色完全一致，可以用取色器工具（比如Android Studio自带的Color Picker）提取图标上的颜色值，然后写到colors.xml里。
• 如果用的是Material Design的TabLayout，记得在build.gradle里添加依赖：implementation 'com.google.android.material:material:1.9.0'（版本可以根据你的项目调整）。

内容的提问来源于stack exchange，提问作者podgradle