如何不使用状态列表修改TabLayout.Tab的文字颜色？

我之前也遇到过类似需求，不想依赖xml里的状态列表（selector），而是完全根据页面数据来灵活控制Tab的文字颜色，下面分享两种实用的实现方式：

1. 给单个Tab设置自定义颜色 #

如果只是针对某个特定Tab（比如对应的数据有特殊标记需要高亮），直接用SpannableString给文本添加颜色样式就可以，完全脱离状态列表：

Kotlin 实现 #

// 获取目标Tab（示例为第0个Tab）
val targetTab = tabLayout.getTabAt(0)
targetTab?.let { tab ->
    val tabText = tab.text ?: return@let
    // 从页面数据中获取要设置的颜色（这里可以替换成你的业务逻辑）
    val desiredColor = if (pageData.isSpecial) {
        ContextCompat.getColor(context, R.color.highlight_red)
    } else {
        ContextCompat.getColor(context, R.color.normal_gray)
    }
    // 用SpannableString包裹文本并设置颜色
    val coloredText = SpannableString(tabText).apply {
        setSpan(
            ForegroundColorSpan(desiredColor),
            0,
            length,
            Spannable.SPAN_INCLUSIVE_INCLUSIVE
        )
    }
    tab.text = coloredText
}

Java 实现 #

Tab targetTab = tabLayout.getTabAt(0);
if (targetTab != null && targetTab.getText() != null) {
    CharSequence tabText = targetTab.getText();
    // 根据页面数据动态计算颜色
    int desiredColor = pageData.isSpecial()
            ? ContextCompat.getColor(context, R.color.highlight_red)
            : ContextCompat.getColor(context, R.color.normal_gray);
    SpannableString coloredText = new SpannableString(tabText);
    coloredText.setSpan(
            new ForegroundColorSpan(desiredColor),
            0,
            coloredText.length(),
            Spannable.SPAN_INCLUSIVE_INCLUSIVE
    );
    targetTab.setText(coloredText);
}

2. 动态控制选中/未选中状态的颜色 #

如果需要根据页面数据切换选中和未选中的颜色（比如不同页面场景下选中色要变化），可以监听Tab的选中状态，在回调里更新样式：

Kotlin 实现 #

// 封装根据状态和页面数据获取颜色的方法
private fun getTabColor(isSelected: Boolean, pageData: YourPageData): Int {
    return if (isSelected) {
        when(pageData.tabStyle) {
            TabStyle.STYLE_A -> ContextCompat.getColor(context, R.color.style_a_selected)
            TabStyle.STYLE_B -> ContextCompat.getColor(context, R.color.style_b_selected)
            else -> ContextCompat.getColor(context, R.color.default_selected)
        }
    } else {
        when(pageData.tabStyle) {
            TabStyle.STYLE_A -> ContextCompat.getColor(context, R.color.style_a_unselected)
            TabStyle.STYLE_B -> ContextCompat.getColor(context, R.color.style_b_unselected)
            else -> ContextCompat.getColor(context, R.color.default_unselected)
        }
    }
}

// 统一更新Tab文字颜色的工具方法
private fun updateTabTextColor(tab: TabLayout.Tab, isSelected: Boolean, pageData: YourPageData) {
    val tabText = tab.text ?: return
    val color = getTabColor(isSelected, pageData)
    val coloredText = SpannableString(tabText).apply {
        setSpan(
            ForegroundColorSpan(color),
            0,
            length,
            Spannable.SPAN_INCLUSIVE_INCLUSIVE
        )
    }
    tab.text = coloredText
}

// 设置Tab选中监听
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab) {
        updateTabTextColor(tab, true, yourPageData)
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
        updateTabTextColor(tab, false, yourPageData)
    }

    override fun onTabReselected(tab: TabLayout.Tab) {
        updateTabTextColor(tab, true, yourPageData)
    }
})

// 初始化时给所有Tab设置初始颜色
repeat(tabLayout.tabCount) { index ->
    tabLayout.getTabAt(index)?.let { tab ->
        updateTabTextColor(tab, tab.isSelected, yourPageData)
    }
}

当页面数据更新时，只需要重新遍历所有Tab调用updateTabTextColor方法，就能同步最新的颜色样式。

注意事项 #

• 如果之前给TabLayout设置过tabTextColor或setTabTextColors（基于状态列表的方法），记得先清除这些设置，避免和动态设置的Spannable样式冲突。
• 若需要频繁更新颜色，建议把相关逻辑封装成扩展函数或工具类，减少重复代码。

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