Fork me on GitHub

【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的颜色:

你既可以通过在清单文件的<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系列的主题:

请务必记得,你使用的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,之后你也可以分别通过使用backgroundStackedbackgroundSplit这两个属性字段为这些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)。

对于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

posted @ 2013-11-27 15:30  __Neo  阅读(1663)  评论(0编辑  收藏  举报