修改 support 包 TabLayout，實現新浪微博/即刻 APP 蚯蚓導航效果

摘要： TabLayout 核心用法不變，新增一些自定義屬性。 <!-- 導航條 indicator 漸變開始顏色 --> <attr name="indicatorStartColor" format="color"/> <!-- 導...

TabLayout 核心用法不變，新增一些自定義屬性。

<!-- 導航條 indicator 漸變開始顏色 -->
<attr name="indicatorStartColor" format="color"/>
<!-- 導航條 indicator 漸變結束顏色 -->
<attr name="indicatorEndColor" format="color"/>
<attr name="indicatorMarginStart" format="dimension"/>
<attr name="indicatorMarginEnd" format="dimension"/>
<attr name="indicatorMarginBottom" format="dimension"/>
複製程式碼

1. 引入 lib

Step 1.新增 JitPack 倉庫

在根目錄 build.gradle 中新增:

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
複製程式碼

Step 2.新增依賴

dependencies {
implementation 'com.github.auv1107:tablayout-android:-SNAPSHOT'
}
複製程式碼

2. 佈局

只需要把你原來使用的 TabLayout 替換為com.antiless.support.widget.TabLayout ，即可啟用蚯蚓動畫效果。然後加上一些自定義 indicator 屬性，來實現你的自定義樣式。

<com.antiless.support.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:layout_gravity="center_horizontal"
app:tabMode="scrollable"
app:tabIndicatorHeight="3dp"
app:indicatorStartColor="#d6694e"
app:indicatorEndColor="#e73820"
app:indicatorMarginStart="20dp"
app:indicatorMarginEnd="20dp"
app:indicatorMarginBottom="3dp">
</com.antiless.support.widget.TabLayout>
複製程式碼