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


今天給大家分享一下如何更換actionbar的背景顏色,改變文字,以及自定義你想要的主題效果。

 

跟之前兩篇的規則一樣,我依然會使用V7包來實現Actionbar,涉及到到不同API的區別時,我會標注說明的。

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

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

如圖所示,背景黑色,字體為白色。如何實現這個效果呢?只需要在AndroidManifest.xml文件中,對其對應的Activity進行如下設置

<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 tab 案例與源碼:

github源碼下載:

https://github.com/hongchuanfeng/AndroidThemeDemo

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM