优雅地修改 TabLayout 指示线 Indicator 的宽度

时间 2019-11-06

标签优雅修改 tablayout 指示 indicator 宽度繁體版

原文原文链接

在工做中，常常会碰到把标签栏指示线的宽度，作的和文字宽度同样，甚至比文字宽度还要短的设计。使用 TabLayout 咱们能够快速实现一个 Material Design 风格的标签栏，但 TabLayout 的指示线 Indicator 默认是占满一格 Tab 的，且未直接提供修改 Indicator 宽度的方法。php

本文总结了几种修改 Indicator 宽度的方案，并讨论如何「优雅」地修改它。java

反射

若是你的项目中也有修改指示线宽度的需求，而且已经在网上找过修改方法，极可能你如今项目中用的就是这个方法。网上大部分文章都是经过分析源码，用反射实现的，代码以下：android

public void setIndicatorWidth(@NonNull final TabLayout tabLayout, final int margin) {
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                try {
                    Field mTabStripField = tabLayout.getClass().getDeclaredField("mTabStrip");
                    mTabStripField.setAccessible(true);
                    LinearLayout mTabStrip = (LinearLayout) mTabStripField.get(tabLayout);
                    for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                        View tabView = mTabStrip.getChildAt(i);
                        Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
                        mTextViewField.setAccessible(true);
                        TextView mTextView = (TextView) mTextViewField.get(tabView);
                        tabView.setPadding(0, 0, 0, 0);
                        int width = mTextView.getWidth();
                        if (width == 0) {
                            mTextView.measure(0, 0);
                            width = mTextView.getMeasuredWidth();
                        }
                        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                        params.width = width;
                        params.leftMargin = margin;
                        params.rightMargin = margin;
                        tabView.setLayoutParams(params);
                        tabView.invalidate();
                    }
                } catch (NoSuchFieldException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }
        });
    }
复制代码

这样作是没问题的，但若是把项目的 SDK 升级到 28 或以上，它就再也不有效了，缘由是 TabLayout 源码中的变量名修改了，因此代码也要改为这样：app

public void setIndicatorWidth(@NonNull final TabLayout tabLayout, final int margin) {
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                try {
                    Field slidingTabIndicatorField = tabLayout.getClass().getDeclaredField("slidingTabIndicator");
                    slidingTabIndicatorField.setAccessible(true);
                    LinearLayout mTabStrip = (LinearLayout) slidingTabIndicatorField.get(tabLayout);
                    for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                        View tabView = mTabStrip.getChildAt(i);
                        Field textViewField = tabView.getClass().getDeclaredField("textView");
                        textViewField.setAccessible(true);
                        TextView mTextView = (TextView) textViewField.get(tabView);
                        tabView.setPadding(0, 0, 0, 0);
                        int width = mTextView.getWidth();
                        if (width == 0) {
                            mTextView.measure(0, 0);
                            width = mTextView.getMeasuredWidth();
                        }
                        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                        params.width = width;
                        params.leftMargin = margin;
                        params.rightMargin = margin;
                        tabView.setLayoutParams(params);
                        tabView.invalidate();
                    }
                } catch (NoSuchFieldException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }
        });
    }
复制代码

经过反射虽然能够实现，但我我的以为反射不够优雅，而且它有可能由于 SDK 的升级而失效。ide

自定义 Tab

TabLayout 中的 Tab 是容许自定义的，但 Indicator 不属于 Tab。布局

因此有这样一种解决方案，把 Indicator 隐藏掉，而后在自定义 Tab 的布局中加入指示线。post

咱们能够经过把 Indicator 的颜色设为透明来隐藏它：动画

<android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="@android:color/transparent" />
复制代码

在代码中，当 Tab 添加完毕后，替换成自定义的 Tab：spa

TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(R.layout.layout_tab);
TextView tv = tab.getCustomView().findViewById(R.id.text_view);
tv.setText(tab.getText());
复制代码

而且还须要监听 Tab 的切换，控制指示线的显示隐藏：设计

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        // TODO Tab 被切换，刷新全部 Tab
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

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

    }
});
复制代码

用这种方法，什么样式都能实现了。但有个缺点是，在 Tab 切换的时候，没有了指示线的移动动画。

SDK 28+ 属性配置

若是你使用的 SDK 版本是 28 或以上，而且须要将 Indicator 的宽度修改为和文字宽度同样，那么太棒了，如今你只须要给 TabLayout 配置一个属性就行了：

<android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorFullWidth="false" />
复制代码

当 tabIndicatorFullWidth 取 false 的时候，Indicator 的宽度会和文字的宽度同样，但这也意味着，当不一样 Tab 里的文字宽度不同时，Indicator 的宽度也会不同，像下面这样。

若是设计要求 Indicator 的宽度必须固定，或者宽度要比文字短，那咱们还要接着找别的解决方案。

使用 Drawable 样式

最后这种方案，是我认为最优雅的解决方案，使用也特别简单。在网上还没看到有人使用，能够算是个人原创了，哈哈。

Indicator 是容许咱们设置 drawable 来自定义样式的，好比添加圆角什么的。但不管什么样式，Indicator 依然是占满 Tab 宽度的。不要紧，咱们把它的背景设成透明，包含一个固定宽度的 shape 就行了，像这样：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <item android:gravity="center">
        <shape>

            <size android:width="16dp" android:height="4dp" />

            <corners android:radius="4dp" />

            <solid android:color="@color/colorAccent" />

        </shape>
    </item>

</layer-list>
复制代码

而后在布局文件中配置 tabIndicator 属性：

<android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorHeight="10dp" app:tabIndicator="@drawable/tab_indicator" />
复制代码

也能够在代码中设置：

tabLayout.setSelectedTabIndicator(R.drawable.tab_indicator);
复制代码

效果以下：

从上面这个例子还能够发现，使用这个方法，不只能够在视觉上增长 Indicator 的左右边距，还能够增长它的上下边距。

好啦，其实就是配置一个 Drawable 文件这么简单，只是发现网上很多人在问，但尚未人用这个方法解决，在这里和你们分享一下。