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

Posted 2023-02-22

【中文标题】如何更改新的 TabLayout 指示器颜色和高度

【英文标题】：How to change the new TabLayout indicator color and height

【发布时间】：2015-09-03 10:18:32

【问题描述】：

我在玩新的android.support.design.widget.TabLayout，发现一个问题，在类定义中，没有改变指示器颜色和默认高度的方法。

做了一些研究，发现默认的指示器颜色取自 AppTheme。具体从这里：

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

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

除了colorAccent之外，还有什么方法可以将indicatorColor更改为其他东西吗？

【参考方案1】：

由于新的 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_
    android:layout_
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

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

【讨论】：

有没有办法通过java代码改变'tabSelectedTextColor'（不是tabindicator颜色或高度）。

tabLayout xml 小部件中的 app:tabIndicatorColor 属性是解决此问题所需的唯一更改。谢谢！

我将此作为父样式：parent="@style/Base.Widget.Design.TabLayout"

这个解决方案是合法的

【参考方案2】：

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

更改 TabLayout 指示器的颜色：

app:tabIndicatorColor="@color/color"

更改 TabLayout 指示器的高度：

app:tabIndicatorHeight="4dp"

【讨论】：

我放了这条线，但是颜色还是强调色

@Kenji 你确定这条线是放在 TabLayout 而不是 xml 的工具栏位中吗？容易错位:)

高度的完美解决方案。它工作正常。谢谢马雷克。

如果我想应用渐变色怎么办？

【参考方案3】：

由于我无法在android developer's comment 上发布后续内容，因此对于需要以编程方式设置选定选项卡指示器颜色的其他人来说，这是一个更新的答案：

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

同样，对于高度：

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

这些方法最近才添加到 revision 23.0.0 of the Support Library，这就是 Soheil Setayeshi's answer 使用反射的原因。

【讨论】：

setSelectedTabIndicatorHeight 现在已弃用，知道现在要使用什么吗？

【参考方案4】：

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

【参考方案5】：

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

仅用于高度：

TabLayout.setSelectedTabIndicatorHeight(int height)

这里是official javadoc。

仅用于颜色：

TabLayout.setSelectedTabIndicatorColor(int color)

这里是official javadoc。

您可以在这里找到Google Tracker 中的信息。

【讨论】：

我们应该使用哪些整数来表示颜色？

您可以使用 Color 类，例如 Color.RED

setSelectedTabIndicatorHeight 现已弃用

【参考方案6】：

要以编程方式更改指示器颜色和高度，您可以使用反射。例如下面的指示器颜色使用代码：

        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”，然后按您想要的高度调用它

【讨论】：

谢谢！这对我有帮助！我猜谷歌忘了在他们的支持库中提供这个方法。

如果反射已经作为公共函数可用，为什么还要使用它？ developer.android.com/reference/android/support/design/widget/…

@SoheilSetayeshi 哦，好的。谢谢你。也许你应该更新答案。

但这对于支持库 23.0.0 以下的 API 来说是一个完美的解决方案。我是说哇！很好的答案！

【参考方案7】：

来自 xml：

app:tabIndicatorColor="#fff"

来自java：

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

【参考方案8】：

Foto 指示器使用这个：

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color

【参考方案9】：

您可以使用 xml 更改此设置

app:tabIndicatorColor="#fff"

【参考方案10】：

只需将此行放入您的代码中。如果更改颜色，则更改括号中的颜色值。

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

【参考方案11】：

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);

【讨论】：

这仅适用于文本颜色，不适用于标签背景