Android Tablayout样式修改
Android Tablayout样式修改
一、需求
这是TabLayout的样式需求:这个样式就类似于简单图片的指示器，特点就是比较小，不像之前写的带有文字的tablayout
二、实现
1.首先需要绘制两个drawable，用来制定drawable的形状
这个drawable是蓝色指示器—选中的形状
tab_bottom_indicator_select.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center_horizontal">
<shape>
<size android:width="10dp" android:height="4dp"/>
<corners android:radius="2dp"/>
</shape>
</item>
</layer-list>
这个是drawable是灰色指示器—未选中的形状
tab_bottom_indicator_unselect.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center_horizontal">
<shape>
<size android:width="6dp" android:height="4dp"/>
<corners android:radius="2dp"/>
<solid android:color="#606266"/>
</shape>
</item>
</layer-list>
TabLayout的属性设置
选中指示器的形状设置
对于TabLayout中tabIndicator属性，drawable的颜色填充是无效的，只能用drawable的形状
app:tabIndicator="@drawable/tab_bottom_indicator_select"
未选中指示器的形状设置–即默认形状
app:tabBackground="@drawable/tab_bottom_indicator_unselect"
2.指示器形状已经绘制好，现在需要填充颜色
选中的颜色属性
app:tabIndicatorColor="@color/blue"
这时候绘制出来的 两个tab之间的间距比较大，而我们需要间距调小
app:tabMaxWidth="12dp"
设置这个属性就好了
三、整体代码设置
<com.google.android.material.tabs.TabLayout
android:layout_width="wrap_content"
android:layout_height="4dp"
app:tabBackground="@drawable/tab_bottom_indicator_unselect"
app:tabGravity="center"
app:tabIndicator="@drawable/tab_bottom_indicator_select"
app:tabIndicatorColor="@color/blue"
app:tabIndicatorGravity="top"
app:tabIndicatorHeight="4dp"
app:tabMaxWidth="12dp"
app:tabMode="fixed" />
完成，撒花