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

Dav*_*d_E 116 android material-design android-design-library

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

做一些研究,发现默认指示颜色取自AppTheme.具体来自这里:

<item name="colorAccent">#FF4081</item>
Run Code Online (Sandbox Code Playgroud)

现在,在我的情况下,如果我更改colorAccent,它将影响使用此值作为背景颜色的所有其他视图,例如ProgressBar

现在还有什么方法可以将indicatorColor更改为除此之外的其他东西colorAccent吗?

Dav*_*d_E 233

遇到新的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>
Run Code Online (Sandbox Code Playgroud)

有了这个样式规范,现在我们可以像这样自定义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"/>
Run Code Online (Sandbox Code Playgroud)

问题解决了,标签指示器颜色和高度都可以从默认值更改.

  • 有没有办法通过java代码更改'tabSelectedTextColor'(非tabindicator颜色或高度). (5认同)
  • tabLayout xml小部件中的app:tabIndicatorColor属性是我需要做的唯一更改来解决此问题.谢谢! (2认同)

Mal*_*azi 94

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

要更改TabLayout指示符的颜色:

app:tabIndicatorColor="@color/color"
Run Code Online (Sandbox Code Playgroud)

要更改TabLayout指标的高度:

app:tabIndicatorHeight="4dp"
Run Code Online (Sandbox Code Playgroud)

  • 我把这条线,但颜色仍然是强调色 (3认同)

小智 33

由于我无法发布Android开发人员评论的后续内容,因此以下是需要以编程方式设置所选标签指示颜色的其他人的更新答案:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
Run Code Online (Sandbox Code Playgroud)

同样,对于身高:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
Run Code Online (Sandbox Code Playgroud)

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

  • setSelectedTabIndicatorHeight 现已弃用,知道现在使用什么吗? (2认同)

San*_*nde 17

app:tabIndicatorColor="@android:color/white"
Run Code Online (Sandbox Code Playgroud)


Gab*_*tti 13

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

只需使用高度:

TabLayout.setSelectedTabIndicatorHeight(int height)
Run Code Online (Sandbox Code Playgroud)

这里是官方的javadoc.

只需使用颜色:

TabLayout.setSelectedTabIndicatorColor(int color)
Run Code Online (Sandbox Code Playgroud)

这里是官方的javadoc.

您可以在此处找到Google Tracker中的信息.


Soh*_*shi 9

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

        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();
        }
Run Code Online (Sandbox Code Playgroud)

并更改指标高度使用"setSelectedIndicatorHeight"而不是"setSelectedIndicatorColor"然后按您所需的高度调用它


Art*_*elo 7

从 xml :

app:tabIndicatorColor="#fff"
Run Code Online (Sandbox Code Playgroud)

来自爪哇:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
Run Code Online (Sandbox Code Playgroud)


chr*_*hry 5

Foto指示器使用此:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color
Run Code Online (Sandbox Code Playgroud)