TabLayout自定义指示器

2020-05-22  本文已影响0人  hao_developer

效果图:


image.png

indicator.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:gravity="center"
        android:width="@dimen/dp_26"
        android:height="@dimen/dp_4">

        <shape>
            <gradient android:angle="0" android:startColor="#7E51FF" android:endColor="#B643D0"/>
        </shape>

    </item>

</layer-list>

布局如下:

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLay"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/sp_10"
            app:tabMode="fixed"
            app:tabIndicator="@drawable/indicator"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorHeight="@dimen/dp_4"
            app:tabSelectedTextColor="@color/black"
            app:tabTextColor="@color/black" >

            <com.google.android.material.tabs.TabItem
                android:text="待审核(2)"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <com.google.android.material.tabs.TabItem
                android:text="已审核(5)"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <com.google.android.material.tabs.TabItem
                android:text="已下架(3)"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

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

\color{red}{app:tabMode="fixed"} 表示:tabitem撑满
\color{red}{app:tabIndicator="@drawable/indicator"} 表示:引用自定义指示器
\color{red}{app:tabIndicatorFullWidth="false"} 表示:指示器根据宽度根据文字长度来定
\color{red}{app:tabIndicatorHeight="@dimen/dp_4"} 表示:指示器的高度
\color{red}{app:tabSelectedTextColor="@color/black"} 表示:tabitem选中时的字体颜色
\color{red}{app:tabTextColor="@color/black"} 表示:tabitem默认状态下的字体颜色

上一篇 下一篇

猜你喜欢

热点阅读