Android Tablayout 自定义Tab布局的使用

桃扇骨 2022-06-04 01:12 1045阅读 0赞

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

![SouthEast][]

## 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自定义Tab的背景和字体的颜色变化][Android_Tablayout_Tab]

[SouthEast]: /images/20220604/4f2cbff9bf3c4b409b2d98a910cce323.png
[Android_Tablayout_Tab]: http://blog.csdn.net/qq_34589749/article/details/54137209