【问题标题】:How to change the new TabLayout indicator color and height如何更改新的 TabLayout 指示器颜色和高度
【发布时间】:2015-09-03 10:18:32
【问题描述】:

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

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

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

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

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

【问题讨论】:

    标签: android material-design android-design-library


    【解决方案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_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"/>
    

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

    【讨论】:

    • 有没有办法通过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);
              

              【讨论】:

              • 这仅适用于文本颜色,不适用于标签背景
              猜你喜欢
              • 2021-12-11
              • 2012-04-17
              • 2017-03-21
              • 2021-12-19
              • 1970-01-01
              • 1970-01-01
              • 2023-03-29
              • 2021-12-26
              • 2017-11-27
              相关资源
              最近更新 更多