Android 设置TabLayout的下划线宽度

1.背景

    由于最近需要实现一个功能，需要用到TabLayout作为标题，切换标题时，底下填充不同的frament。但是UI设计对下划线有要求，需要设置下划线的宽度和高度。最终实现的效果图如下：

2.TabLayout介绍

    TabLayout大概分为三个时代，刚开始的时候：

    2.1 TabLayout继承自LinearLayout，在android.widget包下。

    2.2 TabLayout继承自HorizontalScrollView，在android.support.design.widget包下，后来发现低版本的也需要用到此控件，所以谷歌退出了Support包。

    2.3 TabLayout继承自HorizontalScrollView，在com.google.android.material.tabs包下，后来谷歌推出Material Design的时候更新了一波

    后来谷歌感觉这些support包管理起来太麻烦，所以更新了一波androidx，将所有的support的，比如说v4啊，v7啊这些包整合起来了，所以也不要怕升级到androidx，整体用起来还是比较顺手的，但是，还有坑，比如这次的控件，给更新没了，哭都没地方哭。

3.使用

布局文件：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/mTableLayout"
        style="@style/mytablayoutstyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        app:tabTextAppearance="@style/myTabTextAppearance" />

</RelativeLayout>

布局文件Tablayout的item：tab_item.xml

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

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <!-- 自定义下划线的长度跟宽度 -->
    <View
        android:layout_width="13dp"
        android:layout_height="5dp"
        android:background="#2B6CFF" />
</LinearLayout>

如果想自定义Tablayout的样式可以在Style文件中定义：

    <style name="mytablayoutstyle" parent="Base.Widget.Design.TabLayout">
        <item name="tabIndicatorColor">@color/color_tab_normal</item>
        // tabText下横线的颜色
        <item name="tabIndicatorHeight">0dp</item><!--如果设置为0，则不显示默认的下划线-->
        <item name="tabSelectedTextColor">@color/color_text_test</item>
        // 设置选中tab的颜色
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/white_color</item>
    </style>

如果不需要的话，只是对文字有要求可以自定义myTabTextAppearance：

    <!-- 自定义tab文字样式 -->
    <style name="myTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/color_tab_normal</item>
    </style>

代码使用：

    private String[] mTitles = {"标题1", "标题2", "标题3", "标题4"};

    private void initView() {
        mTableLayout = (TabLayout) findViewById(R.id.mTableLayout);

        // 添加tab
        for (int i = 0; i < mTitles.length; i++) {
            TabLayout.Tab tab = mTableLayout.newTab();
            // 设置Tab的自定义View
            tab.setCustomView(R.layout.tab_item);
            // 添加Tab
            mTableLayout.addTab(tab);

            // 设置tab_item 里的文字
            TextView textView = (TextView) tab.getCustomView().findViewById(R.id.tab_text);
            textView.setText(mTitles[i]);//设置tab上的文字
        }
    }

4.遇到问题

    当TabLayout标签太多时，Tab显示拥挤，导致某些标签显示两行，效果不好看

    解决办法：在布局文件中改控件添加这个属性  app:tabMode="scrollable"

    添加完成之后，tablayout的标签，就可以滑动了，也不会被折叠起来

参考：

    1.https://blog.csdn.net/qiao0809/article/details/53506008

    2.https://blog.csdn.net/baidu_34120295/article/details/81254304