【Android Developers Training】 8. 定义Action Bar风格

注：本文翻译自Google官方的Android Developers Training文档，译者技术一般，由于喜爱安卓而产生了翻译的念头，纯属个人兴趣爱好。

原文链接：http://developer.android.com/training/basics/actionbar/styling.html

---

Action Bar能够向你的用户提供易掌握的操作方法，同时也能帮助用户导航，但这不代表所有应用的Action都长一个模样。如果你希望将你的Action Bar风格进行自定义来使它符合你应用的整体风格，你可以通过使用安卓的风格和主题资源（style and theme）来实现这一设想。

Android包含一些内置的Activity主题，包括“暗（dark）”和“亮（light）”的Action Bar风格。你也可以将这些主题做进一步地定制化。

Note：

如果你使用的是“Support Library” APIs所提供的Action Bar，那么你必须使用（或者说覆写）Theme.AppCompat这一系列中的风格（而不是在API Level 11或以上中的Theme.Holo系列）。因此，每个你声明的风格属性必须被声明两次：一次用于平台风格的声明（“android:”属性）还有一次用来声明“Support Library”所包含的风格的属性（“appcompat.R.attr”属性，这些属性的Context一般就是你的App）。可以接下去看例子来理解。

 

 一）. 使用一个Android主题

Android包括两个基本的activity主题，它们决定了Action Bar的颜色：

• Theme.Holo对应于“暗色”主题

• Theme.Holo.Light对应于“亮色”主题

你既可以通过在清单文件的<application>标签中对android:theme属性标签进行声明，来将这些主题应用到你的整个应用当中，也可以在清单文件的单个<activity>标签中对android:theme属性标签进行声明，来将主题应用到单个activity中。例如：

<application android:theme="@android:style/Theme.Holo.Light" ... />

你也可以仅让Action Bar为暗色，并把activity的剩余部分设置为亮色主题，这可以通过声明Theme.Holo.Light.DarkActionBar这一主题来实现。

当你使用的是Support Library时，你必须使用Theme.AppCompat系列的主题：

• Theme.AppCompat对应于“暗色”主题
• Theme.AppCompat.Light对应于“亮色”主题
• Theme.AppCompat.Light.DarkActionBar对应于拥有“暗色”Action Bar的“亮色”主题

请务必记得，你使用的action bar上的图标要和你的action bar的背景色拥有反差。在Action Bar Icon Pack包含了适配于“Holo light”和“Holo dark”这两个系列主题的Action Bar的配套图标。

 

二）. 自定义背景色

为了改变Action Bar的背景色，你可以为你的activity创建一个自定义的主题，这可以通过覆写actionBarStyle这一属性。这一属性指向另一个style文件，在其中你可以覆写background属性，来为action bar特定一个图像资源作为其背景。如果你的应用使用navigation tabs或者split action bar，之后你也可以分别通过使用backgroundStacked和backgroundSplit这两个属性字段为这些action bar指定背景。

Caution:

注意，你最好是为你自定义的主题和风格声明一个父主题，使得你的自定义的主题可以继承父主题的风格。如果没有一个父主题的风格，那么你自定义的Action Bar会缺少很多风格属性，除非你显示地声明了他们。

对于Android 3.0或更高版本的系统

当只支持Android 3.0或更高系统版本，你可以这样声明你的Action Bar背景：

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>
    </style>
</resources>

之后将你的主题应用到你的整个系统或单个activity中

<application android:theme="@style/CustomActionBarTheme" ... />

对于Android 2.1或更高版本的系统

如果使用“Support Library”，像上述中的那个主题应该这样声明：

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>

        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_background</item>
    </style>
</resources>

之后将你的主题应用到你的整个系统或单个activity中

<application android:theme="@style/CustomActionBarTheme" ... />

 

三）. 自定义字体颜色

要修改Action Bar中的字体颜色，你需要分别为每个文本标签覆写响应的属性：

• Action Bar标题：创建一个指定了“textColor”属性，并且在你的自定义的actionBarStyle中为titleTextStyle属性指定了风格。

Note:

应用在titleTextStyle上的自定义风格必须使用TextAppearance.Holo.Widget.ActionBar.Title作为父风格（parent style）。

• Action Bar标签：在你的activity主题中，覆写actionBarTabTextStyle。
• 操作按钮：在你的activity主题中，覆写actionMenuTextColor。

对于Android 3.0或更高版本的系统

当只支持Android 3.0或更高系统版本，你的风格XML文件看上去应该像是这样：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="android:actionMenuTextColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style>

    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar tabs text styles -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>
</resources>

对于Android 2.1或更高版本的系统

如果使用了“Support Library”，你的风格XML文件看上去应该像是这样：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="android:actionMenuTextColor">@color/actionbar_text</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="actionMenuTextColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

        <!-- Support library compatibility -->
        <item name="titleTextStyle">@style/MyActionBarTitleText</item>
    </style>

    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>

    <!-- ActionBar tabs text -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>
</resources>

 

四）. 自定义标签栏

为了改变navigation tabs上使用的指引，创建一个覆写actionBarTabStyle属性的activity主题。这个属性指向另一个风格资源，在其中你覆写background属性，在这里指定一个图像文件的状态列表。

Note:

一个图像文件的状态列表是很重要的，因为通过背景的不同可以表示出当前那个标签指引是被选中的。可以通过阅读State List来学习更多的关于如何创建图像资源来多按钮状态的问题。

例如：这里是一个图像文件的状态列表，它为一个Action Bar标签的每一个不同状态声明一个特定的背景图片：

res/drawable/actionbar_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

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

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"
          android:state_pressed="false"
          android:drawable="@drawable/tab_unselected_focused" />
    <item android:state_focused="true" android:state_selected="true"
          android:state_pressed="false"
          android:drawable="@drawable/tab_selected_focused" />


<!-- STATES WHEN BUTTON IS PRESSED -->

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

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"
          android:state_pressed="true"
          android:drawable="@drawable/tab_unselected_pressed" />
    <item android:state_focused="true" android:state_selected="true"
          android:state_pressed="true"
          android:drawable="@drawable/tab_selected_pressed" />
</selector>

对于Android 3.0或更高版本的系统

当只支持Android 3.0或更高系统版本，你的风格XML文件看上去应该像是这样：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
           parent="@style/Widget.Holo.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>

对于Android 2.1或更高版本的系统

如果使用了“Support Library”，你的风格XML文件看上去应该像是这样：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>

        <!-- Support library compatibility -->
        <item name="actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
           parent="@style/Widget.AppCompat.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>

        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>

 

更多资源：

更多Action Bar的风格属性：Action Bar

更多主题方面的知识：Styles and Themes

*更多完整的Action Bar风格：Android Action Bar Style Generator