欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

TabLayout自定义指示器及样式

程序员文章站 2022-03-12 21:49:38
一,自定义指示器下标1,新建一个名为:layer_tab_indicator的layer-list文件,然后定义想要的样式,其中bitmap 设置成需要的图片格式,也可以根据需求在item标签内添加绘制所需要的下标

一,自定义指示器下标

效果图如下:
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