【Android】TabLayout 自定义指示器 Indicator 样式

注：使用新的属性需要设置implementation 'com.android.support:design:28.0.0'

在布局里加入 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"
    
        android:right="15dp">
        
        <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"
        
        app:tabIndicatorColor="@color/colorPrimary"
        
        app:tabIndicator="@drawable/indicator" 
        app:tabMode="scrollable" />

3. 给 Indicator 设置圆角

如果不需要边距，只需要圆角，可以配合 app:tabIndicatorFullWidth 属性，使用 shape 设置 app:tabIndicator 来实现圆角即可，无需使用 layer-list，代码就不用贴了吧~

这里为了使效果看得明显一点，把 Indicator 的高度设置为 5dp。
给 Indicator 添加了 5dp 的圆角：

<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 在 的 标签里设置宽高：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:gravity="center_horizontal">
        <shape>
            <corners android:radius="5dp" />
            <size
                android:width="20dp"
                android:height="5dp" />
        shape>
    item>
layer-list>

4.2 在 API 23 以上，支持直接在 layer-list 里给 标签设置宽度和高度：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="20dp"
        android:height="5dp"
        
            <corners android:radius="5dp" />
            
            <stroke
                android:width="1dp"
                android:color="@color/colorAccent" />
        shape>
    item>
layer-list>

还需要一个 selector.xml：

<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:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        
        app:tabRippleColor="@android:color/transparent" />

想实现更复杂的效果，可以使用 MagicIndicator

附上一个效果图，感觉还是很酷炫的：