使用ViewPagerIndicator给所选定的选项卡文本设置不同的颜色

Question

我尝试让ViewPagerIndicator中的SampleTabsStyled demo在当前选定的选项卡上更改文本颜色，但没有成功。

然而，SampleTitlesStyledTheme demo在切换标题/选项卡时确实更改了其文本颜色。

当查看styles xml时：

<resources>
    ...
    <style name="CustomTitlePageIndicator">
        <item name="android:background">#18FF0000</item>
        <item name="footerColor">#FFAA2222</item>
        <item name="footerLineHeight">1dp</item>
        <item name="footerIndicatorHeight">3dp</item>
        <item name="footerIndicatorStyle">underline</item>
        <item name="android:textColor">#AA000000</item>
        <item name="selectedColor">#FF000000</item>
        <item name="selectedBold">true</item>
    </style>
    ...
    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textColor">#FF555555</item>
        <item name="android:textSize">16sp</item>
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <item name="android:dividerPadding">10dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
    </style>
    ...
</resources>

我看到SampleTitlesStyledTheme演示使用了CustomTitlePageIndicator样式，它定义了一个selectedColor项目。所以（也许有点天真），我想添加。

<item name="selectedColor">#FF000000</item>

我希望能够使用CustomTabPageIndicator样式，来匹配SampleTabsStyled演示所使用的样式，但是很遗憾，这并没有起作用。

问题似乎很明显，但是我还是要问一下：有没有一种方法（使用当前的样式xml），让SampleTabsStyled演示中选定的选项卡文本与其他选项卡的颜色不同？如果有，怎么做呢？

编辑

哦，顺便说一下，我是和ActionBarSherlock一起使用的，如果这很重要的话...

- Bart Kiers

Answer 1

假设您不介意创建额外的xml文件，首先尝试在您的CustomTabPageIndicator.Text（或CustomTabPageIndicator）中包含属性android:textColor，例如：

<style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
    <item name="android:textColor">@drawable/tab_text_color</item>
    ...
</style>

将tab_text_color.xml放在res/drawable文件夹下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:color="@color/text_tab_selected" />
    <item
        android:state_selected="false"
        android:color="@color/text_tab_unselected" />
</selector>

最后，在位于res/values文件夹中的颜色资源文件colors.xml（如果不存在，请创建一个）中定义两种颜色@color/text_tab_selected和@color/text_tab_unselected。例如：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="text_tab_selected">#FF000000</color>
    <color name="text_tab_unselected">#FF555555</color>
</resources>

- Neoh

---

我本来以为我尝试过类似的东西，但肯定是哪里搞错了。在 tab_text_color.xml 文件中，我只需要将 android:textColor 更改为 android:color，之后它就像魔法般地正常工作了。非常感谢 Neoh！ - Bart Kiers

是的，我已经编辑了答案以反映您实际提出的问题 :) - Neoh

我已经使用正确的值（即android:color）进行了编辑。当我使用android:textColor时，会抛出运行时异常，并且以下内容会显示在我的logcat中：“二进制XML文件第5行：<item>标记需要一个'android:color'属性。”我已经编辑了您的答案以包含正确的变体。 - Bart Kiers

Answer 2

试试这个

最简单的方法

<android.support.design.widget.TabLayout
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabTextColor="@color/White"
                app:tabSelectedTextColor="@color/Blue"
                app:tabIndicatorColor="@color/Yellow"
                app:tabMode="fixed"
                app:tabGravity="fill"/>

不要忘记添加这个依赖项

compile 'com.android.support:design:23.1.1'

- Pritish Joshi