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())
}

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

6.自定义tabView的布局customView  

看下图，一个是custom内容填充了整个tablyout，一个是custom的高度自适应包裹。

核心就是，第二参数，不要传Tablyout的引用。

LayoutInflater.from(this@ActivityHome)
                    .inflate(R.layout.tab_home_pager, root, false)

 

 

TabLayoutMediator(tl_home, vp2_home, true, false) { tab, pos ->
                val tabCustomView = LayoutInflater.from(this@ActivityHome)
                    .inflate(R.layout.tab_home_pager, root, false)
                val tv = tabCustomView.findViewById<TextView>(R.id.tv_tab_home)
                tv.text = tabTextList[pos]
                val iv = tabCustomView.findViewById<ImageView>(R.id.iv_tab_home)
                iv.setImageResource(tabIvList[pos])
                tab.customView = tabCustomView
                tabCustomView.post{
                    tabCustomView.height.log("shawn==tabCustomView.height=")
                }
            }.attach()