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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值