如何为TabLayout实现三种动态状态（CURRENT/SEEN/UNSEEN）的不同文本颜色？

嘿，这个问题我之前做项目时刚好碰到过！原生TabLayout那仅有的SELECTED/UNSELECTED状态确实不够用，而且乱用setCustomView还会搞出视图堆叠的坑，不过有几个靠谱的解决方向，咱们一个个说：

方案一：自定义带状态的Tab文本视图（推荐，最稳定） #

核心思路是给Tab的文本视图添加自定义状态，用Selector控制颜色，同时复用已有视图避免堆叠。

1. 定义自定义状态属性
   在res/values/attrs.xml里添加自定义状态：

<declare-styleable name="TabStates">
    <attr name="state_seen" format="boolean"/>
    <attr name="state_unseen" format="boolean"/>
</declare-styleable>

2. 实现状态感知的TextView
   写一个继承AppCompatTextView的类，重写状态逻辑：

class StatefulTabTextView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr) {

    private var isSeen = false
    private var isUnseen = false

    fun setState(state: TabState) {
        isSeen = state == TabState.SEEN
        isUnseen = state == TabState.UNSEEN
        refreshDrawableState() // 触发颜色更新
    }

    override fun onCreateDrawableState(extraSpace: Int): IntArray {
        val baseState = super.onCreateDrawableState(extraSpace + 2)
        if (isSeen) mergeDrawableStates(baseState, intArrayOf(R.attr.state_seen))
        if (isUnseen) mergeDrawableStates(baseState, intArrayOf(R.attr.state_unseen))
        return baseState
    }

    enum class TabState { CURRENT, SEEN, UNSEEN }
}

3. 编写颜色选择器
   在res/color/tab_text_color_selector.xml里配置不同状态的颜色：

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!-- CURRENT状态（选中态） -->
    <item android:color="#FF4081" android:state_selected="true"/>
    <!-- SEEN状态 -->
    <item android:color="#757575" app:state_seen="true"/>
    <!-- UNSEEN状态 -->
    <item android:color="#2196F3" app:state_unseen="true"/>
    <!-- 默认 fallback -->
    <item android:color="#333333"/>
</selector>

4. 初始化Tab并复用视图
   初始化时给每个Tab绑定自定义视图，重点是复用已有视图而非重新创建：

val tabLayout = findViewById<TabLayout>(R.id.tabLayout)
viewPager.adapter?.let { adapter ->
    for (i in 0 until adapter.count) {
        val tab = tabLayout.getTabAt(i) ?: tabLayout.newTab()
        // 复用已有自定义视图，没有才新建
        val tabView = tab.customView as? StatefulTabTextView ?: StatefulTabTextView(this).apply {
            text = adapter.getPageTitle(i)
            setTextColor(ContextCompat.getColorStateList(this@MainActivity, R.color.tab_text_color_selector))
            setPadding(16, 8, 16, 8)
        }
        tab.customView = tabView
        if (tab.parent == null) tabLayout.addTab(tab)
    }
}

// 动态更新状态的方法
fun updateTabState(tabIndex: Int, state: StatefulTabTextView.TabState) {
    tabLayout.getTabAt(tabIndex)?.let { tab ->
        (tab.customView as? StatefulTabTextView)?.setState(state)
    }
}

方案二：Kotlin扩展函数轻量实现 #

如果不想自定义View，用扩展函数直接操作Tab内部的原生TextView，避免重复创建视图：

enum class TabState { CURRENT, SEEN, UNSEEN }

fun TabLayout.Tab.updateTextColor(state: TabState) {
    val color = when(state) {
        TabState.CURRENT -> ContextCompat.getColor(context, R.color.current_tab)
        TabState.SEEN -> ContextCompat.getColor(context, R.color.seen_tab)
        TabState.UNSEEN -> ContextCompat.getColor(context, R.color.unseen_tab)
    }
    // 直接获取Tab内部的原生文本视图
    this.view.findViewById<TextView>(android.R.id.title)?.setTextColor(color)
}

// 使用示例
tabLayout.getTabAt(0)?.updateTextColor(TabState.UNSEEN)

这个方案更轻量，但依赖TabLayout内部的android.R.id.title，虽然目前版本稳定，但如果Google修改内部结构可能失效。

方案三：重写TabLayout（适合复杂全局控制） #

如果需要深度定制（比如状态切换动画、全局状态联动），可以直接重写TabLayout：

class CustomTabLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : TabLayout(context, attrs, defStyleAttr) {

    private val tabStates = mutableMapOf<Tab, TabState>()

    enum class TabState { CURRENT, SEEN, UNSEEN }

    fun setTabState(tab: Tab, state: TabState) {
        tabStates[tab] = state
        updateTabAppearance(tab)
    }

    private fun updateTabAppearance(tab: Tab) {
        val state = tabStates[tab] ?: TabState.SEEN
        val color = when(state) {
            TabState.CURRENT -> ContextCompat.getColor(context, R.color.current_tab)
            TabState.SEEN -> ContextCompat.getColor(context, R.color.seen_tab)
            TabState.UNSEEN -> ContextCompat.getColor(context, R.color.unseen_tab)
        }
        tab.view.findViewById<TextView>(android.R.id.title)?.setTextColor(color)
    }

    override fun onTabSelected(tab: Tab) {
        super.onTabSelected(tab)
        // 选中时自动设为CURRENT，其他Tab设为SEEN
        setTabState(tab, TabState.CURRENT)
        tabStates.filterKeys { it != tab }.forEach { (otherTab, _) ->
            setTabState(otherTab, TabState.SEEN)
        }
    }
}

关键注意点 #

• 无论哪种方案，绝对不要每次更新状态都调用setCustomView，一定要复用已有视图，这是解决视图堆叠的核心。
• 用Selector时注意状态优先级，比如CURRENT状态用state_selected="true"来覆盖其他状态，避免冲突。

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