ActionBar 更換背景、顏色、文字，自定義主題Style

關於 Android ActionBar，之前我已經跟大家分享了兩篇文章。今天我就再來爲Actionbar系列暫時結個尾，給大家分享一下如何更換actionbar的背景顏色，改變文字，以及自定義你想要的主題效果。

跟之前兩篇的規則一樣，我依然會使用V7包來實現Actionbar，涉及到到不同API的區別時，我會標註說明的。關於V7包的使用方法，還是詳見這篇博客Android彈無虛發之第一彈。

首先給大家截圖一張，展示一下今天要展示的四種情況。

首先，我們點擊 Dark 這個按鈕，看看Actionbar的樣式是如何的，效果如下圖：

如圖所示，背景黑色，字體爲白色。如何實現這個效果呢？只需要在AndroidManifest.xml文件中，對其對應的Activity進行如下設置（如何實現Actionbar的使用，請看Android彈無虛發之第一彈這篇博客）

<activity
    android:name="com.example.actionstyle.DarkActivity"
    android:label="Dark"
    android:theme="@style/Theme.AppCompat" >
</activity>

Theme.AppCompat 是V7包中自帶的一種style樣式，如果你要是使用API3.0以上的版本，可以直接使用SDK中自帶的holo風格，相同效果的設置如下：

android:theme="@android:style/Theme.Holo"

接下來，我們繼續點擊 Light 這個按鈕，看看 Actionbar的樣式如何，見圖如下：

樣式變爲了白色背景，黑色字體，這就是傳說中的 Holo.Light風格。activity的設置情況如下代碼：

<activity
    android:name="com.example.actionstyle.LightActivity"
    android:label="Light"
    android:theme="@style/Theme.AppCompat.Light" >
</activity>

如果你的app是API3.0以上的版本，那麼可以直接設置如下：

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

我們繼續點擊按鈕，這次我們點擊 DarkActionBar這個按鈕，看看效果如何：

效果變成了，整個頁面的風格是Holo.Light風格，但是Actionbar部分是dark風格的。

上面三種情況，就是使用系統自帶的三種的主題效果，直接調用即可，非常簡單。下面，我來給大家介紹一下更有意思的設定，就是自定義actionbar的主題效果，你想要怎樣便怎樣，一切由你做主哦。

首先我們點擊第一幅截圖當中的最後一個按鈕，Custom，讓我們來看看，我DIY的這套actionbar的主題效果如何，請看圖：

哈哈~ 是不是醜的無法入目啊。 不過這套幾乎沒有任何顏色搭配感的主題效果，卻是用到了幾個關鍵的知識點。下面我來給大家講一下如何DIY Actionbar的主題。

首先在項目工程中的values文件夾下，新建一個theme.xml的文件。然後在這個文件內，寫入以下xml代碼：

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarDivider">@null</item>
        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<!--         <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item> -->
        <item name="android:actionBarTabBarStyle">@style/MyActionBarTabBars</item>
        <item name="android:actionMenuTextColor">@android:color/holo_green_light</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="actionBarDivider">@null</item>
        <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
<!--         <item name="actionBarTabStyle">@style/MyActionBarTabs</item> -->
        <item name="actionBarTabBarStyle">@style/MyActionBarTabBars</item>
        <item name="actionMenuTextColor">@android:color/holo_green_light</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@android:color/holo_orange_light</item>
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
        <item name="android:backgroundStacked">@android:color/holo_green_dark</item>

        <!-- Support library compatibility -->
        <item name="background">@android:color/holo_purple</item>
        <item name="titleTextStyle">@style/MyActionBarTitleText</item>
        <item name="backgroundStacked">@android:color/holo_green_dark</item>
    </style>

    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@android:color/black</item>
    </style>

    <!-- ActionBar tabs text -->
    <style name="MyActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@android:color/holo_blue_bright</item>
    </style>

    <style name="MyActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_example</item>
    </style>

    <style name="MyActionBarTabBars" parent="@style/Widget.AppCompat.ActionBar.TabBar">

        <item name="android:showDividers">none</item>

    </style>

</resources>

然後在AndroidManifest.xml文件中，對相應的activitiy進行如下設置：

<activity
    android:name="com.example.actionstyle.CustomActivity"
    android:label="Custom"
    android:theme="@style/CustomActionBarTheme" >
</activity>

將我們自定義好的 CustomActionBarTheme 這個style 設置給該activity. 這樣，運行程序，就可以看到剛纔DIY的效果了。接下來，我給大家講解以下這個xml文件當中幾個關鍵知識點的應用。

首先我們可以看到，這套自定義主題的效果是，actionbar的背景爲橘黃色，導航TAB的背景色爲綠色。這個是如何實現呢？需要這兩段代碼的設置：

<item name="android:actionBarStyle">@style/MyActionBar</item>

<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
    <item name="android:background">@android:color/holo_orange_light</item>
    <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    <item name="android:backgroundStacked">@android:color/holo_green_dark</item>

    <!-- Support library compatibility -->
    <item name="background">@android:color/holo_purple</item>
    <item name="titleTextStyle">@style/MyActionBarTitleText</item>
    <item name="backgroundStacked">@android:color/holo_green_dark</item>
</style>

我們將 actionBarStyle的屬性設置爲自定義的MyActionBar，而自定義的MyActionBar，需要設置它的繼承樣式，parent="@style/Widget.AppCompat.ActionBar"，接下來有六個item的設置選項，其中最後三項和前三項的目的是一樣的，只不過是爲了兼容低版本而進行的設置。

android:background 設置的是actionbar的背景色，android:backgroundStacked設置的是導航TAB的背景顏色，android:titleTextStyle設置的是actionbar 標題的字體樣式，我們將這個字體樣式設置爲自定義的MyActionBarTitleText，在這個樣式當中，我們將標題的顏色設置爲黑色<item name="android:textColor">@android:color/black</item>。

接下來，我們繼續觀察，在這個自定義的效果當中，actionbar的item的字體顏色爲綠色，而導航TAB的字體顏色爲藍色。這樣的實現效果是這麼設置的：

<item name="android:actionMenuTextColor">@android:color/holo_green_light</item>

<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>

android:actionMenuTextColor 設置的是每個actionbar  item的字體顏色，我們將其設爲綠色。 android:actionBarTabTextStyles 設置的是導航TAB的字體樣式，我們將其設爲自定義的style MyActionBarTabText ，在這個自定義的style當中，我們設置導航TAB的字體顏色爲藍色：

<style name="MyActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText">
    <item name="android:textColor">@android:color/holo_blue_bright</item>
</style>

這樣一來，我們就把自定義字體顏色部分講完了。我們繼續觀察，在這個自定義的主題效果當中，我們會發現，actionbar 的item之間沒有分割線divider，導航TAB之間，也沒有分割線divider，要實現這樣的效果，其實也很簡單，

首先我們設置<item name="android:actionBarDivider">@null</item> 將actionbar的分割線的圖品引用設爲空，這樣一來，actionbart的item之間便不會顯示分割線了。然後我們再設置<item name="android:actionBarTabBarStyle">@style/MyActionBarTabBars</item>  在這個自定義的MyActionBarTabBars的style當中，我們如下設置：

<style name="MyActionBarTabBars" parent="@style/Widget.AppCompat.ActionBar.TabBar">

    <item name="android:showDividers">none</item>

</style>

將TAB之間的分割線設爲不再顯示，這樣，導航TAB之間也不會再有分割線了。

可能有些童鞋在開發當中，希望能夠改變導航TAB下面遊標的顏色，不願使用默認的藍色，比如像下面截圖所示：

如圖所示，我將導航TAB的遊標顏色，由默認的藍色，變成了紫色，是不是挺好玩的。那麼這該怎麼玩呢？嘿嘿，代碼來嘍：

剛剛我們在講如何設置TAB背景的時候，我們用到了這個設置：<item name="android:backgroundStacked">@android:color/holo_green_dark</item>，現在我們需要把這段設置給屏蔽掉，然後在剛纔的xml代碼中設置設個屬性：        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>，然後在 MyActionBarTabs這個自定義的style當中，做如下設置：

<style name="MyActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:background">@drawable/tab_indicator_ab_example</item>
</style>

這樣的話，我們就可以替換掉默認的藍色遊標，改爲我們自己想要的顏色了。至於這個背景圖片應該怎麼弄，我一般都是用9patch工具，設計幾張不同狀態的圖片。下面的截圖是我設計的圖片，截圖太小，可能看不清楚，大家明白大概意思就行了，回頭自己隨意DIY即可：

以上就是關於DIY Actionbar主題的幾個關鍵知識點，大家看完後，有沒有想立刻DIY的衝動呢！

另外上面的xml設置，都是針對V7包的使用者，如果你的開發版本，是API3.0以上的用戶，那麼你還需要對上面的設置稍作修改，舉個例子：

<style name="MyActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:background">@drawable/tab_indicator_ab_example</item>
</style>

在這段代碼中，我們設置 parent的繼承是 Widget,AppCompat.ActionBar.TabView，如果你是API3.0以上的開發版本，你需要改爲：Widget.Holo.ActionBar.TabView，沒錯，想必你也看出來了，就是把AppCompat這個包名改爲系統自帶的Holo包名即可，其他的xml配置的修改情況，和這個類似，大家一一對比修改即可。

最後的最後，我再給大家介紹一個神級的網站：Android Action Bar Style Generator，我給大家看一下這個網站的神奇：

在這個網站的頁面的右側，是一個關於ActionBar的初始頁面，而我們可以通過頁面左側的各種控制按鈕，隨意更換右側的頁面資源效果，不用你親自調試XML文件，就可以DIY出來一套你想要的ActionBar主題。下面這幅截圖是我隨意DIY出來的：

當你在網頁的左側配置好你想要的效果之後，你就可以在網頁的下面，有一個下載按鈕，點擊之後可以得到這套主題的所有XML配置文件和所用到的圖片資源，不再需要你去設計了。是不是很神奇啊。附圖兩張：

這個網站美中不足的地方在於，不能夠在頁面的左側修改Actionbar的字體顏色和大小，不過更改字體的知識點，我已經在這篇博客中給大家講過了，如果大家有這方面的需求，那麼就在這個網站生成的XML的基礎上，再稍作修改就可以了。

好了，今天的內容就到此結束了。關於ActionBar系列，我已經連續分享了三篇，對於一般要求的開發，我想應該是可以應付了，所以這部分內容的講解，我打算先暫時告一段落了。如果還有其它方面的要求和問題，大家可以給我留言，我們一起再來探討解決。最後還是老樣子，我把今天講解的代碼以及剛剛在那個網站上自動生成的資源文件，都統統上傳到CSDN上面，分享給大家，希望大家能夠多多支持，嘿嘿～

代碼以及資源下載地址：http://download.csdn.net/detail/pringlee2011/6912359