TabLayout

一、所在库

implementation 'com.google.android.material:material:1.4.0'

二、效果

1.自定义tab.customView，如何修改tab之间的间距

<com.google.android.material.tabs.TabLayout
                    android:id="@+id/tl_title"
                    android:layout_width="match_parent"
                    android:layout_height="32dp"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="0dp"
                    android:layout_toStartOf="@id/v_back_holder"
                    android:background="@android:color/transparent"
                    app:tabMode="scrollable"
                    app:tabGravity="center"
                    app:tabPaddingEnd="10dp"
                    app:tabPaddingStart="10dp"
                    app:tabPaddingTop="0dp"
                    app:tabContentStart="0dp"
                    app:tabPaddingBottom="0dp"
                    app:tabSelectedTextColor="#333333"
                    app:tabBackground="@android:color/transparent"
                    app:tabRippleColor="@null"
                    app:tabMaxWidth="200dp"
                    app:tabMinWidth="32dp"
                    app:tabTextColor="#333333"
                    app:tabIndicatorHeight="0dp"/>

关键部分：

主要是app:tabMaxWidth="200dp" 和app:tabMinWidth="32dp"，然后设置app:tabPaddingEnd="10dp" 和 app:tabPaddingStart="10dp" 来控制间距

2.去掉tab的点击涟漪效果

关键代码：app:tabRippleColor="@null"

3.去掉下划线

关键代码：app:tabIndicatorHeight="0dp"

4.设置选中颜色和未选中颜色

关键代码：

选中颜色：app:tabSelectedTextColor="#333333"

未选中颜色：app:tabTextColor="#333333"

5.实现第一个tab跟屏幕左边对齐

因为tab自身带有左右边距，只设置app:tabPaddingStart、app:tabPaddingEnd还不够，需要在代码中设置如下内容：

// 获取 TabLayout 中的第一个选项卡（item）
val tab: TabLayout.Tab? = tl_title.getTabAt(0)
if (tab != null) {
    tab.view.setPadding(-3, tab.view.getPaddingTop(), tab.view.getPaddingRight(), tab.view.getPaddingBottom())
}

动态的用负数去设置左边的填充