TabLayout

Steve_XiaoHai

已于 2024-06-27 12:10:17 修改

阅读量407

点赞数

分类专栏：布局控件文章标签： android

于 2023-09-04 14:36:25 首次发布

本文链接：https://blog.youkuaiyun.com/Steve_XiaoHai/article/details/132668611

版权

布局控件专栏收录该内容

13 篇文章

订阅专栏

该博客主要围绕Android中自定义Tab展开，介绍了所在库及多种效果的实现方法。包括修改tab间距，通过设置最大、最小宽度和左右内边距；去掉点击涟漪效果、下划线；设置选中与未选中颜色；实现首个tab与屏幕左边对齐；以及自定义tabView布局等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、所在库

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