在佈局里加入 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>
標籤裏設置寬高:
<?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 在 API 23 以上,支持直接在 layer-list
裏給 <item>
標籤設置寬度和高度:
<?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
附上一個效果圖,感覺還是很酷炫的: