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

程序员文章站 2022-07-11 12:39:06

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

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

tablayout xml

 <android.support.design.widget.tablayout
  android:id="@+id/dialog_mod_icon_tablayout"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:tabindicatorheight="0dp"
  android:paddingleft="@dimen/commom_margin_20"
  app:tabmode="scrollable"
  app:tabpaddingstart="@dimen/commom_margin_5"
  app:tabpaddingend="@dimen/commom_margin_5"
  app:tabselectedtextcolor="@color/common_tv_dark_red" />

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

setcustomview()

设置自定义的tab布局給tablayout



 tablayout.tab tab = tablayout.newtab();
  view view = layoutinflater.from(context).inflate(r.layout.widget_choose_icon_tab_bg, null);
  textview tv = (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

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical">

 <textview
  android:id="@+id/choose_icon_tab_tv"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_gravity="center"
  android:background="@drawable/selector_icon_choose_txt_bg"
  android:padding="@dimen/commom_margin_4"
  android:textsize="@dimen/commom_tv_size_12"
  android:textstyle="bold" />
</linearlayout>

selector_icon_choose_txt_bg

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/shape_icon_choose_select" android:state_checked="true" />
 <item android:drawable="@drawable/shape_icon_choose_select" android:state_selected="true" />
 <item android:drawable="@drawable/shape_icon_choose_no_select" />
</selector>

shape_icon_choose_select

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <corners android:radius="@dimen/commom_margin_2"/>
 <stroke android:color="@color/common_bg_dali_gray_cc4" android:width="1dp"/>
</shape>

shape_icon_choose_no_select

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <corners android:radius="@dimen/commom_margin_2"/>

 <stroke android:color="@color/common_bg_dali_gray_62" android:width="1dp"/>
</shape>

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

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

tablayout布局自带的属性

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

fucking source code发现了两个要注意的地方。

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

Android Tablayout 自定义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);

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


 <android.support.design.widget.tablayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:tabpaddingstart="0dp"
  app:tabpaddingend="0dp"

（2）高度设置问题

如上面我的xml，这样设置后发现上下总是比我设置的要多一些高度height。

读源码发现，原来是高度也会有默认值的情况。tablayout.onmeasure方法：



final int idealheight = dptopx(getdefaultheight()) + getpaddingtop() + getpaddingbottom();
  switch (measurespec.getmode(heightmeasurespec)) {
   case measurespec.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对应的是：

private static final int default_height = 48; // dps

所以，当你自定义的customview比这个值小，那系统会用这个默认理想高度idealheight就会让实际的tablayout高度比想要的大一点。

注意，这一切的前提是对tablayout使用了customview。

以上这篇android tablayout 自定义tab布局的使用案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：抄手和馄饨的区别是什么？抄手和馄饨哪一个好吃？

下一篇：米酒是什么？米酒的功效有哪些？

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

Android 深入探究自定义view之流式布局FlowLayout的使用

android tablayout的使用，自定义tablayout的每一项视图

解决使用Notification自定义布局时出现android.app.RemoteServiceException Bad notification posted的问题