Android TabLayout基本使用及完美调整指示器位置的技巧

在应用中，我们经常遇到多个页签切换的需求，这个时候往往使用viewPager+TabLayout实现，但官方的TabLayout使用时往往不满足我们的需求，例如不能修改指示器长度的问题，本文利用巧妙的方法来解决

基本使用
在XML里这样用

 	 <com.google.android.material.tabs.TabLayout
 android:id="@+id/tabLayout"
 style="@style/MyTabLayoutStyle"
 android:layout_width="match_parent"
 android:layout_height="97px"
 app:tabMaxWidth="0dp"
 app:tabGravity="fill"
 app:tabIndicatorFullWidth="false"
 app:tabMode="fixed"
 app:tabTextAppearance="@style/TabLayoutTextStyle"
>
 <com.google.android.material.tabs.TabItem
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     />
 <com.google.android.material.tabs.TabItem
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     />
 <com.google.android.material.tabs.TabItem
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     />
 </com.google.android.material.tabs.TabLayout>


  <androidx.viewpager.widget.ViewPager
 android:id="@+id/viewpager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center"
 android:orientation="vertical">

</androidx.viewpager.widget.ViewPager>

一个TabLayout 包含你需要的若干个TabItem 可以直接在TabItem里定义每个Item的标题text,也可以在代码里使用重写的Adapter的getpageTitle设置

TabItem没有什么特殊设置，指示器以及每个页签的设置都在TabLayout里

特殊用法
修改item宽度：通常使用时，每个item都是拥挤在中间紧挨着的，如果想让每个item平分宽度可以这样使用，在TabLayout里设置如下属性：
```
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
```

然后TabLayout的宽度是match_parent
ItemLayout的宽度是wrap_content
修改文字颜色和大小
在TabLayout里无法直接用属性设置字体大小，可以使用app:tabTextAppearance属性来设置字体的属性

在style里设置

<style name="TabLayoutTextStyle">
    <item name="android:textSize">30px</item>
    <item name="textAllCaps">true</item>
    <item name="android:textStyle">bold</item>
 </style>
 然后在TabLayout里引用
 app:tabTextAppearance="@style/TabLayoutTextStyle"

textAllCaps为设置文字是英文的时候全部大写
android:textStyle设置文字加粗
文字颜色可以在style里设置也可以直接在TabLayout里进行设置

tabTextColor=""

通常情况下会设置一个TabLayout的Style

<style name="MyTabLayoutStyle" parent="TextAppearance.Design.Tab">
    <item name="tabIndicatorColor">@color/green_line</item>
    <item name="tabIndicatorHeight">8dp</item>
    <item name="tabTextColor">@color/white_text</item>
</style>

tabIndicatorColor设置指示器颜色
tabIndicatorHeight设置指示器高度
tabTextColor 设置文字颜色

修改指示器宽度：
默认情况下，指示器是跟着文字宽度来调整的，如果想铺满每个宽度则
有很多人喜欢用反射的方法去进行设置指示器的宽度，但是反射的方法用到了TabLayout的成员变量命名，新的TabLayout已经换了，经过测试无效，也懒得研究新的实现方法，这里采用一个投机取巧的方法来设置指示器的宽度

在TabLayout里有一个属性tabIndicatorFullWidth=true/false 当为true的时候，指示器的宽度为每个Item的宽度，如果是false的话，指示器的宽度是文字的宽度，这里设置为false,就是指示器的宽度是文字的宽度

然后在文字定义的地方使用空格占位符

&#160;

在string资源文件内使用占位符的方法为

<string name="notice">Notice&#160;&#160;</string>

需要几个空格就添加几个占位符
这里在文字的左右两端都添加相同数量的空格占位符
然后就可以实现指示器比文字宽又比每个Item的总宽度窄的现象

有时候每个Item之间有间距，也可以通过这种方式让视觉上出现间距的现象，实际上每个Item还是紧挨着的

Android TabLayout基本使用及完美调整指示器位置的技巧

猜你喜欢