【Android介面實現】Styling the Action Bar，androidstyling

【Android介面實現】Styling the Action Bar，androidstyling

    轉載請註明出處：http://blog.csdn.net/zhaokaiqiang1992

    本篇文章翻譯自Android開發人員網站，但並不是完全按照原意翻譯，添加了我個人的一些理解。想看原文的請戳：http://developer.android.com/training/basics/actionbar/styling.html

    ActionBar控制項，可以為我們的App提供一致的導航體驗，使用者使用起來更加的方便和熟悉，降低使用者的學習成本，但是這並不意味著我們要和其他的App使用完全一樣的ActionBar，我們想讓使用者眼前一新，那麼我們可以使用style和theme的資源來自訂我們的ActionBar。

   Android內部提供了一些Activity主題，這些主題中就包含了"dark"和"light"不同的ActionBar樣式。我們可以通過繼承這些已有的主題，來實現自訂ActionBar外觀的效果。

   需要注意的是，如果我們想使用Support類庫中的關於ActionBar的API，那麼我們必須使用或者是重寫Theme.AppCompat這一個系列的style資源，而不是使用Theme.Holo系列的主題(API11及以上的版本)。如果我們真的這樣做的話，那麼我們必須每個樣式的屬性都要聲明兩次：一次是在平台的樣式屬性裡面(指android:properties)，另外一次是在使用了Support庫的樣式的屬性。

   

    Android中包含了兩種基本的Activity的樣式，這兩種樣式主要通過主題的顏色來進行區分。

    Theme.Holo 是黑色主題，Theme.Holo.Light 是白色主題。

    我們可以通過設定<application>或者是<activity>標籤的theme屬性來樹枝我們想要的佈景主題效果。

    比如象下面這樣：

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

    如果我們想要黑色的ActionBar和白色的Activity背景，那麼我們只需要設定theme為Theme.Holo.Light.DarkActionBar就可以了。

    如果你是用的是支援庫的話，那麼你必須使用Theme.AppCompat系列來代替上面的這些：

    Theme.Appconpat代表黑色主題，Theme.Appcompat代表白色主題，Theme.Appcompat.Light.DarkActionBar表示黑白混合的主題。

    確保你要使用的ActionBar的表徵圖顏色和佈景主題色彩搭配，為瞭解決這個問題，你可以訪問http://developer.android.com/design/downloads/index.html#action-bar-icon-pack 下載整套的表徵圖檔案。

    

    自訂背景顏色

    如果我們想要自訂ActionBar背景顏色，那麼我們必須為Activity建立一個theme來重寫actionBarStyle屬性，這個屬性指向另外一個style，在這個style裡面，我們可以重寫background屬性，為我們的ActionBar設定一個特殊的drawable資源。

    如果我們的app使用了navigation或者是split action bar ，那麼我們也可以重寫backgroundStacked和backgroundSplit屬性來為他們指定一個特殊的背景資源或者是顏色。

    注意，繼承自一個已有的Theme父主題是非常重要的，否則的話，我們就必須在自訂的theme裡面聲明很多的屬性，這非常累，並且效果不好。

    

    只相容3.0及以上

    如果我們的app只相容3.0及以上的版本，那麼，我們就可以象下面來自訂一個背景：

<?xml version="1.0" encoding="utf-8"?><resources>    <!-- the theme applied to the application or activity -->    <style name="CustomActionBarTheme"           parent="@android:style/Theme.Holo.Light.DarkActionBar">        <item name="android:actionBarStyle">@style/MyActionBar</item>    </style>    <!-- ActionBar styles -->    <style name="MyActionBar"           parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">        <item name="android:background">@drawable/actionbar_background</item>    </style></resources>

    使用的時候，象下面這樣就可以了：

<application android:theme="@style/CustomActionBarTheme" ... />

    相容2.1版本以上

    當我們使用相容庫的時候，我們必須想下面這樣進行聲明和使用：

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

    在使用上和上面的一樣：

<application android:theme="@style/CustomActionBarTheme" ... />

    自訂字型顏色

    如果我們需要改變ActionBar的字型的顏色，那麼我們必須要重寫每一個位置的字型的屬性：

    (1)ActionBar的字型：建立一個自訂的style，設定textColor屬性，然後將這個style設定為自訂的ActionBar的style的titleTextStyle屬性，然後將ActionBar的style設定給自訂的theme即可。這樣說起來很抽象，看下面的例子就好明白了。

    注意，如果我們想設定titleTextStyle屬性，那麼我們使用TextAppearance.Holo.Widget.ActionBar.Title作為父類style

    (2)ActionBar Tabs：重寫actionBarTabTextStyle

    (3)Action Buttons：重寫actionMenuTextColor

    相容3.0及以上版本

    如果我們要相容3.0以以上的版本，我們的style檔案應該象下面這樣定義：

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

    相容2.1及以上版本

    如果我們要使用相容庫，那麼我們可以象下面這樣定義：

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

    自訂Tab指標    

    如果我們想改變導航Tab的指標的顏色，我們需要自訂一個activity的theme，然後重寫actionBarTabStyle屬性。這個屬性指向另外一個重寫了backgroung屬性的資源檔，這個檔案是一個狀態列表的形式，也就是說，在不同的狀態下，顯示的是不一樣的背景。

    比如說，下面就是一個狀態列表形式的檔案，它可以控制tab的指標在不同的狀態下顯示不同的圖片背景。

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

    如果要相容3.0以上的版本，那麼可以用下面的這樣的寫法。

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

    如果要使用相容庫，那麼我們需要用下面這樣寫。

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

    如果要獲得更多的關於ActionBar的樣式資源，可以訪問這個網站http://jgilfelt.github.io/android-actionbarstylegenerator/