Android官方文档翻译 十 2.3Styling the Action Bar

Styling the Action Bar

设计菜单栏的样式

This lesson teaches you to

这节课教给你

1. Use an Android Theme

   使用一个Android主题

2. Customize the Background

   定义背景

3. Customize the Text Color

   定义文本颜色

4. Customize the Tab Indicator

   定义标签指示器

You should also read

你还应该读

• Styles and Themes

  样式和主题

• Android Action Bar Style Generator

  Android菜单栏样式生产

The action bar provides your users a familiar and predictable way to perform actions and navigate your app, but that doesn’t mean it needs to look exactly the same as it does in other apps. If you want to style the action bar to better fit your product brand, you can easily do so using Android’s style and theme resources.

菜单栏提供给你的用户一个熟悉可控的方式来执行动作以在你的应用程序中实现导航，但是这并不意味着它需要看起来和其它的应用程序完全相同。如果你想要设计菜单栏的样式以更好的适应你的产品品牌，你可以使用Android的样式和主题资源。

Android includes a few built-in activity themes that include “dark” or “light” action bar styles. You can also extend these themes to further customize the look for your action bar.

Android里有一些已经嵌入的activity主题，包括“dark”或者“light”菜单栏样式。你也可以在你的菜单栏中扩展这些主题然后定义它的外观。

Note: If you are using the Support Library APIs for the action bar, then you must use (or override) the Theme.AppCompat family of styles (rather than the Theme.Holo family, available in API level 11 and higher). In doing so, each style property that you declare must be declared twice: once using the platform’s style properties (the android: properties) and once using the style properties included in the Support Library (the appcompat.R.attr properties—the context for these properties is actually your app). See the examples below for details.

注意：如果你使用Support Library 的API提供的菜单栏，你必须使用（或者重写）Theme.AppCompat家族的样式（而不是在API 11以上可用的Theme.Holo 家族）。在这种情况下，你定义的每种样式属性必须被定义两次：一次使用平台的样式的资源（android: properties）,一次使用引入的Support Library中的样式属性（appcompat.R.attr 属性—-这些资源的上下文实际上是你的应用程序）。往下看例子获得更详细的内容。

Use an Android Theme

使用一个Android自带的主题

Android includes two baseline activity themes that dictate the color for the action bar:

Android包含两种基线activity主题指示了菜单栏的颜色：

• Theme.Holo for a “dark” theme.
• Theme.Holo.Light for a “light” theme.

You can apply these themes to your entire app or to individual activities by declaring them in your manifest file with the android:theme attribute for the element or individual elements.

你可以在你的全部应用程序或者个别的activities中使用这些主题：在你的manifest文件中对于元素或者个别的元素使用android:theme属性。

For example:

例如：

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

You can also use a dark action bar while the rest of the activity uses the light color scheme by declaring the Theme.Holo.Light.DarkActionBar theme.

在剩余的activity中你还可以通过定义Theme.Holo.Light.DarkActionBar主题来使用一个亮颜色的主题，但是菜单栏是暗黑色的。

When using the Support Library, you must instead use the Theme.AppCompat themes:

当使用Support Library时，你必须使用Theme.Appcompat 主题来代替：

• Theme.AppCompat for the “dark” theme.
• Theme.AppCompat.Light for the “light” theme.
• Theme.AppCompat.Light.DarkActionBar for the light theme with a dark action bar.

Be sure that you use action bar icons that properly contrast with the color of your action bar. To help you, the Action Bar Icon Pack includes standard action icons for use with both the Holo light and Holo dark action bar.

确保你使用的菜单栏图标能适当地和你的菜单栏的颜色形成对比。为了对你有帮助，菜单栏图标包里包含了一些标准的菜单图标，它们对于完全黑和完全亮的菜单栏都适用。（Android官网提供）

Customize the Background

定义背景

To change the action bar background, create a custom theme for your activity that overrides the actionBarStyle property. This property points to another style in which you can override the background property to specify a drawable resource for the action bar background.

为了改变菜单栏的背景，需要为你的activity创建一个自定义的主题来重写actionBarStyle的属性。这个属性指向另一个样式，这个样式可以通过指定一个drawable资源来重写菜单栏背景属性。

If your app uses navigation tabs or the split action bar, then you can also specify the background for these bars using the backgroundStacked and backgroundSplit properties, respectively.

如果你的应用程序使用导航标签或者分开的菜单栏，你也可以分别通过使用backgroundStacked和backgroundSplit属性来指定这些条目的背景。

Caution: It’s important that you declare an appropriate parent theme from which your custom theme and style inherit their styles. Without a parent style, your action bar will be without many style properties unless you explicitly declare them yourself.

注意：在自定义主题和样式时，声明一个恰当的父主题来继承它们的样式是很重要的。如果没有继承一个父样式，你的菜单栏将不能使用许多样式属性，除非你自己明确地声明了这些属性。

For Android 3.0 and higher only

对于仅仅支持Android 3.0及其以上

When supporting Android 3.0 and higher only, you can define the action bar’s background like this:

当仅仅支持Android 3.0及其以上时，你可以像这样定义菜单栏的背景：

res/values/themes.xml

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

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

Then apply your theme to your entire app or individual activities:

然后在你的全部app或者个别的activities中使用你的主题：

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

For Android 2.1 and higher

对于Android 2.1及其以上

When using the Support Library, the same theme as above must instead look like this:

当使用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>

Then apply your theme to your entire app or individual activities:

然后在你的全部app或者个别activities中使用你的主题：

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

Customize the Text Color

自定义文本颜色

To modify the color of text in the action bar, you need to override separate properties for each text element:

为了修改菜单栏中的文本的颜色，你需要重写对于每个文本元素的单个属性：

• Action bar title: Create a custom style that specifies the textColor property and specify that style for the titleTextStyle property in your custom actionBarStyle.

  菜单栏标题：创建一个自定义样式，指定textColor属性，在你的自定义actionBarStyle中把titleTextStyle属性指定成你定义的那个样式。

  Note: The custom style applied to titleTextStyle should use TextAppearance.Holo.Widget.ActionBar.Title as the parent style.

  注意：作用于titleTextStyle的自定义样式应该使用TextAppearance.Holo.Widget.ActionBar.Title作为它的父样式。

• Action bar tabs: Override actionBarTabTextStyle in your activity theme.

  菜单栏标签：在你的activity主题中重写actionBarTabTextStyle。

• Action buttons: Override actionMenuTextColor in your activity theme.

  动作按钮：在你的activity主题中重写actionMenuTextColor。

For Android 3.0 and higher only

对于仅仅支持Android 3.0及以上版本

When supporting Android 3.0 and higher only, your style XML file might look like this:

当仅仅支持Android 3.0及以上时，你的样式XML文件可能要像以下这样：

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

For Android 2.1 and higher

对于Android 2.1及以上版本

When using the Support Library, your style XML file might look like this:

当你使用Support Library时，你的样式XML文件看起来应该像下面这样：

res/values/themes.xml

Customize the Tab Indicator

自定义标签指示器

To change the indicator used for the navigation tabs, create an activity theme that overrides the actionBarTabStyle property. This property points to another style resource in which you override the background property that should specify a state-list drawable.

为了改变导航标签使用的指示器，创建一个activity主题重写actionBarTabStyle属性。这个属性指向另一个样式资源，这个资源应该通过定义一个drawable的状态表列来重写background属性。

Note: A state-list drawable is important so that the tab currently selected indicates its state with a background different than the other tabs. For more information about how to create a drawable resource that handles multiple button states, read the State List documentation.

注意：一个drawable的状态表列很重要，有了它，当前被选择的标签就能用一个区别于其它标签的不同背景来指示它的状态。关于如何创建一个drawable资源来处理不同的按钮状态的更多信息，请读State List 文档。

For example, here’s a state-list drawable that declares a specific background image for several different states of an action bar tab:

例如，以下是一份drawable的状态表列，对于一个菜单栏的几个不同状态，它都声明了一个明确的背景图片：

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>

For Android 3.0 and higher only

对于仅仅支持Android 3.0及以上

When supporting Android 3.0 and higher only, your style XML file might look like this:

当仅仅支持Android 3.0及以上时，你的样式XML文件要和下面相像：

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

For Android 2.1 and higher

对于支持Android 2.1及以上

When using the Support Library, your style XML file might look like this:

当使用Support Library时，你的样式XML文件应该和下面的相像：

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

More resources

更多资源

• See more style properties for the action bar are listed in the Action Bar guide.

  向导Action Bar里可以看菜单栏的更多样式属性。（Android官网里有）

• Learn more about how themes work in the Styles and Themes guide.

  在Styles and Themes向导中学习关于主题怎么工作的更多知识。（官网上）

• For even more complete styling for the action bar, tr 946 y the Android Action Bar Style Generator.

  为了更多的完成设计菜单栏的样式，跳转到Android Action Bar Style Generator。（官网上）

NEXT: OVERLAYING THE ACTION BAR

下一节： 重写菜单栏

这是我自己翻译的，如果您发现其中有重要错误，敬请指出。