Kotlin TabLayout切换字体大小变化

Google自带的TabLayouot太难用了，各种意想不到的bug。

先引入包：

implementation("androidx.viewpager2:viewpager2:1.0.0")//一般都是一起使用，就加上了
implementation("com.google.android.material:material:1.11.0") 

踩坑一：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabSelectedTextColor="@color/teal_200"//选中Tab文字颜色
    app:tabIndicatorColor="@color/teal_200"//Tab下标线颜色
    app:tabTextAppearance="@style/unSelectTabLayout"//未选中Tab文字style(大小粗细)
    app:tabSelectedTextAppearance="@style/selectTabLayout"//选中Tab文字style(大小粗细) 
/>

 themes.xml里添加

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="selectTabLayout" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textAllCaps">true</item>
    </style>

    <style name="unSelectTabLayout" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">12sp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textAllCaps">true</item>
    </style>

</resources>

看着很美好，所有的状态都有了，但是一运行，一运行一个不吱声。文字颜色状态正常改变，字体加粗只有初始加载有用，但是选中的文字大小没作用，切换后，加粗也失效

 

踩坑二：

想着通过监听，代码改变字体大小

dataBinding.tabLayout.addOnTabSelectedListener (
            object : OnTabSelectedListener{
                override fun onTabSelected(tab: TabLayout.Tab?) {
                    //选中tab
                    setTabTextSize(true, tab)
                }

                override fun onTabUnselected(tab: TabLayout.Tab?) {
                    //选中到未选中tab
                    setTabTextSize(false, tab)
                }

                override fun onTabReselected(tab: TabLayout.Tab?) {
                    //选中tab，再次点击选中tab
                    setTabTextSize(true, tab)
                }

            }
        )




private fun setTabTextSize(select: Boolean, tabFirst: TabLayout.Tab?) {
        TextView(this).apply {
            typeface = if(select) Typeface.DEFAULT_BOLD else Typeface.DEFAULT
            setTextSize(TypedValue.COMPLEX_UNIT_DIP, if(select) 20f else 12f)
            setTextColor(ContextCompat.getColor(this.context, if(select)  R.color.teal_200 else R.color.white))
            gravity = Gravity.CENTER
        }.also {
            it.text = tabFirst?.text
            tabFirst?.customView = it
        }
    }

这次试了试，切换没啥问题，但是首次加载，默认第一个tab选中，字体style还是不起作用

 

解决： 

初始加载不会走OnTabSelectedListener监听，所以思路是让初始Tab走一次监听（走的监听是onTabReselected，初始加载默认就是第一个tab，再选择一次相当于重复选中，所以会走onTabReselected）

dataBinding.tabLayout.getTabAt(0)?.select()

完整代码:

xml

因为text的style都在代码里设置了，所以xml里都可以去掉了

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

Activity

class MainActivity : AppCompatActivity() {

    private lateinit var dataBinding: MainLayoutBinding
    private val tabList = listOf("全部","已完成","待付款","已关闭")
    private val fragmentList = listOf(FirstFragment(), SecondFragment(),
        ThreeFragment(), FourFragment()
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        dataBinding = DataBindingUtil.setContentView(this, R.layout.main_layout)

        val viewAdapter = ViewPageAdapter(this, fragmentList)
        dataBinding.viewPager.adapter = viewAdapter
        val mediator = TabLayoutMediator(dataBinding.tabLayout, dataBinding.viewPager){
            tab, position -> tab.text = tabList[position]
        }
         mediator.attach()
        dataBinding.tabLayout.addOnTabSelectedListener (
            object : OnTabSelectedListener{
                override fun onTabSelected(tab: TabLayout.Tab?) {
                    //选中tab
                    setTabTextSize(true, tab)
                }

                override fun onTabUnselected(tab: TabLayout.Tab?) {
                    //选中到未选中tab
                    setTabTextSize(false, tab)
                }

                override fun onTabReselected(tab: TabLayout.Tab?) {
                    //选中tab，再次点击选中tab
                    setTabTextSize(true, tab)
                }

            }
        )
        dataBinding.tabLayout.getTabAt(0)?.select()

    }

    private fun setTabTextSize(select: Boolean, tabFirst: TabLayout.Tab?) {
        TextView(this).apply {
            typeface = if(select) Typeface.DEFAULT_BOLD else Typeface.DEFAULT
            setTextSize(TypedValue.COMPLEX_UNIT_DIP, if(select) 20f else 12f)
            setTextColor(ContextCompat.getColor(this.context, if(select)  R.color.teal_200 else R.color.white))
            gravity = Gravity.CENTER
        }.also {
            it.text = tabFirst?.text
            tabFirst?.customView = it
        }
    }

}

 

完！

（LJ csdn，自己上传的视频都不让下载，图片模糊凑活看吧。祝早日倒闭）

--------------------------------------------------------分割线---------------------------------------------------------------

刚才继续看其他功能时候，发现切换tab时候，会有高低不统一的问题，如图：

测试发现：如果每个tab的text字数一样，没有问题。如果字数不同就会出现这种情况。

主要还是TabLayout的layout_height问题。

方案一：如果字数相同，可以给layout_height设置wrap_content自适应。

方案二：如果字数不同，只能给layout_height设置固定高度了。

可能有其他的解决办法，懒得去看源码了，有兴趣的可以看下。