注:本文翻譯自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
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元

