【Android】TabLayout 自定義指示器 Indicator 樣式

本文CSDN博客

本文簡書

---

在佈局里加入 TabLayout，默認是下劃線的樣式，可使用 tabIndicatorGravity 屬性設置爲：bottom（默認值，能夠不用設置，指示器顯示在底部）、 top（指示器顯示在頂部）、center（指示器顯示在中間）、stretch（指示器高度拉伸鋪滿 item）。

<android.support.design.widget.TabLayout
    android:id="@+id/tl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabIndicatorFullWidth="true"
    <!-- 設置 Indicator 高度 -->
    app:tabIndicatorHeight="2dp" 
    app:tabMode="scrollable" />
複製代碼

1. "app:tabIndicatorFullWidth" 屬性

注意 app:tabIndicatorFullWidth="true" 屬性，設爲 true，是 Indicator 充滿 item 的寬度：

設爲 false 是 Indicator 保持和 item 的內容寬度一致：

2. 給 Indicator 設置邊距

網上的作法通常是經過反射來設置 Indicator 的寬度，能夠參見博客： 關於Android改變TabLayout 下劃線(Indicator)寬度實踐總結

不過我以爲可使用 layer-list 來實現。 在 drawable 文件夾下新建一個 indicator.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        <!-- 設置左邊距 -->
        android:left="15dp"
        <!-- 設置右邊距 -->
        android:right="15dp">
        <!-- 注：這裏須要一個空的 <shape /> 標籤，不然會報錯 -->
        <shape />
    </item>
</layer-list>
複製代碼

須要注意的是在 shape 裏設置顏色是無效的，須要在佈局文件裏設置 Indicator 顏色。

在 TabLayout 佈局裏添加 Indicator 的樣式：

<android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <!-- 設置 Indicator 高度 -->
        app:tabIndicatorHeight="2dp" 
        <!-- 設置 Indicator 顏色 -->
        app:tabIndicatorColor="@color/colorPrimary"
        <!-- 設置 Indicator 的樣式 -->
        app:tabIndicator="@drawable/indicator" 
        app:tabMode="scrollable" />
複製代碼

3. 給 Indicator 設置圓角

若是不須要邊距，只須要圓角，能夠配合 app:tabIndicatorFullWidth 屬性，使用 shape 設置 app:tabIndicator 來實現圓角便可，無需使用 layer-list，代碼就不用貼了吧~

這裏爲了使效果看得明顯一點，把 Indicator 的高度設置爲 5dp。 給 Indicator 添加了 5dp 的圓角：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="15dp" android:right="15dp">
        <shape>
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>
複製代碼

4. 給 Indicator 設置寬高

4.1 在 <shape> 的 <size> 標籤裏設置寬高（API 23 以上）：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 若不設置 gravity，則 Indicator 寬度會填滿整個 item -->
    <item android:gravity="center_horizontal">
        <shape>
            <corners android:radius="5dp" />
            <size android:width="20dp" android:height="5dp" />
        </shape>
    </item>
</layer-list>
複製代碼

4.2 在 layer-list 裏給 <item> 標籤設置寬高（API 23 以上）：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="20dp"
        android:height="5dp"
        <!-- 若不設置 gravity 則默認是居左顯示，須要設置爲水平居中顯示 -->
        android:gravity="center_horizontal"> 
        <shape>
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>
複製代碼

5. tabIndicator 屬性源碼分析

TabLayout 的 tabIndicator 屬性裏設置的 layer-list 不支持設置顏色。 咱們查看一下 TabLayout 的源碼，搜索 TabLayout_tabIndicator：

this.setSelectedTabIndicator(MaterialResources.getDrawable(context, a, styleable.TabLayout_tabIndicator));
複製代碼

setSelectedTabIndicator() 方法：

搜索一下使用 tabSelectedIndicator 的地方，在 SlidingTabIndicator 類裏的 draw() 方法裏： 第 1 處 tabSelectedIndicator

再看一下 selectedIndicatorHeight 是什麼：

selectedIndicatorHeight 是在佈局裏給 TabLayout 設置的 tabIndicatorHeight 屬性。

可見若是咱們在佈局裏給 TabLayout 設置了 tabIndicatorHeight 屬性，則 Indicator 高度優先取 tabIndicatorHeight 設置的高度；不然纔會取我們自定義的 drawable 裏的高度。

繼續，第 2 處 tabSelectedIndicator

黃色方框裏能夠發現，爲何以前在 drawable 裏設置的顏色無效了，由於使用的是 TabLayout_tabIndicatorColor 屬性裏設置的顏色，因此 <stroke> 也無效，只保留了總體的形狀樣式。

6. 自定義複雜的 Indicator 樣式

若是須要複雜一點的樣式，好比 <stroke> 。 先寫一個 tab 被選中時的樣式 indicator.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        <!-- 設置邊距 -->
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp">
        <shape>
            <!-- 設置圓角 -->
            <corners android:radius="5dp" />
            <!-- 設置邊框 -->
            <stroke
                android:width="1dp"
                android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>
複製代碼

還須要一個 selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/indicator" android:state_selected="true" />
</selector>
複製代碼

接下來，咱們要設置的是 tabBackground，也就是 tab 標籤的背景，而再也不是tabIndicator，因此要把 Indicator 的高度設爲 0 ，不使用 tab 原生的 Indicator。

這裏還要注意一下 tabRippleColor 屬性，是設置點擊 tab 標籤時的波紋顏色，不設置的時候，默認是灰色的，文章前面的截圖裏有顯示效果。若是想去掉這個效果，設置顏色爲透明便可。

<android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <!-- 使用咱們自定義的點擊樣式 -->
        app:tabBackground="@drawable/selector"
        <!-- tabIndicator 高度設爲 0 -->
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        <!-- 設置點擊時的波紋顏色爲透明 -->
        app:tabRippleColor="@android:color/transparent" />
複製代碼

想實現更復雜的效果，可使用 MagicIndicator

附上一個效果圖，感受仍是很酷炫的：