代码之家  ›  专栏  ›  技术社区  ›  YTerle

TabLayout选项卡文字颜色状态列表

  •  2
  • YTerle  · 技术社区  · 8 年前

    我想要我的 TabLayout 根据选项卡状态,选项卡有三种不同的文本颜色:

    1. 默认-红色
    2. 禁用-黄色
    3. 选定-绿色

    我正在添加我的表格:

    <android.support.design.widget.TabLayout
                    android:id="@+id/tlBetTypes"
                    style="@style/BetTabLayoutStyle"
                    android:layout_width="match_parent"
                    android:layout_height="38dp">
    
                    <android.support.design.widget.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/single"/>
    
                    <android.support.design.widget.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/multi"/>
    
                    <android.support.design.widget.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/system"/>
    </android.support.design.widget.TabLayout>
    

    然后 BetTabLayoutStyle :

    <style name="BetTabLayoutStyle">
        <item name="tabIndicatorHeight">0dp</item>
        <item name="tabTextAppearance">@style/BetTabTexStyle</item>
        <item name="tabBackground">@drawable/background_tab_bet_type</item>
    </style>
    

    然后 BetTabTexStyle :

    <style name="BetTabTexStyle">
        <item name="android:textSize">@dimen/text_size_12</item>
        <item name="android:textColor">@color/tab_test</item>
        <item name="android:fontFamily">@font/roboto_medium</item>
        <item name="textAllCaps">true</item>
    </style>
    

    tab_test.xml :

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/red"/>
        <item android:color="@color/yellow" android:state_enabled="false"/>
        <item android:color="@color/green" android:state_selected="true"/>
    </selector>
    

    但它不起作用。

    我还尝试创建一个 ColorStateList 从代码和集合,集合正在使用 setTabTextColors

    你能解释一下我做错了什么吗?

    3 回复  |  直到 8 年前
        1
  •  2
  •   Mohammed Farhan    8 年前

    你试过这个吗?

      <android.support.design.widget.TabLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabMode="scrollable"
                    app:tabGravity="fill"
                    app:tabTextColor="@color/defaultColor"
                    app:tabSelectedTextColor="@color/whenTabSelectedColor"/>
    
        2
  •  2
  •   YTerle    8 年前

    解决此问题的两个步骤:

    1. 设置 ColorStateList 来自代码 因为 TabLayout 如果在xml中膨胀,则重置构造函数中的文本外观。

      private void setupTabsStyle() {
      int[][] states = new int[][]{
              new int[]{android.R.attr.state_selected},
              new int[]{android.R.attr.state_enabled},
              new int[]{-android.R.attr.state_enabled}
      };
      
      @ColorRes int[] colorRes = new int[]{
              R.color.orange_1,
              R.color.grey_16,
              R.color.grey
      };
      
      @ColorInt int[] colors = new int[colorRes.length];
      
      for (int i = 0; i < colorRes.length; i++) {
          colors[i] = ContextCompat.getColor(getContext(), colorRes[i]);
      }
      
      ColorStateList colorList = new ColorStateList(states, colors);
      mTabLayout.setTabTextColors(colorList);
      }
      
    2. 使残废 TextView 在选项卡内部,不仅是选项卡本身。特别是,我们只需要禁用/启用 文本框 内部 TabView 为了实现文本外观效果,我禁用了 ImageView

      private void enableTab(int tabIndex, boolean doEnable) {
          LinearLayout tabStrip = ((LinearLayout) mTabLayout.getChildAt(0));
          LinearLayout tabView = (LinearLayout) tabStrip.getChildAt(tabIndex);
          tabView.setEnabled(doEnable);
          for (int i = 0; i < tabView.getChildCount(); i++) {
              View childAt = tabView.getChildAt(i);
              childAt.setEnabled(doEnable);
          }
      }
      
        3
  •  1
  •   Bek    8 年前

    试试这个

    <style name="BetTabLayoutStyle" parent="Widget.Design.TabLayout">
         <item name="tabIndicatorHeight">0dp</item>
         <item name="tabTextAppearance">@style/BetTabTexStyle</item>
         <item name="tabBackground">@drawable/background_tab_bet_type</item>
    </style>