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

Question

我希望我的 TabLayout 选项卡具有三种不同的文本颜色，具体取决于选项卡状态：

默认 - 红色
禁用 - 黄色
已选择 - 绿色

我正在添加我的 TabLayout：

<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。

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

Answer 1

你试过吗？

  <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"/>

Answer 2

试试这个

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

Answer 3

解决这个问题的两个步骤：

set ColorStateList from code 因为如果在 xml 中膨胀它，TabLayout 会重置构造函数中的文本外观。

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

在选项卡内禁用 TextView，不仅是选项卡本身。特别是我们只需要disable/enable在TabView里面的TextView来实现文字外观效果，但是我把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);
    }
}

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

TabLayout tab text color state list

android

android-layout

tabs

android-tablayout