TabLayout与ViewPager联动时双标签文本同时显示选中颜色问题

咱先理清楚你的核心问题：自定义OnTabSelectedListener实现图标切换后，出现了两个标签同时显示选中文本颜色的bug，移除监听后文本颜色恢复正常，但图标切换功能就没了。你后来发现加super.onTabSelected(tab)就搞定了——其实这就是问题的关键，咱来拆解下原因和修复方案。

问题根源 #

你用的是TabLayout.ViewPagerOnTabSelectedListener(viewPager)这个父类监听，它内部已经帮你实现了和ViewPager联动的状态管理（包括文本颜色的切换逻辑）。但当你重写onTabSelected和onTabUnselected时，没调用父类的对应方法，相当于跳过了TabLayout内部的选中状态更新流程，只执行了你自己的图标修改，导致文本颜色的状态没同步更新，就出现了两个标签都像选中的样子。

修复后的完整监听代码 #

把你的监听代码改成这样，核心就是先调用父类方法，再执行自己的逻辑：

tabLayout.addOnTabSelectedListener(object : TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
    override fun onTabSelected(tab: TabLayout.Tab) {
        // 先让父类处理TabLayout内部的选中状态（包括文本颜色切换）
        super.onTabSelected(tab)
        // 再切换选中状态的图标，用tab.position比viewPager.currentItem更准确
        tab.icon = getDrawable(iconListActive[tab.position])
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
        // 同样先调用父类方法更新未选中状态
        super.onTabUnselected(tab)
        // 切换未选中状态的图标
        tab.icon = getDrawable(iconList[tab.position])
    }
})

这里提醒下：别用viewPager.currentItem获取位置，直接用tab.position更稳妥，避免ViewPager状态还没同步的小问题。

额外优化小建议 #

1. 提前加载图标，提升性能：别每次选中都调用getDrawable，初始化时提前把图标加载好：

   // 在初始化阶段加载所有图标
   val activeIcons = listOf(
       getDrawable(R.drawable.tab1_active),
       getDrawable(R.drawable.tab2_active),
       getDrawable(R.drawable.tab3_active),
       getDrawable(R.drawable.tab4_active)
   )
   val inactiveIcons = listOf(
       getDrawable(R.drawable.tab1_normal),
       getDrawable(R.drawable.tab2_normal),
       getDrawable(R.drawable.tab3_normal),
       getDrawable(R.drawable.tab4_normal)
   )
   

2. 设置初始图标：在setupWithViewPager之后，给每个Tab设置默认的未选中图标：

   tabLayout.setupWithViewPager(viewPager)
   // 初始化所有tab的默认图标
   for (i in 0 until tabLayout.tabCount) {
       tabLayout.getTabAt(i)?.icon = inactiveIcons[i]
   }
   

为啥之前XML选择器没生效？ #

你之前试了用XML选择器设置文本颜色但没解决，是因为监听里的逻辑干扰了TabLayout的内部状态更新。当你调用super.onTabSelected后，TabLayout会正确更新选中状态，不管是setTabTextColors设置的颜色，还是XML选择器定义的样式，都能正常生效了。

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