ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)

时间：2023-03-08 17:04:07
ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)

Styling the Action Bar

　　If you want to implement a visual design that represents your app's brand, the action bar allows you to customize each detail of its appearance, including the action bar color, text colors, button styles, and more. To do so, you need to use Android's style and theme framework to restyle the action bar using special style properties.

Caution: For all background drawables you provide, be sure to use Nine-Patch drawables to allow stretching. The nine-patch image should be smaller than 40dp tall and 30dp wide.

注意:背景图片最好用.9图片
以下是自定义样式时重要的样式属性,注意xxxStyle 的值是另一个样式元素或文件.
General appearance 通用样式属性
actionBarStyle Specifies a style resource that defines various style properties for the action bar.

The default for this style for this is Widget.AppCompat.ActionBar, which is what you should use as the parent style.

Supported styles include:
background Defines a drawable resource for the action bar background.
backgroundStacked Defines a drawable resource for the stacked action bar (the tabs).
backgroundSplit Defines a drawable resource for the split action bar.
actionButtonStyle

Defines a style resource for action buttons.

The default for this style for this is Widget.AppCompat.ActionButton, which is what you

should use as the parent style.
actionOverflowButtonStyle Defines a style resource for overflow action items.

The default for this style for this is Widget.AppCompat.ActionButton.Overflow,

which is what you should use as the parent style.
displayOptions

Defines one or more action bar display options, such as whether to use the app logo, show the activity

title, or enable the Up action.See displayOptions for all possible values.
divider Defines a drawable resource for the divider between action items.
titleTextStyle

Defines a style resource for the action bar title.

The default for this style for this is TextAppearance.AppCompat.Widget.ActionBar.Title,

which is what you should use as the parent style.
windowActionBarOverlay

　　Declares whether the action bar should overlay the activity layout rather than offset the activity's layout position (for example,

the Gallery app uses overlay mode). This is false by default.

　　Normally, the action bar requires its own space on the screen and your activity layout fills in what's left over. When the action bar is

in overlay mode, your activity layout uses all the available space and the system draws the action bar on top. Overlay mode can be

useful if you want your content to keep a fixed size and position when he action bar is hidden and shown.You might also like to use

it purely as a visual effect, because you can use a semi-transparent background for the action bar so the user can still see some of

your activity layout behind the action bar.

　　Note: The Holo theme families draw the action bar with a semi-transparent background by default. However, you can modify it

with your own styles and the DeviceDefault theme on different devices might use an opaque background by default.

　　When overlay mode is enabled, your activity layout has no awareness of the action bar lying on top of it. So, you must be careful

not to place any important information or UI components in the area overlaid by the action bar.If appropriate, you can refer to the

platform's value for actionBarSize to determine the height of the action bar,

by referencing it in your XML layout. For example:

<SomeView
    ...
    android:layout_marginTop="?android:attr/actionBarSize" />

　　You can also retrieve the action bar height at runtime with getHeight(). This reflects the height of the action bar at the time it's

called, which might not include the stacked action bar (due to navigation tabs) if called during early activity lifecycle methods. To see

how you  can determine the total height at runtime, including the stacked action bar, see the TitlesFragment class in the

Honeycomb Gallery  sample app.
   Action items 操作项样式属性
actionButtonStyle Defines a style resource for the action item buttons.

The default for this style for this is Widget.AppCompat.ActionButton, which is what you should use as the parent style.
actionBarItemBackground

Defines a drawable resource for each action item's background. This should be a state-list drawable to indicate different selected

states.
itemBackground

Defines a drawable resource for each action overflow item's background. This should be a state-list drawable to indicate different

selected states.
actionBarDivider Defines a drawable resource for the divider between action items.
actionMenuTextColor Defines a color for text that appears in an action item.
actionMenuTextAppearance Defines a style resource for text that appears in an action item.
actionBarWidgetTheme Defines a theme resource for widgets that are inflated into the action bar as action views.
Navigation tabs 顶部Tab样式属性

actionBarTabStyle

 Defines a style resource for tabs in the action bar.

The default for this style for this is Widget.AppCompat.ActionBar.TabView, which is what you should use as the parent style.
actionBarTabBarStyle Defines a style resource for the thin bar that appears below the navigation tabs.

The default for this style for this is Widget.AppCompat.ActionBar.TabBar, which is what you should use as the parent style.
actionBarTabTextStyle  Defines a style resource for text in the navigation tabs.

The default for this style for this is Widget.AppCompat.ActionBar.TabText, which is what you should use as the parent style.
  Drop-down lists 下拉列表样式属性
 actionDropDownStyle Defines a style for the drop-down navigation (such as the background and text styles).

The default for this style for this is Widget.AppCompat.Spinner.DropDown.ActionBar, which is what you should use as the

parent style.

Example theme

　　Here's an example that defines a custom theme for an activity, CustomActivityTheme, that includes several styles to customize the action bar.

Notice that there are two versions for each action bar style property. The first one includes the android: prefix on the property name to support API levels 11 and higher that include these properties in the framework. The second version does not include the android: prefix and is for older versions of the platform, on which the system uses the style property from the support library. The effect for each is the same.

 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <!-- the theme applied to the application or activity -->
     <style name="CustomActionBarTheme"
            parent="@style/Theme.AppCompat.Light">
         <item name="android:actionBarStyle">@style/MyActionBar</item>
         <item name="android:actionBarTabTextStyle">@style/TabTextStyle</item>
         <item name="android:actionMenuTextColor">@color/actionbar_text</item>

         <!-- Support library compatibility -->
         <item name="actionBarStyle">@style/MyActionBar</item>
         <item name="actionBarTabTextStyle">@style/TabTextStyle</item>
         <item name="actionMenuTextColor">@color/actionbar_text</item>
     </style>

     <!-- general styles for the action bar -->
     <style name="MyActionBar"
            parent="@style/Widget.AppCompat.ActionBar">
         <item name="android:titleTextStyle">@style/TitleTextStyle</item>
         <item name="android:background">@drawable/actionbar_background</item>
         <item name="android:backgroundStacked">@drawable/actionbar_background</item>
         <item name="android:backgroundSplit">@drawable/actionbar_background</item>

         <!-- Support library compatibility -->
         <item name="titleTextStyle">@style/TitleTextStyle</item>
         <item name="background">@drawable/actionbar_background</item>
         <item name="backgroundStacked">@drawable/actionbar_background</item>
         <item name="backgroundSplit">@drawable/actionbar_background</item>
     </style>

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

     <!-- action bar tab text -->
     <style name="TabTextStyle"
            parent="@style/Widget.AppCompat.ActionBar.TabText">
         <item name="android:textColor">@color/actionbar_text</item>
     </style>
 </resources>

In your manifest file, you can apply the theme to your entire app:

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

Or to individual activities:

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

Caution: Be certain that each theme and style declares a parent theme in the <style> tag, from which it inherits all styles not explicitly declared by your theme. When modifying the action bar, using a parent theme is important so that you can simply override the action bar styles you want to change without re-implementing the styles you want to leave alone (such as text size or padding in action items).

For more information about using style and theme resources in your application, read Styles and Themes.

练习示例

 <resources>
     <!--
         Base application theme for API 14+. This theme completely replaces
         AppBaseTheme from BOTH res/values/styles.xml and
         res/values-v11/styles.xml on API 14+ devices.
     -->
     <style name="AppBaseTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
         <!-- API 14 theme customizations can go here. -->
     </style>

     <!-- 自定义actionBar的样式主题 -->
     <style name="StandardABTheme" parent="AppBaseTheme">

         <!-- 用自定义的ActionBar的standard mode样式 -->
         <item name="android:actionBarStyle">@style/custom_ActionBarStyle</item>

         <!-- 自定义每个可见action item的背景(包括homeButton,action item和溢出button,但不包括溢出菜单里的) -->
         <item name="android:actionBarItemBackground">@drawable/selector_actionbar_item_background</item>        

         <!-- 每个溢出菜单item的样式  -->
         <item name="android:itemBackground">@drawable/selector_actionbar_overflow_item</item>        

         <!-- 定义的ActionBar的溢出按钮(OverflowButton)样式 -->
         <!-- <item name="android:actionOverflowButtonStyle">@style/custom_ActionButton.Overflow</item> -->

         <!-- <item name="android:actionMenuTextColor" >@color/green</item> -->

         <item name="android:actionMenuTextAppearance">@style/custom_ActionMenuTextStyle</item>

            <!-- 自定义ActionBar的溢出菜单框架的样式 -->
            <!-- <item name="android:popupMenuStyle">@style/custom_PopupMenu</item> -->                            

            <!-- 自定义ActionBar的溢出菜单列表的样式 -->
         <!-- <item name="android:dropDownListViewStyle">@style/custom_DropDownListView</item>     -->
            <!-- api21 -->
            <!-- <item name="android:actionOverflowMenuStyle">?attr/popupMenuStyle</item> -->
     </style>
     <style name="custom_ActionMenuTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
         <item name="android:textSize">20sp</item>
         <item name="android:textStyle">bold</item>
         <item name="android:textColor">@color/white</item>
         <item name="android:textAllCaps">false</item>
     </style>
     <!-- 自定义ActionBar的bar的样式 -->
     <style name="custom_ActionBarStyle" parent="@android:style/Widget.ActionBar">
         <!-- Change action bar background color -->
         <item name="android:background">@drawable/selector_actionbar_item_background</item>
         <!-- Change split action bar background color -->
         <item name="android:backgroundSplit">@color/skyblue</item>
         <item name="android:titleTextStyle">@style/custom_TitleTextStyle</item>
     </style>

     <!-- 自定义ActionBar的actionButton样式,选中时,正常时,焦点时 -->
     <style name="custom_ActionButtonStyle" parent="@android:style/Widget.ActionButton">
         <!-- Change action button background color -->
         <item name="android:background">@drawable/selector_actionbar_button</item>
     </style>

     <!-- 自定义ActionBar的OverflowButton样式 -->
     <style name="custom_ActionButton.Overflow" parent="@android:style/Widget.ActionButton.Overflow">
         <!-- Change action bar Overflow button image -->
         <item name="android:src">@drawable/ic_actionbar_overflow_button</item>                         <!-- OverflowButton的图片 -->
         <item name="android:background">@drawable/selector_actionbar_item_background</item>
     </style>

     <!-- 自定义ActionBar的溢出菜单框架的样式 -->
     <style name="custom_PopupMenu" parent="@android:style/Widget.Holo.Light.ListPopupWindow">
         <item name="android:popupBackground">@drawable/popup_menu_frame_background</item>            <!-- 溢出菜单的背景图 -->
     </style>

     <!-- 自定义ActionBar的溢出菜单列表的样式 -->
     <style name="custom_DropDownListView" parent="@android:style/Widget.Holo.Light.ListView.DropDown">
         <item name="android:listSelector">@drawable/popup_menu_list_item_background</item>
     </style>

     <!-- 自定义ActionBar的titleText样式 -->
     <style name="custom_TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
         <!-- Change action bar title color -->
         <item name="android:textColor">@color/white</item>
     </style>

 </resources>