如何更改新的 TabLayout 指示器颜色和高度



我正在玩弄新android.support.design.widget.TabLayout,发现了一个问题,在类定义中,没有方法可以更改指示器颜色和默认高度。

做一些研究,发现默认指标颜色取自应用主题。具体来说,从这里开始:

<item name="colorAccent">#FF4081</item>

现在,就我而言,如果我更改colorAccent,它将影响使用此值作为背景颜色的所有其他视图,例如进度条

现在有没有办法将指标颜色更改为除colorAccent之外的其他内容?

遇到新的 TabLayout 使用值 colorAccent 中的指示器颜色的问题,我决定深入研究android.support.design.widget.TabLayout实现,发现没有公共方法来自定义它。但是,我发现了TabLayout的样式规范:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

有了这个样式规范,现在我们可以像这样自定义 TabLayout:

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/pages_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

问题解决了,选项卡指示器颜色和高度都可以从其默认值更改。

使用设计支持库,您现在可以在 xml 中更改它们:

要更改选项卡布局指示器的颜色,请执行以下操作:

app:tabIndicatorColor="@color/color"

要更改选项卡布局指示器的高度,请执行以下操作:

app:tabIndicatorHeight="4dp"

由于我无法发布对 android 开发人员评论的跟进,因此对于需要以编程方式设置所选选项卡指示器颜色的任何其他人来说,这里有一个更新的答案:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

同样,对于高度:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

这些方法最近才添加到支持库的修订版 23.0.0 中,这就是为什么 Soheil Setayeshi 的答案使用反射的原因。

app:tabIndicatorColor="@android:color/white"

使用设计支持库 v23,您可以通过编程方式设置颜色和高度。

仅用于高度:

TabLayout.setSelectedTabIndicatorHeight(int height)

这里是官方的javadoc。

仅用于颜色:

TabLayout.setSelectedTabIndicatorColor(int color)

这里是官方的javadoc。

在这里,您可以在谷歌追踪器中找到信息。

要以编程方式更改指示器颜色和高度,您可以使用反射。 例如,对于指示器颜色,请使用以下代码:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

要更改指示器高度,请使用"setSelectedIndicatorHeight"而不是"setSelectedIndicatorColor",然后按所需的高度调用它

来自 xml :

app:tabIndicatorColor="#fff"

从爪哇:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

Foto 指标使用这个:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color
您可以使用

xml 更改此设置

app:tabIndicatorColor="#fff"

只需将这一行放在您的代码中即可。如果更改颜色,则更改括号中的颜色值。

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

Android使它变得容易。

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

所以,我们只是说

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

这将给我们一个蓝色的正常颜色和紫色选择的颜色。

现在我们设置高度

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

对于身高,我们说

mycooltablayout.setSelectedIndicatorHeight(6);

如果您尝试使用 app:tabIndicator="" 来设置指标,并使用layer-list可绘制对象作为自定义指标,那么您最好一起设置app:tabIndicatorColor="",因为我在 TabLayout 的源代码中看到了这一点:

选项卡

布局.滑动选项卡指示器#绘制

如果您没有设置 app:tabIndicatorColor="" ,则自定义指标将以您的colorPrimarycolorAccent作为色调颜色绘制

最新更新