注:本文翻译自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

