TabLayout的使用

TabLayout属性介绍

tabIndicatorFullWidth

上面运行的结果可以看到指示器的整个宽度是充满屏幕的，有时项目需要指示器线条的宽度和文字得宽度一致，那么就可以设置tabIndicatorFullWidth属性为false，默认为true

tabRippleColor

即去除点击时的水波纹效果：

app:tabRippleColor:“@android:color/transparent”/>

tabTextAppearance

有时候如果设计师需要我们实现，选中的tab文字字体加粗并放大字号，但是TabLayout并没有直接设置字体大小样式的属性，这时候就可以通过设置自定义属性tabTextAppearance来实现，其值是一个自定义style。

<style name="TabLayoutTheme">
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">bold</item>
</style>

<com.google.android.material.tabs.TabLayout
        ...
        app:tabTextAppearance="@style/TabLayoutTheme"
        >

设置后会发现所有的不仅选中的tab字体变了，所有tab字体都变了，不是我们想要的效果。abLayout可以设置OnTabSelectedListener监听事件，可以通过选中状态的改变来动态的设置tab样式。下面看看具体的实现逻辑
创建一个tab_text_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center"
    />

然后在styles.xml中新建选中和未选中的style：

<style name="TabLayoutTextSelected">
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/colorAccent</item>
</style>

 <style name="TabLayoutTextUnSelected">
        <item name="android:textSize">14sp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">@color/grey</item>
</style>

最后给TabLayout添加监听事件

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
	@Override
    public void onTabSelected(TabLayout.Tab tab) {
       View customView = tab.getCustomView();
         if (customView == null) {
             tab.setCustomView(R.layout.tab_text_layout);
         }
         TextView textView = tab.getCustomView().findViewById(android.R.id.text1);
         textView.setTextAppearance(TabActivity.this, R.style.TabLayoutTextSelected);
     }

     @Override
     public void onTabUnselected(TabLayout.Tab tab) {
         View customView = tab.getCustomView();
         if (customView == null) {
             tab.setCustomView(R.layout.tab_text_layout);
         }
         TextView textView = tab.getCustomView().findViewById(android.R.id.text1);
         textView.setTextAppearance(TabActivity.this, R.style.TabLayoutTextUnSelected);
     }

     @Override
     public void onTabReselected(TabLayout.Tab tab) {
     }
});

获取tab中的CustomView，为空则设置成我们自己创建的tab_text_layout，然后找到textView的id，最后给textView设置TextAppearance属性。
这里需要注意的是textView的id必须是android.R.id.text1，因为从源码中可以看到CustomView获取的是android.R.id.text1。

好像有效果了，但是还有点小问题，第一次进去的时候未选中的tab还是使用的默认样式，我们自定义的样式并没有生效，原因是未选中的tab并没有执行到OnTabSelectedListener中的onTabUnselected方法。解决办法是：只需要给TabLayout控件的tabTextAppearance属性设置一个初始的TabLayoutTextUnSelected样式即可。

<com.google.android.material.tabs.TabLayout
	...
    app:tabTextAppearance="@style/TabLayoutTextUnSelected" />

tabMode

tabMode属性用于设置tab是否可以横向滚动，可选的值有fixed(默认)、auto、scrollable。当设置默认的fixed时，所有的tab都会挤到屏幕上显示。一般使用scrollable。

tabIndicatorColor

设置指示器线条的颜色

tabIndicatorHeight

设置指示器的高度，如果我们不需要设置指示器，可以设置为0

tabIndicatorGravity

设置指示器的显示位置，可选值有bottom(默认)、center、top、stretch

给TabLayout设置间隔drawable

实际项目中可能需要给每个Tab之间设置一个小竖线什么的，可以通过下面的方法来实现：

• 自定义一个drawable文件，这里自定义一个线条，layout_divider_vertical.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff0000"/>
    <size android:width="1dp"/>
</shape>

• 添加下列代码

LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
//设置LinearLayout的divider时使用，以确定在哪里显示分隔符。
//LinearLayout.SHOW_DIVIDER_BEGINNING：在组的开始处显示一个分隔符。
//LinearLayout.SHOW_DIVIDER_END：在组的最后显示一个分隔符。
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this,
                R.drawable.layout_divider_vertical));

可以看到线条的高度是充满了整个TabLayout的，如果我们需要让线条的高度短一点，则可以设置DividerPadding来实现

LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
linearLayout.setDividerPadding(10);

TabItem

给TabLayout添加TabItem有两种方法，一种是在xml文件中直接添加，一种是通过代码添加。

1.在xml文件中直接添加

<com.google.android.material.tabs.TabItem
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:icon="@android:drawable/ic_menu_add"
     android:text="添加"/>

2.通过代码添加

// tablayout，Tab是TabLayout的内部类，且Tab的构造方法是包访问权限
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab3"));
tabLayout.addTab(tabLayout.newTab().setText("Tab4"));

text在英文状态下默认都是大写，这是因为TabLayout中默认设置属性 textAllCaps = true 可以通过修改属性改成小写