簡介

通常，TabLayout的指示器一般只是修改下顏色，并沒有過多的進行自定義。但是通過修改Indicator的相關(guān)屬性，可以達到一些特殊的效果，先看下相關(guān)的效果圖：

test.gif

開始

其實上面的實現(xiàn)思路基本都是一樣的，就是讓indicator的高度和TabLayout的高度一致

第一種方式如下：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout1"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginTop="16dp"
    android:background="@drawable/bg_tab_corner"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:tabIndicator="@drawable/bg_tab_indicator"
    app:tabIndicatorColor="@color/teal_200"
    app:tabIndicatorHeight="40dp"
    app:tabMode="auto"
    app:tabSelectedTextColor="@color/white">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Java" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kotlin" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Flutter" />
</com.google.android.material.tabs.TabLayout>

部分屬性說明：

• android:background：用于設(shè)置TabLayout的背景圓角
• app:tabIndicator：用于設(shè)置指示器的圓角
• app:tabIndicatorColor： 設(shè)置指示器的顏色

注意：如果不設(shè)置該參數(shù)app:tabIndicatorColor，則指示器顏色默認(rèn)為colorPrimary，即使在app:tabIndicator設(shè)置的drawable里設(shè)置顏色也是無效的！

第二種方式實際上就設(shè)置了indicator的動畫

app:tabIndicatorAnimationMode="elastic"

默認(rèn)動畫為linear

第三種方式如下：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout3"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginTop="16dp"
    android:background="@drawable/bg_tab_corner"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tabLayout2"
    app:tabGravity="center"
    app:tabIndicator="@drawable/bg_tab_outline_indicator"
    app:tabIndicatorColor="@android:color/transparent"
    app:tabIndicatorHeight="40dp"
    app:tabMode="auto"
    app:tabSelectedTextColor="@color/teal_700">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Java" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kotlin" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Flutter" />

</com.google.android.material.tabs.TabLayout>

其實與第一種基本一致，主要就是將app:tabIndicatorColor設(shè)置為透明，確保app:tabIndicator不會被遮擋

第四種方式如下：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout4"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginTop="16dp"
    android:background="@drawable/bg_tab_outline_corner"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tabLayout3"
    app:tabGravity="center"
    app:tabMinWidth="24dp"
    app:tabIndicator="@drawable/bg_tab_indicator"
    app:tabIndicatorAnimationMode="elastic"
    app:tabIndicatorColor="@color/teal_200"
    app:tabIndicatorHeight="40dp"
    app:tabMode="auto">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_java" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_kotlin" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_flutter" />

</com.google.android.material.tabs.TabLayout>

相當(dāng)于把TabItem中的文字換成了圖標(biāo)，并通過設(shè)置app:tabMinWidth來縮小TabItem的間距，默認(rèn)值為72dp，這樣看起來其實并不一定要用來當(dāng)做Tab使用，也可以當(dāng)做Toggle button來使用，當(dāng)然也有用作ViewPager的指示器的

內(nèi)容比較簡單，就不放源碼了

Material Design Tabs

Android Dot TabItem