Android 设置TabLayout的下划线宽度

69 阅读 0 评论 46 点赞

我是靠谱客的博主平淡黑猫，最近开发中收集的这篇文章主要介绍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上的文字
        }
    }