选项卡的背景颜色

时间:2014-08-16 17:43:55

标签: android android-tabs

我正尝试借助以下链接为操作栏的标签添加颜色 - https://github.com/thecodepath/android_guides/wiki/ActionBar-Tabs-with-Fragments

我在style.xml中添加了以下语句 -

<style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabStyle">@style/MyTheme.ActionBar.TabView</item>

    </style>
  <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:background">#12ABEE</item>
        <item name="android:actionMenuTextColor">#ffffff</item>
        <item name="android:titleTextStyle">@style/myTheme.ActionBar.Text</item>
    </style>

    <style name="myTheme.ActionBar.Text" parent="@android:style/TextAppearance">
        <item name="android:textColor">#ffffff</item>
        <item name="android:textStyle">bold</item>
        <item name="android:gravity">center</item>
    </style>
 <style name="MyTheme.ActionBar.TabView" parent="android:style/Widget.Holo.ActionBar.TabView">
        <item name="android:background">@drawable/tab_bar_background</item>
    </style>

我还在drawable中创建了tab_bar_background.xml -

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- UNSELECTED TAB STATE -->
    <item android:state_selected="false" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Bottom indicator color for the UNSELECTED tab state -->
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="#65acee" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <!-- SELECTED TAB STATE -->
    <item android:state_selected="true" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Tab background color for the SELECTED tab state -->
            <item>
                <shape>
                    <solid android:color="#cef9ff"/>
                </shape>
            </item>
            <!-- Bottom indicator color for the SELECTED tab state -->
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="#5beea6" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

通过这些步骤,它应该在选定的蓝色底线和未选中的正常背景上显示带有浅蓝色背景(#cef9ff)和绿色底线(#5beea6)的选项卡。但不幸的是,在运行时我看到底线出现很好,但选项卡的背景颜色对于选定和未选择的选项卡都显示为黑色。我无法弄清楚出了什么问题..

1 个答案:

答案 0 :(得分:1)

将tab_bar_background.xml更新为此解决了我的问题

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- UNSELECTED TAB STATE -->
        <item android:state_selected="false" android:state_pressed="false">
            <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
                <!-- Bottom indicator color for the UNSELECTED tab state -->
                <item >
                    <shape >
                        <stroke android:color="#e8e8e8"  android:width="25dp" />
                    </shape>
                </item>
            </layer-list>
        </item>
        <!-- SELECTED TAB STATE -->
        <item android:state_selected="true" android:state_pressed="false">
            <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
                <!-- Tab background color for the SELECTED tab state -->

                <!-- Bottom indicator color for the SELECTED tab state -->
                <item>
                    <shape >
                        <stroke android:color="#ffd866"   android:width="25dp"/>
                    </shape>
                </item>
            </layer-list>
        </item>
    </selector>