ActionBar樣式詳解

gmyf7157 8年前發布 | 9K 次閱讀 Android開發移動開發

Android的裝飾風格有多種，這些風格的不同之處主要體現在標題欄區域。比如最普通的標題欄僅有圖標和標題。還有一些其他的風格，如帶進度條的標題欄等。

在Android4.0上，有了新的標題欄，名為ActionBar，它提供了能強大的功能，如支持TAB頁，支持菜單等。下面將分析主要的ActionBar樣式。不得不說對于初學者來說，actionbar還是過于復雜了。

一，ActionBar樣式定義

Theme主題對ActionBar樣式的定義如下：

<!-- Action bar styles -->
        <item name="actionDropDownStyle">@android:style/Widget.Spinner.DropDown</item>
        <item name="actionButtonStyle">@android:style/Widget.ActionButton</item>
        <item name="actionOverflowButtonStyle">@android:style/Widget.ActionButton.Overflow</item>
        <item name="actionModeBackground">@android:drawable/cab_background_top_holo_dark</item>
        <item name="actionModeSplitBackground">@null</item>
        <item name="actionModeCloseDrawable">@android:drawable/ic_menu_close_clear_cancel</item>
        <item name="actionModeCutDrawable">@android:drawable/ic_menu_cut_holo_dark</item>
        <item name="actionModeCopyDrawable">@android:drawable/ic_menu_copy_holo_dark</item>
        <item name="actionModePasteDrawable">@android:drawable/ic_menu_paste_holo_dark</item>
        <item name="actionModeSelectAllDrawable">@android:drawable/ic_menu_selectall_holo_dark</item>
        <item name="actionModeShareDrawable">@android:drawable/ic_menu_share_holo_dark</item>
        <item name="actionModeFindDrawable">@android:drawable/ic_menu_find_holo_dark</item>
        <item name="actionModeWebSearchDrawable">@android:drawable/ic_menu_search</item>
        <item name="actionBarTabStyle">@style/Widget.ActionBar.TabView</item>
        <item name="actionBarTabBarStyle">@style/Widget.ActionBar.TabBar</item>
        <item name="actionBarTabTextStyle">@style/Widget.ActionBar.TabText</item>
        <item name="actionModeStyle">@style/Widget.ActionMode</item>
        <item name="actionModeCloseButtonStyle">@style/Widget.ActionButton.CloseMode</item>
        <item name="actionBarStyle">@android:style/Widget.ActionBar</item>
        <item name="actionBarSplitStyle">?android:attr/actionBarStyle</item>
        <item name="actionBarSize">@dimen/action_bar_default_height</item>
        <item name="actionModePopupWindowStyle">?android:attr/popupWindowStyle</item>
        <item name="actionMenuTextAppearance">@android:style/TextAppearance.Holo.Widget.ActionBar.Menu</item>
        <item name="actionMenuTextColor">?android:attr/textColorPrimary</item>
        <item name="actionBarWidgetTheme">@null</item>
        <item name="actionBarDivider">?android:attr/dividerVertical</item>
        <item name="actionBarItemBackground">?android:attr/selectableItemBackground</item>
        <item name="dividerVertical">@drawable/divider_vertical_dark</item>
        <item name="dividerHorizontal">@drawable/divider_vertical_dark</item>
        <item name="buttonBarStyle">@android:style/ButtonBar</item>
        <item name="buttonBarButtonStyle">?android:attr/buttonStyle</item>
        <item name="segmentedButtonStyle">@android:style/SegmentedButton</item>

這里定義了所有與ActionBar相關的屬性，下面是Holo主題對ActionBar樣式的定義，該樣式對Theme定義的大部分ActionBar樣式進行了重寫，如下：

<!-- Action bar styles -->
        <item name="actionDropDownStyle">@android:style/Widget.Holo.Spinner.DropDown.ActionBar</item>
        <item name="actionButtonStyle">@android:style/Widget.Holo.ActionButton</item>
        <item name="actionOverflowButtonStyle">@android:style/Widget.Holo.ActionButton.Overflow</item>
        <item name="actionModeBackground">@android:drawable/cab_background_top_holo_dark</item>
        <item name="actionModeSplitBackground">@android:drawable/cab_background_bottom_holo_dark</item>
        <item name="actionModeCloseDrawable">@android:drawable/ic_cab_done_holo_dark</item>
        <item name="actionBarTabStyle">@style/Widget.Holo.ActionBar.TabView</item>
        <item name="actionBarTabBarStyle">@style/Widget.Holo.ActionBar.TabBar</item>
        <item name="actionBarTabTextStyle">@style/Widget.Holo.ActionBar.TabText</item>
        <item name="actionModeStyle">@style/Widget.Holo.ActionMode</item>
        <item name="actionModeCloseButtonStyle">@style/Widget.Holo.ActionButton.CloseMode</item>
        <item name="actionBarStyle">@android:style/Widget.Holo.ActionBar</item>
        <item name="actionBarSize">@dimen/action_bar_default_height</item>
        <item name="actionModePopupWindowStyle">@android:style/Widget.Holo.PopupWindow.ActionMode</item>
        <item name="actionBarWidgetTheme">@null</item>
        <item name="actionModeCutDrawable">@android:drawable/ic_menu_cut_holo_dark</item>
        <item name="actionModeCopyDrawable">@android:drawable/ic_menu_copy_holo_dark</item>
        <item name="actionModePasteDrawable">@android:drawable/ic_menu_paste_holo_dark</item>
        <item name="actionModeSelectAllDrawable">@android:drawable/ic_menu_selectall_holo_dark</item>
        <item name="actionModeShareDrawable">@android:drawable/ic_menu_share_holo_dark</item>
        <item name="actionModeFindDrawable">@android:drawable/ic_menu_find_holo_dark</item>
        <item name="actionModeWebSearchDrawable">@android:drawable/ic_menu_search_holo_dark</item>
        <item name="dividerVertical">?android:attr/listDivider</item>
        <item name="dividerHorizontal">?android:attr/listDivider</item>
        <item name="buttonBarStyle">@android:style/Holo.ButtonBar</item>
        <item name="buttonBarButtonStyle">?android:attr/borderlessButtonStyle</item>
        <item name="segmentedButtonStyle">@android:style/Holo.SegmentedButton</item>

這是系統HOLO主題對ActionBar樣式的定義。從中可以看到有一些重要的樣式屬性定義，如actionBarStye、actionButtonStyle、actionModeStyle等。

二，樣式屬性actionBarStyle

樣式屬性actionBarStyle定義了ActionBar的基本樣式。

<style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView">
    <item name="android:background">@drawable/tab_indicator_holo</item>
    <item name="android:paddingLeft">16dip</item>
    <item name="android:paddingRight">16dip</item>
</style>

其父樣式如下：

<style name="Widget.ActionBar">
    <item name="android:background">@android:drawable/action_bar_background</item>
    <item name="android:displayOptions">useLogo|showHome|showTitle</item>
    <item name="android:divider">@android:drawable/action_bar_divider</item>
    <item name="android:height">?android:attr/actionBarSize</item>
    <item name="android:paddingLeft">0dip</item>
    <item name="android:paddingTop">0dip</item>
    <item name="android:paddingRight">0dip</item>
    <item name="android:paddingBottom">0dip</item>
    <item name="android:titleTextStyle">@android:style/TextAppearance.Widget.ActionBar.Title</item>
    <item name="android:subtitleTextStyle">@android:style/TextAppearance.Widget.ActionBar.Subtitle</item>
    <item name="android:progressBarStyle">@android:style/Widget.ProgressBar.Horizontal</item>
    <item name="android:indeterminateProgressStyle">@android:style/Widget.ProgressBar.Small</item>
    <item name="android:homeLayout">@android:layout/action_bar_home</item>
</style>

其中，background定義了ActionBar的背景；

displayOptions定義了顯示選項，這里聲明了使用LOGO、顯示Home以及Title。

homeLayout定義了ActionBar左邊Home的布局，包括向左返回上一層那個箭頭。

三，樣式屬性actionButtonStyle

樣式屬性actionButtonStyle定義了ActionBar上按鈕的樣式，比如ActionBar上的菜單按鈕等。actionButtonStyle所引用的樣式定義如下：

<style name="Widget.Holo.ActionButton" parent="Widget.ActionButton">
    <item name="android:minWidth">56dip</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingLeft">12dip</item>
    <item name="android:paddingRight">12dip</item>
    <item name="android:scaleType">center</item>
</style>

從上面的定義看出，它定義了Button的最小寬度、居中樣式、左右padding以及圖片的放縮方式。再看看該樣式的父樣式，如下：

<style name="Widget.ActionButton">
    <item name="android:background">?android:attr/actionBarItemBackground</item>
    <item name="android:paddingLeft">12dip</item>
    <item name="android:paddingRight">12dip</item>
    <item name="android:minWidth">56dip</item>
    <item name="android:minHeight">?android:attr/actionBarSize</item>
</style>

從這里看出，子樣式重寫了父樣式中的一些屬性，但保留了背景和最小高度。這個背景background屬性經過兩次引用，引用了HOLO的如下屬性：

<item name="selectableItemBackground">@android:drawable/item_background_holo_dark</item>

很明顯的就能看出，該背景引用的是一個selector類型的drawable。下面是這個drawable的定義：

<selector xmlns:android="http://schemas.android.com/apk/res/android"
          android:exitFadeDuration="@android:integer/config_mediumAnimTime">
    <item android:state_focused="true"  android:state_enabled="false" android:state_pressed="true" android:drawable="@drawable/list_selector_disabled_holo_dark" />
    <item android:state_focused="true"  android:state_enabled="false"                              android:drawable="@drawable/list_selector_disabled_holo_dark" />
    <item android:state_focused="true"                                android:state_pressed="true" android:drawable="@drawable/list_selector_background_transition_holo_dark" />
    <item android:state_focused="false"                               android:state_pressed="true" android:drawable="@drawable/list_selector_background_transition_holo_dark" />
    <item android:state_focused="true"                                                             android:drawable="@drawable/list_focused_holo" />
    <item                                                                                          android:drawable="@color/transparent" />
</selector>

這里就能看出各個狀態下引用的是哪些背景圖片了。

四，樣式屬性actionBarDivider

樣式屬性actionBarDivider定義了ActionBar操作項之間的分隔條。可以看出，它直接引用了另一個ActionBar相關屬性 dividerVertical，其定義如下：

<item name="dividerVertical">@drawable/divider_vertical_dark</item>

通過分析，這里引用的drawable直接對應一張圖片，而不是selector類型。

五，樣式屬性actionMenuTextAppearance和 actionMenuTextColor

樣式屬性actionMenuTextAppearance和actionMenuTextColor定義了菜單的文本樣式與顏色。

<style name="TextAppearance.Holo.Widget.ActionBar.Menu"
       parent="TextAppearance.Holo.Small">
    <item name="android:textSize">12sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">?android:attr/actionMenuTextColor</item>
    <item name="android:textAllCaps">true</item>
</style>

六，樣式屬性actionBarWidgetThem

樣式屬性actionBarWidgetTheme為被添加到ActionBar的操作欄中的Widget定義主題資源。

七，樣式屬性actionBarStyle

樣式屬性actionBarStyle定義了ActionBar的基本樣式。

<style name="Widget.Holo.ActionBar" parent="Widget.ActionBar">
    <item name="android:titleTextStyle">@android:style/TextAppearance.Holo.Widget.ActionBar.Title</item>
    <item name="android:subtitleTextStyle">@android:style/TextAppearance.Holo.Widget.ActionBar.Subtitle</item>
    <item name="android:background">@android:drawable/ab_transparent_dark_holo</item>
    <item name="android:backgroundStacked">@android:drawable/ab_stacked_transparent_dark_holo</item>
    <item name="android:backgroundSplit">@android:drawable/ab_bottom_transparent_dark_holo</item>
    <item name="android:divider">?android:attr/dividerVertical</item>
    <item name="android:progressBarStyle">@android:style/Widget.Holo.ProgressBar.Horizontal</item>
    <item name="android:indeterminateProgressStyle">@android:style/Widget.Holo.ProgressBar</item>
    <item name="android:progressBarPadding">32dip</item>
    <item name="android:itemPadding">8dip</item>
</style>

其父樣式如下：

<style name="Widget.ActionBar">
    <item name="android:background">@android:drawable/action_bar_background</item>
    <item name="android:displayOptions">useLogo|showHome|showTitle</item>
    <item name="android:divider">@android:drawable/action_bar_divider</item>
    <item name="android:height">?android:attr/actionBarSize</item>
    <item name="android:paddingLeft">0dip</item>
    <item name="android:paddingTop">0dip</item>
    <item name="android:paddingRight">0dip</item>
    <item name="android:paddingBottom">0dip</item>
    <item name="android:titleTextStyle">@android:style/TextAppearance.Widget.ActionBar.Title</item>
    <item name="android:subtitleTextStyle">@android:style/TextAppearance.Widget.ActionBar.Subtitle</item>
    <item name="android:progressBarStyle">@android:style/Widget.ProgressBar.Horizontal</item>
    <item name="android:indeterminateProgressStyle">@android:style/Widget.ProgressBar.Small</item>
    <item name="android:homeLayout">@android:layout/action_bar_home</item>
</style>

八，樣式屬性actionBarTabStyle

樣式屬性 actionBarTabStyle為Tab頁的標簽定義樣式，其引用樣式如下：

<style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView">
    <item name="android:background">@drawable/tab_indicator_holo</item>
    <item name="android:paddingLeft">16dip</item>
    <item name="android:paddingRight">16dip</item>
</style>

其background屬性定義了tab標簽的背景，其也是selector類型的drawable。下面是該drawable的具體定義：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />
    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
</selector>

九，樣式屬性actionBarTabBarStyle

樣式屬性actionBarTabBarStyle定義了Tab標簽之間分隔條。

<style name="Widget.Holo.ActionBar.TabBar" parent="Widget.ActionBar.TabBar">
    <item name="android:divider">?android:attr/actionBarDivider</item>
    <item name="android:showDividers">middle</item>
    <item name="android:dividerPadding">12dip</item>
</style>

可以看出，divider引用的資源與前面菜單分隔條引用的資源是相同的。

十，樣式屬性actionBarTabTextStyle

樣式屬性 actionBarTabTextStyle定義了Tab的文本樣式，如下：

<style name="Widget.Holo.ActionBar.TabText" parent="Widget.ActionBar.TabText">
    <item name="android:textAppearance">@style/TextAppearance.Holo.Medium</item>
    <item name="android:textColor">?android:attr/textColorPrimary</item>
    <item name="android:textSize">12sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:ellipsize">marquee</item>
    <item name="android:maxLines">2</item>
</style>

十一，樣式屬性actionDropDownStyle

樣式屬性 actionDropDownStyle定義了下拉導航列表的樣式，如下：

<style name="Widget.Holo.Spinner.DropDown.ActionBar">
    <item name="android:background">@android:drawable/spinner_ab_holo_dark</item>
</style>

其祖先樣式：

<style name="Widget.Holo.Spinner" parent="Widget.Spinner.DropDown">
    <item name="android:background">@android:drawable/spinner_background_holo_dark</item>
    <item name="android:dropDownSelector">@android:drawable/list_selector_holo_dark</item>
    <item name="android:popupBackground">@android:drawable/menu_dropdown_panel_holo_dark</item>
    <item name="android:dropDownVerticalOffset">0dip</item>
    <item name="android:dropDownHorizontalOffset">0dip</item>
    <item name="android:dropDownWidth">wrap_content</item>
    <item name="android:popupPromptView">@android:layout/simple_dropdown_hint</item>
    <item name="android:gravity">left|center_vertical</item>
</style>

十二，其他

在與ActionBar相關的樣式中還定義了ActionMode的樣式，但ActionMode與ActionBar是屬于兩個不同類型的控件，這里就不對ActionMode進行介紹了。

通過上面對ActionBar樣式的分析，我們就可能很容易在項目中根據實際需求對ActionBar的樣式進行修改，特別是在主題切換功能中，要求對ActinBar的樣式有比較全面深入的了解。除了ActionBar的樣式之外，了解Android系統時何時創建ActionBar、以及根據不同feature創建不同的ActionBar也是非常重要的。

本文由用戶 gmyf7157 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1455980296698.html

Android開發移動開發

ActionBar樣式詳解

相關經驗

相關資訊

相關文檔

目錄