ActionBar小结2_自定义action bar的样式

ActionBar总结2_自定义action bar的样式

例子见资源(不需要资源积分)

主要内容:

  1. Customize the Background

  2. 更改action bar的字体颜色

  3. Customize the Tab Indicator

  4. Overlaying the Action Bar

Customize the Background

显示效果图: 
ActionBar小结2_自定义action bar的样式

实现:

  • 在styles中定义用于activity的theme,并覆盖actionBarStyle的属性,

    <style name="ChangeBackgroundTheme" parent="@android:style/Theme.Holo">
          <item name="android:actionBarStyle">@style/ActionBarStyle1</item>
    </style>
  • 覆盖actionBarStyle的background属性值。

    <!-- 更改ActionBar的背景颜色 -->
    <style name="ActionBarStyle1"  parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@drawable/tab_background</item>        
    </style>

  • 在AndroidManifest.xml的activity标签中指定theme
    <activity
        android:theme="@style/ChangeBackgroundTheme" >
    </activity>

如果使用的是分离的action bar,你应该指定 backgroundStacked,backgroundSplit属性来指定背景。


更改action bar的字体颜色


显示效果图: 
ActionBar小结2_自定义action bar的样式 
实现:

        为了修改action bar的文本字体颜色,你需要覆盖各个不同文本的属性值 
 (action bar的标题,Action bar tabs,Action buttons

action bar的标题: (theme -> actionBarStyle -> titleTextStyle -> textColor )

1.创建titleTextStyle指定textColor属性
    <!--Note: The custom style applied to titleTextStyle should use 
              TextAppearance.Holo.Widget.ActionBar.Title as the parent style. 
    -->
    <!--ActionBar title style-->
    <style name="MyActionBarTitleText" 
           parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title"  >
        <item name="android:textColor">@color/actionBarTitleTextcolor</item>
    </style>
2.创建actionBarStyle指定titleTextStyle,
     <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style>
3.定义用于activity的theme,并覆盖actionBarStyle的属性
     <!-- 更改标题字体颜色 -->
    <style name="CustomTheTextColor" parent="@android:style/Theme.Holo">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>
Action bar tabs: 定义用于activity的theme,并覆盖actionBarTabTextStyle的属性
    <!-- action tab text style -->
    <style  name="ActionBarTabText" parent="@android:style/Widget.ActionBar.TabText">
        <item name="android:textColor">@color/tab_textColor</item>
    </style>

    <style name="CustomTheTextColor" parent="@android:style/Theme.Holo">
        <item name="android:actionBarTabTextStyle">@style/ActionBarTabText</item>
    </style>

Action buttons: 定义用于activity的theme,并覆盖actionMenuTextColor的属性

    <style name="CustomTheTextColor" parent="@android:style/Theme.Holo">
        <item name="android:actionMenuTextColor">@color/actionbarMenutextColor</item>
    </style>

最后,在activity中指定theme


Customize the Tab Indicator


效果图: 
ActionBar小结2_自定义action bar的样式

   为了实现当用户选择tab时,背景会发生变化,来表明用户选择了那一个tab 
  • 实现: 

  • .创建actionBarTabStyle并覆盖background属性,background应该指向一个状态列表的drawable。

    <!-- Action Bar tabs Style -->
    <style name="MyActionBarTabs" parent="@android:style/Widget.ActionBar.TabView">
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
    </style>

    <!--actionbar_tab_indicator的定义-->
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
        <item android:state_selected="true" android:drawable="@drawable/select"/>
        <item android:drawable="@drawable/normal"/>
    </selector>
  • 定义用于activity的theme,并覆盖actionBarTabStyle的属性

<!-- 用于指示Tab是否选择 -->
    <style name="CustomizetheTabIndicator" parent="@android:style/Theme.Holo">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>
  • 在AndroidManifest.xml中指定theme


Overlaying the Action Bar


效果: 
ActionBar小结2_自定义action bar的样式 

实现: 
    只要开启overlay模式就可以了,也就是说android:windowActionBarOverlay设置成true


    <style name="OverlayingtheActionBar" parent="@android:style/Theme.Holo">
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>
    <!-- 实现Actionbar的透明度 -->
     <style name="MyActionBar"
           parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">@color/actionbar_bg</item>
    </style>

在什么情况下使用? 
    就是在有用户交互时,我们可能会隐藏或者显示action bar,然而这样会造成,这会导致你的activity 
重新计算和重绘布局,根据新的尺寸,为了避免这种情况,你就可以开启overlaymode。

action bar总结都是基于android 3.0,为了支持低版本的设备,可以参阅“官方资料链接”的内容。

官方资料链接: 
action bar1
action bar2