2.3 定制个性化的action栏

http://developer.android.com/training/basics/actionbar/styling.html

 

故障记录：

2014/01/07          

1   Theme.Holo.Light.DarkActionBar要求API Level 14(Android 4.0)

2   原文中指定theme parent的时候可能存在笔误，如parent="@style/Theme.Holo.Light.DarkActionBar"，应为                           parent="@android:style/Theme.Holo.Light.DarkActionBar"

3   原文未提及background资源的创建（<item name="android:background">@drawable/actionbar_background</item>）

在res/drawable下面创建一个actionbar_background.png文件，用图片编辑器编辑即可

4   原文未提及color资源的创建（<item name="android:actionMenuTextColor">@color/actionbar_text</item>）

在\res\values\color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="actionbar_text">#FF0000</color>                  #FF0000为红色 
</resources>

 

绝大多数Android应用软件的action栏都倾向于保持风格一致，从而为用户提供熟悉和可以预测的操作，但是这并不意味着action栏就必须千篇一律地显示。为此，Android提供了样式和主题资源，用来帮助开发者轻松实现使action栏适应于自己品牌风格设计的期望。

Android提供一些内嵌的activity主题，内含“黑暗”或“明亮”的action栏样式，开发者也可以对这些主题进行扩展，进一步定制属于自己的antion栏的外观效果。

注意：如果开发者使用支撑库来实现action栏，则需要使用或者重写Theme.AppCompat族样式（与之相对应的，API level 11及更高版本使用的是Theme.Holo）。为此，开发者需要对样式资源进行两次声明：一次通过平台样式属性声明（android::属性），一次通过支撑库包含的样式属性声明（appcompat.R.attr属性——这些属性的上下文即应用软件），详见下面提供的例子。

使用android主题

android包含了两款基本的activity主题，用以提供不同颜色的action栏：

        Them.Holo 对应“黑暗”主题

        Them.Holo.Light 对应“明亮”主题

对manifest文件中的<application>元素或者单独的<activity>元素的android::theme属性进行设置，即可将不同的主题应用到整个应用软件或者指定的单个activity。

例如：

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

而主题Theme.Holo.Light.DarkActionBar 则使得action栏呈黑色，其余部分保持明亮主题。

如果使用支撑库，开发者则需要使用Theme.AppCompat主题：

       Theme.AppCompat 对应“黑暗”主题

       Theme.AppCompat.Light 对应“明亮”主题

       Theme.AppCompat.Light.DarkActionBar 对应带“黑暗”action栏的“明亮”主题

action栏上图标色彩应该与action栏颜色有一定对比度，action栏图标包提供了适合在“黑暗”主题和“明亮”主题上使用的标准action图标。

action栏背景定制

覆写actionBarStyle属性可以为activity创建一个定制主题，从而使action栏呈现不同的背景色。该属性指向一个background属性被覆写的样式，使得action栏背景被关联到一项可绘制资源。

如果应用软件使用了导航标签或者分隔action栏，类似的，可通过设置backgroundStacked属性和backgroundSplit属性来指定这些工具栏的背景色。

警示：为定制的主题或样式选择一个合适的父主题相当重要。如果一个定制主题没有指定父样式，而开发者又没有自行为其定义相关的样式属性，该主题将会丧失很多样式属性。

Android 3.0及以上版本

在Android 3.0及以上版本，使用如下代码定义action栏背景色：

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 及以上版本

如果使用的是支撑库，上例中的主题需要按如下方法定义：

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栏中的文字的颜色，开发者需要针对每个文字元素的属性分别进行覆写：

        action栏标题：创建一个定制样式，修改其textColor属性；将定制的actionBarStyle的titleTextStyle属性关联到这个新建的样式。

        注意：这个应用到titleTextStyle属性的定制样式必须以TextAppearance.Holo.Widget.ActionBar.Title为父样式。

        action栏标签：覆写activity主题的actionBarTabTextStyle属性

        action栏按钮：覆写activity主题的actionMenuTextColor属性

Android 3.0及以上版本

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

Android 2.1 及以上版本

如果使用的支撑库，样式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: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>

标签指示定制

 对activity主题的actionBarTabStyle属性进行覆写可以实现对导航标签指示器的修改，actionBarTabStyle属性需要指向一个样式资源，该样式资源的background属性被关联到某个状态依赖的可绘制资源。

注意：通过状态依赖的可绘制资源，Android系统才能将当前选中标签的背景色与其他标签背景区别显示，从而达到指示效果。 如何创建一个可以指示不同按钮状态的可绘制资源的详细信息，可参见状态列表。

例如，下面代码展示了一个状态依赖的可绘制资源，包含了可指示action栏标签多种不同选中状态的背景。

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文件类似如下代码：

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>

Android 2.1 及以上版本

如果使用的支撑库，样式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>

更多资料

        Action栏

        样式和主题

        Android action栏样式生成器