Android Tablayout 自定义Tab布局的使用案例

2023-07-18 09:22:04 182

开发公司的项目中需要实现以下效果图，需要自定义TabLayout中的Tab

Tablayoutxml

其中如果多个tab需要滚动则要设置app:tabMode="scrollable"，对于tabPaddingStart与tabPaddingEnd则是设置Tab的左边和右边padding,根据具体的需求来设置就好，这里如果没有设置，TabLayout或自动设置一个默认的值給Tab,

setCustomView()

设置自定义的Tab布局給Tablayout



TabLayout.Tabtab=tabLayout.newTab();
Viewview=LayoutInflater.from(context).inflate(R.layout.widget_choose_icon_tab_bg,null);
TextViewtv=(TextView)view.findViewById(R.id.choose_icon_tab_tv);
tv.setText(listData.get(i).getName());
tab.setCustomView(view);
tabLayout.addTab(tab);

widget_choose_icon_tab_bg.xml

selector_icon_choose_txt_bg

shape_icon_choose_select

shape_icon_choose_no_select

通过以上设置，就实现了我图中TabLayout的子Tab的布局。。

补充知识：AndroidTabLayout布局自带的padding和height问题

TabLayout布局自带的属性

最近用TabLayout，发现设置简单的CustomView之后，有一些奇怪的边距。并不是按照你预想的那样。

fuckingsourcecode发现了两个要注意的地方。

(1)Tab默认自带横向边距问题

如上图，看到我就给了一个简单的View，结果上下左右全都多了边距。

跟源码发现，是mTabPaddingStart和mTabPaddingEnd在初始化的时候，会自动给一个默认值。

mTabPaddingStart=a.getDimensionPixelSize(R.styleable.TabLayout_tabPaddingStart,
mTabPaddingStart);
mTabPaddingTop=a.getDimensionPixelSize(R.styleable.TabLayout_tabPaddingTop,
mTabPaddingTop);
mTabPaddingEnd=a.getDimensionPixelSize(R.styleable.TabLayout_tabPaddingEnd,
mTabPaddingEnd);
mTabPaddingBottom=a.getDimensionPixelSize(R.styleable.TabLayout_tabPaddingBottom,
mTabPaddingBottom);

解决办法就是显示设置这两个属性：



（2）高度设置问题
如上面我的xml，这样设置后发现上下总是比我设置的要多一些高度height。
读源码发现，原来是高度也会有默认值的情况。TabLayout.onMeasure方法：

finalintidealHeight=dpToPx(getDefaultHeight())+getPaddingTop()+getPaddingBottom();
switch(MeasureSpec.getMode(heightMeasureSpec)){
caseMeasureSpec.AT_MOST:
heightMeasureSpec=MeasureSpec.makeMeasureSpec(
Math.min(idealHeight,MeasureSpec.getSize(heightMeasureSpec)),
MeasureSpec.EXACTLY);
可以看到，如果在xml里对布局的高度height用wrap_content，一般就进入这个MeasureSpec.AT_MOST的判断，而且Math.min这句取的最小值，一般会取到idealHeight的值，因为heightMeasureSpec对应的height是父控件的高度，一般会大一点。
而这个idealHeight对应的是：

privatestaticfinalintDEFAULT_HEIGHT=48;//dps

所以，当你自定义的customView比这个值小，那系统会用这个默认理想高度idealHeight就会让实际的tabLayout高度比想要的大一点。
注意，这一切的前提是对TabLayout使用了customView。
以上这篇AndroidTablayout自定义Tab布局的使用案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Android Tablayout 自定义Tab布局的使用案例

热门推荐

随机推荐