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

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

android-tablayout tabs android-layout android

YTerle · 技术社区 · 8 年前

我想要我的 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

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

3 回复 | 直到 8 年前

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

YTerle 8 年前

解决此问题的两个步骤:

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

使残废 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);
    }
}

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>