使用ViewPagerIndicator为选定选项卡的文本指定不同的颜色

时间:2013-05-15 19:15:59

标签: android actionbarsherlock viewpagerindicator

我试图让SampleTabsStyled demo中的ViewPagerIndicator更改当前所选标签文字的颜色,但没有成功。

但是,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>

SampleTabsStyled演示使用的样式CustomTabPageIndicator,但是,唉,这不起作用。

问题似乎很明显,但无论如何我会问:是否有办法(使用现有的样式xml)让SampleTabsStyled演示中当前所选文本的颜色与另一个不同标签?如果是这样,怎么样?

修改

哦,我正在将它与ActionBarSherlock结合使用,以防重要......

2 个答案:

答案 0 :(得分:43)

假设您不介意创建额外的xml,请首先尝试在android:textColor(或CustomTabPageIndicator.Text)中包含属性CustomTabPageIndicator,如下所示:

<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文件夹中的颜色资源文件@color/text_tab_selected中定义两种颜色@color/text_tab_unselectedcolors.xml(如果它尚不存在,则创建一个颜色)。例如:

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

答案 1 :(得分:15)

  

试试这个

     

最简单的方式

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