如何更改ActionBar导航选项卡的颜色？

Question

我在一个应用程序中有一个ActionBar，其中嵌入了导航选项卡（不是TabHost！）。 默认情况下，选项卡显示为深灰色，所有选项卡下方有一条蓝色细线，并且所选选项卡上有一个蓝色标记。

我需要覆盖哪些样式来更改这些颜色？

- Ollie C

Answer 1

我没有改变选项卡本身，但我认为您可以使用styles.xml中的这些样式来实现它...

 <style name="Widget.Holo.TabWidget" parent="Widget.TabWidget">
        <item name="android:tabStripLeft">@null</item>
        <item name="android:tabStripRight">@null</item>
        <item name="android:tabStripEnabled">false</item>
        <item name="android:divider">?android:attr/dividerVertical</item>
        <item name="android:showDividers">middle</item>
        <item name="android:dividerPadding">8dip</item>
        <item name="android:measureWithLargestChild">true</item>
        <item name="android:tabLayout">@android:layout/tab_indicator_holo</item>
    </style>

使用 tab_indicator_holo.xml

  <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

        <!-- Pressed -->
        <!--    Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

        <!--    Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_focused_holo" />
    </selector>

或者你也可以尝试

   <style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView">
            <item name="android:background">@drawable/tab_indicator_ab_holo</item>
            <item name="android:paddingLeft">16dip</item>
            <item name="android:paddingRight">16dip</item>
        </style>

和 tab_indicator_ab_holo.xml

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@color/transparent" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/list_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

        <!-- Pressed -->
        <!--    Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/list_pressed_holo_dark" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

        <!--    Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
    </selector>

最后使用两个png-9绘图：tab_selected_holo和tab_unselected_holo。它们看起来像你所说的那两条粗线和细线。

或者你是指微型选项卡？

 <style name="Widget.ActionBar.TabView" parent="Widget">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/minitab_lt</item>
        <item name="android:paddingLeft">4dip</item>
        <item name="android:paddingRight">4dip</item>
    </style>

在 minitab_lt.xml 中使用 with 关键字

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_selected="true"
          android:drawable="@drawable/minitab_lt_press" />
    <item android:state_selected="true"
          android:drawable="@drawable/minitab_lt_selected" />
    <item android:state_pressed="true"
          android:drawable="@drawable/minitab_lt_unselected_press" />
    <item android:drawable="@drawable/minitab_lt_unselected" />
</selector>

如果您需要另一个定义，请在此处搜索TabWidget：https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml。然后像往常一样定义您自己的风格，包括所有所需的属性和可绘制项...

- user387184

---

我在那里看不到任何设置背景颜色、底部线条或选定标记的选项... - Ollie C

看看你是否指的是TabViews的小标签。它们看起来像你所提到的。我已经相应地编辑了我的答案... - user387184

你所提到的“minitab”是什么？我指的是这些选项卡 http://developer.android.com/images/ui/actionbar.png - Ollie C

我会尽力完成您的翻译要求。以下是需要翻译的内容：说实话，我觉得你的回答很难读懂。我用了这篇博客文章代替，它更清晰易懂：http://android-developers.blogspot.com/2011/04/customizing-action-bar.html。 - Ollie C

感谢您的反馈，这非常有趣，因为在您的参考资料中，他们使用的是ad_tab_selected_holo而不是我参考资料中的tab_selected_pressed_holo。实际上，我在我的文件系统中找不到您引用的样式，也没有drawable ad_tab_selected_holo。我想知道这意味着什么，以及如何首先找到它？希望它能起作用！您只是使用了Light样式还是实际上也更改了drawable？ - user387184

Answer 2

如果您想轻松自定义选项卡栏，您可以使用这个很棒的工具： http://jgilfelt.github.io/android-actionbarstylegenerator。您只需选择所需颜色，它就会自动生成样式XML、PNG等文件。

- Arnaud