1. 程式人生 > >Android Tablayout 自定義Tab佈局的使用

Android Tablayout 自定義Tab佈局的使用

開發公司的專案中需要實現以下效果圖,需要自定義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",對於tabPaddingStarttabPaddingEnd則是設定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的佈局。。