<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/colorPrimary"
app:layout_constraintTop_toBottomOf="@+id/top"
app:tabIndicatorHeight="2dp"
app:tabIndicatorFullWidth="false" //指示器宽度是否充满，fasle代表跟随文字宽度
//如果想自定义指示器的圆角或者宽度，使用drawable创建，drawable事例在下面 ①
app:tabIndicator="@drawable/home_tab_indicator_shape"
如果想取消掉TabLayout选项卡点击时候的Ripple水波纹效果，直接给 app:tabRippleColor ="@android:color/transparent"即可：
app:tabRippleColor = "@android:color/transparent"
app:tabMode="scrollable" //固定长度或者滑动
app:tabSelectedTextColor="@color/color_white"
app:tabTextColor="@color/color_white" />
示例：①自定义的indicator drawable示例
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:gravity="center">
android:width="20dp"
android:height="4dp" />
<corners android:radius="20dp" />
<solid android:color="@color/white" />
</layer-list>
那么如果想要在选中的时候改变选中大小呢
只能通过自定义customView属性，去设置一个自定义的布局，然后监听选中事件，自己去手动设置选中或者未选中的样式
不推荐反射的方式：效率慢，而且效果不能尽如人意
所以下面介绍下如何使用CustomView，有了自定义View想怎么搞就怎么搞
fun setTabLayoutTab(str : ArrayList<String>){
for (i in 0 until str.size) {
tabLayout.addTab(tabLayout.newTab())
}
for (i in 0 until str.size) {
tabLayout.getTabAt(i)?.setCustomView(makeTabView(str[i]))
}
tabLayout.getTabAt(0)?.select()
//与adapter建立关联
vpDiscover.registerOnPageChangeCallback(
object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) { tabLayout.selectTab(tabLayout.getTabAt(position), true)
}
})
tabLayout.addOnTabSelectedListener(
ViewPager2OnTabSelectedListener(vpDiscover))
}
/** * 设置tablayout tab 自定义样式
* @param position
* @return
*/
private fun makeTabView(str: String): View {
val tabView: HomeTabCustomView = HomeTabCustomView(requireContext()) tabView.setTitle(str) return tabView
}
CustomTabView
class HomeTabCustomView
@JvmOverloads constructor(var mContext: Context, var attributeSet: AttributeSet? = null, var defaultInt: Int = 0): FrameLayout(mContext, attributeSet, defaultInt) {
init {
LayoutInflater.from(mContext).inflate(R.layout.layout_tab_home_discover, this)
}
override fun setSelected(selected: Boolean) {
onTabSelect(selected) super.setSelected(selected)
}
fun onTabSelect(selected: Boolean){
if(selected){
tvTabTitle?.setTextSize(TypedValue.COMPLEX_UNIT_PX, 19.sp2px().toFloat()) viewTabLine.visibility = View.VISIBLE
}else{
tvTabTitle?.setTextSize(TypedValue.COMPLEX_UNIT_PX, 15.sp2px().toFloat()) viewTabLine.visibility = View.GONE
}
}
fun setTitle(str:String){
tvTabTitle.setText(str)
}
}
以上应该能满足大部分开发中遇到的问题
参考：
https://my.oschina.net/u/4259809/blog/4330689
https://blog.csdn.net/Liuyz0420/article/details/105439066/
https://blog.csdn.net/jingzz1/article/details/102163021
https://www.jianshu.com/p/fde38f367019
