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

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

做了一些研究，发现默认的指示器颜色取自 AppTheme:

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

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

除了 colorAccent之外，还有什么方法可以改变指示器的颜色？

164160 次浏览
小开
最佳答案

由于新的 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"/>

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

小开

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

        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”，然后根据所需的高度调用它

小开

因为我不能发布 Android 开发者的评论的后续文章，这里有一个更新的答案给其他需要通过编程设置选择的选项卡指示器颜色的人:

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

同样，对于身高:

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

这些方法最近才添加到 支援图书馆23.0.0修订版，这就是为什么 Soheil Setayeshi 的回答使用反射。

小开

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

只要使用高度:

TabLayout.setSelectedTabIndicatorHeight(int height)

这是 官方的 javadoc。

只要用颜色:

TabLayout.setSelectedTabIndicatorColor(int color)

这是 官方的 javadoc。

在这里你可以找到在 谷歌追踪器的信息。

小开

通过设计支持库，您现在可以在 xml 中更改它们:

更改 TabLayout 指示器的 颜色:

app:tabIndicatorColor="@color/color"

更改 TabLayout 指示器的 身高:

app:tabIndicatorHeight="4dp"
小开

您可以使用 xml 来更改它

app:tabIndicatorColor="#fff"
小开

只要把这一行代码。如果你改变颜色，然后改变括号中的颜色值。

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
小开 
app:tabIndicatorColor="@android:color/white"
小开

来自 xml:

app:tabIndicatorColor="#fff"

来自 java:

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

照片指示器使用:

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

安卓系统让这一切变得简单。

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="" ，那么自定义指示器将用您的 colorPrimary或 colorAccent作为色彩颜色绘制


提交答案