TabLayout自定义指示器及样式

一，自定义指示器下标

效果图如下：

1，新建一个名为：layer_tab_indicator的layer-list文件，然后定义想要的样式，其中bitmap 设置成需要的图片格式，也可以根据需求在item标签内添加绘制所需要的下标

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="23dp"
        android:height="6dp"
        android:gravity="center">
        <bitmap android:src="@drawable/tab_bottom_tag"/>
    </item>
</layer-list>

2，给TabLayout添加自定义的layer-list

app:tabIndicator="@drawable/layer_tab_indicator"

通过如上两步即可完成自定义TabLayout的指示器样式，如果更加复杂的，可参考其他的进行自定义，使用如上方法即可满足大部分的需求

二，自定义Tab样式

1，给TabLayout添加选中的监听

private fun getTabSelectedListener() = object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) {
        //Tab选中的样式
        setTab(tab)
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
        //非选中时的样式
        tab?.customView = null
    }

    override fun onTabReselected(p0: TabLayout.Tab?) {

    }
}

2，自定义选中的Tab样式

fun setTab(tab: TabLayout.Tab?) {
    val textView = TextView(activity)
    //字体样式
    val selectedSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20f, resources.displayMetrics)
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, selectedSize)
    textView.typeface = Typeface.defaultFromStyle(Typeface.BOLD) //加粗
    textView.gravity = Gravity.CENTER
    //选中的字体颜色
    textView.setTextColor(ContextCompat.getColor(activity!!, R.color.main_color))
    textView.text = tab!!.text
    tab.customView = textView
}

因TaLayout已经预留了一个customView根据自己的需求进行扩展，通过如上的onTabSelected和onTabUnselected进行自定义选中和未选中的样式

本文地址：https://blog.csdn.net/zdc9023/article/details/110562007