android actionbar這個導航欄，相信大家愛已經不陌生了。自從android 3.0以上就有了這個導航欄功能。在郭大神部落格有詳細介紹actionbar功能。附上鍊接我在這裡主要介紹android actionbar 網頁線上生成style以及後面的修改style。ActionBar生成器：Android Action Bar Style Generator。真的非常好用。

1、先看看網站的幾張截圖

看完這幾張截圖你就知道這個是幹嘛的了。

生成資源圖片以及drawable以及style。

2、看看我下載的示例資源

分別拷到專案中的相應的資料夾下，然後新增使用就行

在androidmanifest中android：theme設定成這個就行了。

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Test" >

6、原始的style檔案設定

<?xml version="1.0" encoding="utf-8"?>
<!-- File created by the Android Action Bar Style Generator

     Copyright (C) 2011 The Android Open Source Project
     Copyright (C) 2012 readyState Software Ltd

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<resources>

    <style name="Theme.Test" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarItemBackground">@drawable/selectable_background_test</item>
        <item name="android:popupMenuStyle">@style/PopupMenu.Test</item>
        <item name="android:dropDownListViewStyle">@style/DropDownListView.Test</item>
        <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Test</item>
        <item name="android:actionDropDownStyle">@style/DropDownNav.Test</item>
        <item name="android:actionBarStyle">@style/ActionBar.Transparent.Test</item>
        <item name="android:actionModeBackground">@drawable/cab_background_top_test</item>
        <item name="android:actionModeSplitBackground">@drawable/cab_background_bottom_test</item>
        <item name="android:actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Test</item>
        
        
    </style>

    <style name="ActionBar.Solid.Test" parent="@android:style/Widget.Holo.Light.ActionBar.Solid">
        <item name="android:background">@drawable/ab_solid_test</item>
        <item name="android:backgroundStacked">@drawable/ab_stacked_solid_test</item>
        <item name="android:backgroundSplit">@drawable/ab_bottom_solid_test</item>
        <item name="android:progressBarStyle">@style/ProgressBar.Test</item>
    </style>

    <style name="ActionBar.Transparent.Test" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@drawable/ab_transparent_test</item>
        <item name="android:progressBarStyle">@style/ProgressBar.Test</item>
    </style>

    <style name="PopupMenu.Test" parent="@android:style/Widget.Holo.Light.ListPopupWindow">
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_test</item>	
    </style>

    <style name="DropDownListView.Test" parent="@android:style/Widget.Holo.Light.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_test</item>
    </style>

    <style name="ActionBarTabStyle.Test" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_test</item>
    </style>

    <style name="DropDownNav.Test" parent="@android:style/Widget.Holo.Light.Spinner">
        <item name="android:background">@drawable/spinner_background_ab_test</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_test</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_test</item>
    </style>
    
    <style name="ProgressBar.Test" parent="@android:style/Widget.Holo.Light.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_test</item>
    </style>
    
    <style name="ActionButton.CloseMode.Test" parent="@android:style/Widget.Holo.Light.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_test</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Test.Widget" parent="@android:style/Theme.Holo">
        <item name="android:popupMenuStyle">@style/PopupMenu.Test</item>
        <item name="android:dropDownListViewStyle">@style/DropDownListView.Test</item>
    </style>

</resources>
 

7、執行效果如下

橫屏效果

那麼現在看到的是標題欄的背景還是有點不對勁。那麼就手動改改配置。

8、稍微修改了一下配置，如下

加了一些註釋，以及一些效果，我放在哪裡註釋掉了，你們都可以試著配置一下。

<?xml version="1.0" encoding="utf-8"?>
<!-- File created by the Android Action Bar Style Generator

     Copyright (C) 2011 The Android Open Source Project
     Copyright (C) 2012 readyState Software Ltd

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<resources>

    <style name="Theme.Test" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarItemBackground">@drawable/selectable_background_test</item>
        <item name="android:popupMenuStyle">@style/PopupMenu.Test</item>
        <item name="android:dropDownListViewStyle">@style/DropDownListView.Test</item>
        <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Test</item>
        <item name="android:actionDropDownStyle">@style/DropDownNav.Test</item>
        <item name="android:actionBarStyle">@style/ActionBar.Transparent.Test</item>  <!-- actionbar 背景 -->
        <item name="android:actionModeBackground">@drawable/cab_background_top_test</item>
        <item name="android:actionModeSplitBackground">@drawable/cab_background_bottom_test</item>
        <item name="android:actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Test</item>
        
        <!-- 設定返回的圖示 -->
		<!--<item name="android:homeAsUpIndicator">@drawable/ic_home_up_indicator</item>-->
		<!-- 所有Activity的背景顏色 -->
		<!--<item name="android:windowBackground">@drawable/activity_bk</item>-->
		<!-- 對話方塊樣式 -->
		<!--<item name="android:alertDialogStyle">@style/AlertDialog_Originaltheme</item>-->
    </style>
    
    <style name="ActionBar.Solid.Test" parent="@android:style/Widget.Holo.Light.ActionBar.Solid">
        <item name="android:background">@drawable/ab_solid_test</item>
        <item name="android:backgroundStacked">@drawable/ab_stacked_solid_test</item>
        <item name="android:backgroundSplit">@drawable/ab_bottom_solid_test</item>
        <item name="android:progressBarStyle">@style/ProgressBar.Test</item>
    </style>

     <!-- actionbar 背景 -->
    <style name="ActionBar.Transparent.Test" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@drawable/ab_solid_test</item>
        <item name="android:progressBarStyle">@style/ProgressBar.Test</item>
          <!-- ActionBar標題顏色 -->
         <!--<item name="android:titleTextStyle">@style/ActionBar.TitleTextStyle.Originaltheme</item>-->
    </style>

    <style name="PopupMenu.Test" parent="@android:style/Widget.Holo.Light.ListPopupWindow">
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_test</item>	
    </style>

    <style name="DropDownListView.Test" parent="@android:style/Widget.Holo.Light.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_test</item>
    </style>

    <style name="ActionBarTabStyle.Test" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_test</item>
    </style>

    <style name="DropDownNav.Test" parent="@android:style/Widget.Holo.Light.Spinner">
        <item name="android:background">@drawable/spinner_background_ab_test</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_test</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_test</item>
    </style>
    
    <style name="ProgressBar.Test" parent="@android:style/Widget.Holo.Light.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_test</item>
    </style>
    
    <style name="ActionButton.CloseMode.Test" parent="@android:style/Widget.Holo.Light.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_test</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Test.Widget" parent="@android:style/Theme.Holo">
        <item name="android:popupMenuStyle">@style/PopupMenu.Test</item>
        <item name="android:dropDownListViewStyle">@style/DropDownListView.Test</item>
    </style>

</resources>
 

標題欄的顏色是有所改變了，標題欄的字型顏色也是可以設定的，還有返回圖示之類的。

本文測試是基於我以前寫的一篇部落格

9、附上一個values-v14資料夾說明

values-v11代表在API 11+的裝置上，用該目錄下的styles.xml代替res/values/styles.xml
values-v14代表在API 14+的裝置上，用該目錄下的styles.xml代替res/values/styles.xml
其中API 11+代表android 3.0 +
其中API 14+代表android 4.0 +

本文部落格測試demo：點選

在下一篇部落格中我再講一下actionbar另外一些內容，以及我在專案中使用總結。