全路径地址为：com.google.android.material.tabs.TabLayout
- app:tabPaddingEnd 与 app:tabPaddingStart 要相等，否则会导致indicator 不是居中的；
- app:tabMode="scrollable"， 并设置了paddingStart, 会导致左边滑动。这时候 可以使用 margingStart 达到左边指定间距的效果；
-
indicator 希望是固定宽度，并且与文字居中。
最简单的办法：做一个 .9 图，左右留白区域 设置可以缩放，左右和上下全部为内容区域。 设置 indicator 高度为 预期高度。
indicator_with_padding.png
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="@color/white"
app:tabIndicatorFullWidth="false"
app:tabMode="scrollable"
app:tabPadding="0dp"
app:tabIndicatorHeight="3dp"
app:tabRippleColor="@null"
app:tabIndicator="@drawable/indicator_with_padding" />
app:tabRippleColor 是取消点击波纹效果；
app:tabPadding可以设置tab 左右间距、可以实现取消额外间距的效果；
app:tabIndicatorFullWidth 是设置indicator宽度是不是跟tab 等宽，设置为false, 则效果为 左右比tab文字小一点；
app:tabIndicator 为设置indicator drawable. 可以使用png图片；
app:tabIndicatorHeight 设置indicator高度。
app:tabIndicatorColor 设置indicator颜色。
一定要设置，不然效果就是colorPrimary颜色加app:tabIndicator 形状。设置成app:tabIndicator drawable的主题色即可。
- 实现 tab 自定义view
在tabLayout 设置adapter 后（个数确定），遍历个数，对每个tab 设置customView。然后设置默认选中的那个的文字颜色、大小、加粗与否。并在tab 选中和取消选中时再设置文字等ui。
step1.先设置tab选中后ui变化
binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
override fun onTabReselected(p0: TabLayout.Tab?) {
}
override fun onTabUnselected(tab: TabLayout.Tab?) {
tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 14f
tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.gray))
}
override fun onTabSelected(tab: TabLayout.Tab?) {
//修改文字大小
tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 18f
tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.brand_text_color))
}
})
step2:给tablayout绑定viewpager；
step3:绑定viewpager后，给tab设置custom view. tab_text_view 实际就是一个TextView。
/**
* 给tab设置custom view。需要在tabLayout 绑定viewpager后调用（此时才有child）
*/
private fun setTabCustomLayout() {
val count = binding.tabLayout.tabCount
for (i in 0 until count) {
val tab = binding.tabLayout.getTabAt(i)
tab?.setCustomView(R.layout.tab_text_view)
(tab?.customView as? TextView)?.text = binding.viewPager.adapter?.getPageTitle(i)
//文字加粗
(tab?.customView as? TextView)?.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
}
if (count > 0) {
//选中第一个，设置文字大小和颜色
binding.tabLayout.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 18f
binding.tabLayout.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.brand_text_color))
}
}
