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