程序博客网 > 毕业设计的要求与数据

Android ActionBar学习(二) -- 自定义ActionBar Style

来源：互联网 发布：毕业设计的要求与数据 编辑：程序博客网 时间：2024/05/20 02:23

转自：http://blog.csdn.net/qq_34602647/article/details/70314571

上一篇文章我们初步了解了ActionBar的概念及为ActionBar自定义添加不同的Action item,Action View以及Action Provider等实现方法，接下来的这一片文章我们将讨论如何为ActionBar自定义不同的Style(样式)，实现具有自己独特风格的Action Bar。

自定义Actionbar Style

       在上一篇讲解ActionBar的文章开头，我们在AndroidManifest.xml文件中声明的<activity/>组件中使用android:theme属性来为Activity引入ActionBar并设置Theme Style(主题样式)，不过我们使用的Theme Style是Android系统自身提供的，样式显得着实单调不够有个性，那我们能不能DIY出自己想要的Theme Style呢？答案当然是yes,下面我将带领大家一步一步去自定义我们想要的ActionBar Theme Style。
       我们知道，在项目目录结构AndroidManifest.xml文件中需要设置<uses-sdk/>节点，例如：
[html] view plain copy
  1. <uses-sdk  
  2.      android:minSdkVersion="8"  
  3.      android:maxSdkVersion="14"  
  4.      android:targetSdkVersion="19" />  
该节点主要功能是为APP设置所运行Android系统的最低运行版本、目标运行版本和最高运行版本的属性。有这里需要注意的是，鉴于Android系统版本的差异性，在自定义Theme style的过程中应根据应用所需运行的最低系统版本而进行不同的设置，简单来讲就是在不同Android系统版本上，设置同样功能的Theme Style，设置属性方式会有所不用。其中差异最大的的是Android3.0(level 11)之前和之后的系统版本，虽然目前使用Android3.0之前版本系统的手机已经非常少，但为了提高我们应用的兼容性，我们在这里实现Android Theme Style时，会分别实现兼容Android3.0(level 11)及以上和Android2.1(level 7)及以上的两种属性设置方式。下面就进入我们自定义ActionBar Theme Style的实验中。

自定义ActionBar背景

       我们拿实例中的ScreenSecondActivity实验，为其ActionBar自定义Theme Style,首先看一下该ActionBar默认的Theme Style,如图下：

接着我们设置ActionBar的背景， 首先我们在项目中的res/values/styles.xml文件中定义自己的<style/>节点，名为MyActionBarTheme，然后再设置相关ActionBar背景属性。具体代码如下：
[html] view plain copy
  1. <!-- 第二步 -->  
  2.    <!-- Android3.0及以上ActionBar自定义的样式主题 -->  
  3.    <style name="MyActionBarTheme" parent="@android:style/Theme.Holo">  
  4.        <!-- 设置ActionBar Style -->  
  5.        <item name="android:actionBarStyle">@style/MyActionBar</item>  
  6.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  7.        <item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>  
  8.    </style>  
  9.   
  10.    <!--Android3.0及以上ActionBar样式-->  
  11.    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">  
  12.        <!--设置ActionBar的背景-->  
  13.        <item name="android:background">@color/actionbar_background</item>  
  14.        <!--设置ActionBar的标题的样式-->  
  15.        <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>  
  16.    </style>  
  17.   
  18. <!--Android3.0及以上ActionBar字体样式 -->  
  19.    <style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">  
  20.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  21.    </style>  
  22.    <!---------------------------------------------------------------------->  
  23.     <!--Android2.1及以上ActionBar自定义的样式主题 -->  
  24.    <style name="MyActionBarTheme" parent="@style/Theme.AppCompat">  
  25.         <!-- 设置ActionBar Style -->  
  26.        <item name="actionBarStyle">@style/MyActionBar</item>  
  27.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  28.        <item name="selectableItemBackground">@drawable/choose_action_items_background</item>  
  29.    </style>  
  30.      
  31.     <!--Android2.1及以上ActionBar样式-->  
  32.    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">  
  33.          
  34.        <!--设置ActionBar的背景-->  
  35.        <item name="background">@color/actionbar_background</item>  
  36.        <!--设置ActionBar的标题的样式-->  
  37.        <item name="titleTextStyle">@style/ActionBarTextStyle</item>  
  38.    </style>  
  39.   
  40. <!--Android2.1及以上ActionBar字体样式 -->  
  41.    <style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">  
  42.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  43.    </style>  
以上分别实现了在Android3.0及以上和Android2.1及以上设置ActionBar背景的功能。在实例中，我们通过重写父类的android:actionBarStyle属性，然后将其重新指向自定义的MyActionBar样式，在MyActionBar样式实现中，我们使其继承Android系统自身提供的Widget.Holo.Light.ActionBar 样式，并重写里面的android:background，然后添加自定义的背景，从而达到更改原有背景的效果。而MyActionBar中重写的android:titleTextStyle属性也利用之前重写android:actionBarStyle属性时同样的原理，来完成更改原有的字体颜色。其实不仅是更改ActionBar背景，更改其它的样式也是依照该原理来实现的，即继承父类Style,重写父类中的属性并设置自定义的值。上面除了设置ActionBarStyle之外，还是使用了android:selectableItemBackground属性，该属性的作用是设置ActionBar上显示的Action Items的背景和点击选中时的样式。那分析完上面的代码后，我们来看一下我们更改ActionBar背景后的效果图，不过在此之前要先为ScreenSecondActivity设置自定的MyActionBarTheme，代码如下：
[html] view plain copy
  1. <activity   
  2.     android:name="com.androidleaf.actionbar.activity.ScreenSecondActivity"  
  3.     android:logo="@drawable/sys_icon"  
  4.     android:label="@string/main_title"  
  5.     android:theme="@style/MyActionBarTheme"  
  6.    >  
然后运行程序，效果图如图下：

如上图，我们成功将ActionBar背景色修改为浅蓝色，Action Item点击后的背景色改为浅绿色，ActionBar的标题名称字体颜色改为了黑色(默认是白色)。但是我们发现overflow中的item并没有跟着改变其背景色，那如果要修改的话，该怎么做呢？下面我们也来实现一下。

自定义overflow的背景

        要更改overflow中的item的背景，需要重写父类中的android:dropDownListViewStyle属性，并自定义Style--MyDropDownListView,其继承系统提供的android:style/Widget.Holo.ListView.DropDown，然后重写android:listSelector和android:background,前者作用是设置item选中时的背景样式，而android:background是设置整个overflow的背景。为了让整个ActioBar上的item都为白色，我们也可以重写android:actionOverflowButtonStyle这个属性来替换系统提供的overflow按钮(最右上角的三个点的小图标)。具体的代码如下：
[html] view plain copy
  1. <!-- Android3.0及以上ActionBar自定义的样式主题 -->  
  2.    <style name="MyActionBarTheme" parent="@android:style/Theme.Holo">  
  3.        <!-- 设置ActionBar Style -->  
  4.        <item name="android:actionBarStyle">@style/MyActionBar</item>  
  5.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  6.        <item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>  
  7.     <!-- 设置overflow按钮的图片资源 -->  
  8.     <item name="android:actionOverflowButtonStyle">@style/MyOverFlowButton</item>  
  9.     <!-- 设置overflow中items的背景和点击选中时的style -->  
  10.     <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>  
  11.    </style>  
  12.   
  13.    <!--Android3.0及以上ActionBar样式-->  
  14.    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">  
  15.        <!--设置ActionBar的背景-->  
  16.        <item name="android:background">@color/actionbar_background</item>  
  17.        <!--设置ActionBar的标题的样式-->  
  18.        <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>  
  19.    </style>  
  20.   
  21. <!--Android3.0及以上ActionBar字体样式 -->  
  22.    <style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">  
  23.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  24.    </style>  
  25.   
  26. <!--Android3.0及以上设置overflow按钮的图片资源 -->  
  27.    <style name="MyOverFlowButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">  
  28.        <item name="android:src">@drawable/actionbar_more_icon</item>  
  29.    </style>  
  30.   
  31. <!--Android3.0及以上设置overflow中items的背景和点击选中时的style-->  
  32.    <style name="MyDropDownListView" parent="@android:style/Widget.Holo.ListView.DropDown">  
  33.     <item name="android:listSelector">@drawable/choose_action_items_background</item>  
  34.     <item name="android:background">@color/actionbar_background</item>  
  35. </style>  
  36.   
  37.    <!---------------------------------------------------------------------->  
  38.     <!--Android2.1及以上ActionBar自定义的样式主题 -->  
  39.    <style name="MyActionBarTheme" parent="@style/Theme.AppCompat">  
  40.         <!-- 设置ActionBar Style -->  
  41.        <item name="actionBarStyle">@style/MyActionBar</item>  
  42.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  43.        <item name="selectableItemBackground">@drawable/choose_action_items_background</item>  
  44.     <!-- 设置overflow按钮的图片资源 -->  
  45.     <item name="actionOverflowButtonStyle">@style/MyOverFlowButton</item>  
  46.     <!-- 设置overflow中items的背景和点击选中时的style -->  
  47.     <item name="dropDownListViewStyle">@style/MyDropDownListView</item>  
  48.    </style>  
  49.      
  50.     <!--Android2.1及以上ActionBar样式-->  
  51.    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">  
  52.          
  53.        <!--设置ActionBar的背景-->  
  54.        <item name="background">@color/actionbar_background</item>  
  55.        <!--设置ActionBar的标题的样式-->  
  56.        <item name="titleTextStyle">@style/ActionBarTextStyle</item>  
  57.    </style>  
  58.   
  59. <!--Android2.1及以上ActionBar字体样式 -->  
  60.    <style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">  
  61.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  62.    </style>  
  63.   
  64. <!--Android2.1及以上设置overflow按钮的图片资源 -->  
  65.    <style name="MyOverFlowButton" parent="@style/Widget.AppCompat.ActionButton.Overflow">  
  66.        <item name="android:src">@drawable/actionbar_more_icon</item>  
  67.    </style>  
  68.   
  69. <!--Android2.1及以上设置overflow中items的背景和点击选中时的style-->  
  70.    <style name="MyDropDownListView" parent="android:style/Widget.AppCompat.ListView.DropDown">  
  71.     <item name="listSelector">@drawable/choose_action_items_background</item>  
  72.     <item name="background">@color/actionbar_background</item>  
  73. </style>  
然后运行程序，效果图如下：

如上图，实验成功！

自定义ActionBar Tabs背景

       接下来我们为ActionBar Tabs设置自定义背景，需要设置地方的一般分为两块，一个是ActionBar Tabs的字体颜色，另外一个是ActionBar Tab的背景。要设置字体颜色，需要重写父类中的android:actionBarTabTextStyle属性，并自定义继承自android:style/Widget.Holo.ActionBar.TabText的样式，重写android.textColor,然后设置我们所需要的字体颜色。而要设置ActionBar Tab背景，则需要重写父类中的android:actionBarTabStyle属性，并自定义继承自android:style/Widget.Holo.ActionBar.TabView的样式，重写android:background,最后设置背景色或背景图片。在这里我们设置背景的时候，采用设置背景图片的方式，那我们需要准备四张图片，如下：
                                                                        
这几张图片分别是在Tab不同状态下来显示，然后定义背景drawable,代码在res/drawable/tab_select_background.xml中，具体代码如下：
[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android"  
  3.      >  
  4.     <item  
  5.         android:state_pressed="false"  
  6.         android:state_selected="false"  
  7.         android:drawable="@drawable/tab_unselected_unpressed"  
  8.          />  
  9.     <item  
  10.         android:state_pressed="false"  
  11.         android:state_selected="true"  
  12.         android:drawable="@drawable/tab_selected_unpressed"  
  13.          />  
  14.     <item  
  15.         android:state_pressed="true"  
  16.         android:state_selected="false"  
  17.         android:drawable="@drawable/tab_unselected_pressed"  
  18.          />  
  19.     <item  
  20.         android:state_pressed="true"  
  21.         android:state_selected="true"  
  22.         android:drawable="@drawable/tab_selected_pressed"  
  23.           
  24.          />  
  25. </selector>  
下面再看看styles.xml文件中的具体的代码:
[html] view plain copy
  1. <!-- Android3.0及以上ActionBar自定义的样式主题 -->  
  2.    <style name="MyActionBarTheme" parent="@android:style/Theme.Holo">  
  3.        <!-- 设置ActionBar Style -->  
  4.        <item name="android:actionBarStyle">@style/MyActionBar</item>  
  5.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  6.        <item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>  
  7.     <!-- 设置overflow按钮的图片资源 -->  
  8.     <item name="android:actionOverflowButtonStyle">@style/MyOverFlowButton</item>  
  9.     <!-- 设置overflow中items的背景和点击选中时的style -->  
  10.     <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>  
  11.     <!-- 设置ActionBar Tab的字体颜色-->  
  12.     <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>  
  13.     <!-- 设置单个ActionBar Tab的样式背景 -->  
  14.     <item name="android:actionBarTabStyle">@style/MyActionBarTab</item>  
  15.    </style>  
  16.   
  17.    <!--Android3.0及以上ActionBar样式-->  
  18.    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">  
  19.        <!--设置ActionBar的背景-->  
  20.        <item name="android:background">@color/actionbar_background</item>  
  21.        <!--设置ActionBar的标题的样式-->  
  22.        <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>  
  23.    </style>  
  24.   
  25. <!--Android3.0及以上ActionBar字体样式 -->  
  26.    <style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">  
  27.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  28.    </style>  
  29.   
  30. <!--Android3.0及以上设置overflow按钮的图片资源 -->  
  31.    <style name="MyOverFlowButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">  
  32.        <item name="android:src">@drawable/actionbar_more_icon</item>  
  33.    </style>  
  34.   
  35. <!--Android3.0及以上设置overflow中items的背景和点击选中时的style-->  
  36.    <style name="MyDropDownListView" parent="@android:style/Widget.Holo.ListView.DropDown">  
  37.     <item name="android:listSelector">@drawable/choose_action_items_background</item>  
  38.     <item name="android:background">@color/actionbar_background</item>  
  39. </style>  
  40.   
  41. <!--Android3.0及以上设置ActionBar Tab的字体颜色-->  
  42.    <style name="MyActionBarTabText" parent="@android:style/Widget.Holo.ActionBar.TabText">  
  43.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  44.    </style>  
  45.      
  46.    <!--Android3.0及以上设置单个ActionBar Tab的样式背景 -->  
  47.     <style name="MyActionBarTab" parent="@android:style/Widget.Holo.ActionBar.TabView">  
  48.       <item name="android:background">@drawable/tab_select_background</item>  
  49.    </style>   
  50.   
  51.    <!---------------------------------------------------------------------->  
  52.     <!--Android2.1及以上ActionBar自定义的样式主题 -->  
  53.    <style name="MyActionBarTheme" parent="@style/Theme.AppCompat">  
  54.         <!-- 设置ActionBar Style -->  
  55.        <item name="actionBarStyle">@style/MyActionBar</item>  
  56.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  57.        <item name="selectableItemBackground">@drawable/choose_action_items_background</item>  
  58.     <!-- 设置overflow按钮的图片资源 -->  
  59.     <item name="actionOverflowButtonStyle">@style/MyOverFlowButton</item>  
  60.     <!-- 设置overflow中items的背景和点击选中时的style -->  
  61.     <item name="dropDownListViewStyle">@style/MyDropDownListView</item>  
  62.       
  63.     <!-- 设置ActionBar Tab的字体颜色-->  
  64.     <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>  
  65.     <!-- 设置单个ActionBar Tab的样式背景 -->  
  66.     <item name="actionBarTabStyle">@style/MyActionBarTab</item>  
  67.    </style>  
  68.      
  69.     <!--Android2.1及以上ActionBar样式-->  
  70.    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">  
  71.          
  72.        <!--设置ActionBar的背景-->  
  73.        <item name="background">@color/actionbar_background</item>  
  74.        <!--设置ActionBar的标题的样式-->  
  75.        <item name="titleTextStyle">@style/ActionBarTextStyle</item>  
  76.    </style>  
  77.   
  78. <!--Android2.1及以上ActionBar字体样式 -->  
  79.    <style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">  
  80.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  81.    </style>  
  82.   
  83. <!--Android2.1及以上设置overflow按钮的图片资源 -->  
  84.    <style name="MyOverFlowButton" parent="@style/Widget.AppCompat.ActionButton.Overflow">  
  85.        <item name="android:src">@drawable/actionbar_more_icon</item>  
  86.    </style>  
  87.   
  88. <!--Android2.1及以上设置overflow中items的背景和点击选中时的style-->  
  89.    <style name="MyDropDownListView" parent="android:style/Widget.AppCompat.ListView.DropDown">  
  90.     <item name="listSelector">@drawable/choose_action_items_background</item>  
  91.     <item name="background">@color/actionbar_background</item>  
  92. </style>  
  93.   
  94. <!--Android2.1及以上设置ActionBar Tab的字体颜色-->  
  95.    <style name="MyActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText">  
  96.        <item name="textColor">@color/actionbar_tab_textcolor</item>  
  97.    </style>  
  98.      
  99.    <!-- Android2.1及以上设置单个ActionBar Tab的样式背景 -->  
  100.     <style name="MyActionBarTab" parent="@style/Widget.AppCompat.ActionBar.TabView">  
  101.       <item name="background">@drawable/tab_select_background</item>  
  102.    </style>   
然后运行程序，效果图如下：

自此，我们基本学习了自定义ActionBar Style的大部分知识点，我们完全可以根据我们项目产品的各自主题风格，自定义自己的ActionBar样式。

总结：通过学习两篇关于ActionBar组件的博文，我们基本上已经掌握了使用ActionBar的大部分方法。其实学习如何使用ActionBar难度并不大，我们只需要熟悉其设置的属性方法就行，关键的是在设计界面的时候，能够使得界面交互有良好的用户体验。

下载源代码，请戳下面：
  • GITHUB下载;
  • CSDN下载;

上一篇文章我们初步了解了ActionBar的概念及为ActionBar自定义添加不同的Action item,Action View以及Action Provider等实现方法，接下来的这一片文章我们将讨论如何为ActionBar自定义不同的Style(样式)，实现具有自己独特风格的Action Bar。

自定义Actionbar Style

       在上一篇讲解ActionBar的文章开头，我们在AndroidManifest.xml文件中声明的<activity/>组件中使用android:theme属性来为Activity引入ActionBar并设置Theme Style(主题样式)，不过我们使用的Theme Style是Android系统自身提供的，样式显得着实单调不够有个性，那我们能不能DIY出自己想要的Theme Style呢？答案当然是yes,下面我将带领大家一步一步去自定义我们想要的ActionBar Theme Style。
       我们知道，在项目目录结构AndroidManifest.xml文件中需要设置<uses-sdk/>节点，例如：
[html] view plain copy
  1. <uses-sdk  
  2.      android:minSdkVersion="8"  
  3.      android:maxSdkVersion="14"  
  4.      android:targetSdkVersion="19" />  
该节点主要功能是为APP设置所运行Android系统的最低运行版本、目标运行版本和最高运行版本的属性。有这里需要注意的是，鉴于Android系统版本的差异性，在自定义Theme style的过程中应根据应用所需运行的最低系统版本而进行不同的设置，简单来讲就是在不同Android系统版本上，设置同样功能的Theme Style，设置属性方式会有所不用。其中差异最大的的是Android3.0(level 11)之前和之后的系统版本，虽然目前使用Android3.0之前版本系统的手机已经非常少，但为了提高我们应用的兼容性，我们在这里实现Android Theme Style时，会分别实现兼容Android3.0(level 11)及以上和Android2.1(level 7)及以上的两种属性设置方式。下面就进入我们自定义ActionBar Theme Style的实验中。

自定义ActionBar背景

       我们拿实例中的ScreenSecondActivity实验，为其ActionBar自定义Theme Style,首先看一下该ActionBar默认的Theme Style,如图下：

接着我们设置ActionBar的背景， 首先我们在项目中的res/values/styles.xml文件中定义自己的<style/>节点，名为MyActionBarTheme，然后再设置相关ActionBar背景属性。具体代码如下：
[html] view plain copy
  1. <!-- 第二步 -->  
  2.    <!-- Android3.0及以上ActionBar自定义的样式主题 -->  
  3.    <style name="MyActionBarTheme" parent="@android:style/Theme.Holo">  
  4.        <!-- 设置ActionBar Style -->  
  5.        <item name="android:actionBarStyle">@style/MyActionBar</item>  
  6.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  7.        <item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>  
  8.    </style>  
  9.   
  10.    <!--Android3.0及以上ActionBar样式-->  
  11.    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">  
  12.        <!--设置ActionBar的背景-->  
  13.        <item name="android:background">@color/actionbar_background</item>  
  14.        <!--设置ActionBar的标题的样式-->  
  15.        <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>  
  16.    </style>  
  17.   
  18. <!--Android3.0及以上ActionBar字体样式 -->  
  19.    <style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">  
  20.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  21.    </style>  
  22.    <!---------------------------------------------------------------------->  
  23.     <!--Android2.1及以上ActionBar自定义的样式主题 -->  
  24.    <style name="MyActionBarTheme" parent="@style/Theme.AppCompat">  
  25.         <!-- 设置ActionBar Style -->  
  26.        <item name="actionBarStyle">@style/MyActionBar</item>  
  27.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  28.        <item name="selectableItemBackground">@drawable/choose_action_items_background</item>  
  29.    </style>  
  30.      
  31.     <!--Android2.1及以上ActionBar样式-->  
  32.    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">  
  33.          
  34.        <!--设置ActionBar的背景-->  
  35.        <item name="background">@color/actionbar_background</item>  
  36.        <!--设置ActionBar的标题的样式-->  
  37.        <item name="titleTextStyle">@style/ActionBarTextStyle</item>  
  38.    </style>  
  39.   
  40. <!--Android2.1及以上ActionBar字体样式 -->  
  41.    <style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">  
  42.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  43.    </style>  
以上分别实现了在Android3.0及以上和Android2.1及以上设置ActionBar背景的功能。在实例中，我们通过重写父类的android:actionBarStyle属性，然后将其重新指向自定义的MyActionBar样式，在MyActionBar样式实现中，我们使其继承Android系统自身提供的Widget.Holo.Light.ActionBar 样式，并重写里面的android:background，然后添加自定义的背景，从而达到更改原有背景的效果。而MyActionBar中重写的android:titleTextStyle属性也利用之前重写android:actionBarStyle属性时同样的原理，来完成更改原有的字体颜色。其实不仅是更改ActionBar背景，更改其它的样式也是依照该原理来实现的，即继承父类Style,重写父类中的属性并设置自定义的值。上面除了设置ActionBarStyle之外，还是使用了android:selectableItemBackground属性，该属性的作用是设置ActionBar上显示的Action Items的背景和点击选中时的样式。那分析完上面的代码后，我们来看一下我们更改ActionBar背景后的效果图，不过在此之前要先为ScreenSecondActivity设置自定的MyActionBarTheme，代码如下：
[html] view plain copy
  1. <activity   
  2.     android:name="com.androidleaf.actionbar.activity.ScreenSecondActivity"  
  3.     android:logo="@drawable/sys_icon"  
  4.     android:label="@string/main_title"  
  5.     android:theme="@style/MyActionBarTheme"  
  6.    >  
然后运行程序，效果图如图下：

如上图，我们成功将ActionBar背景色修改为浅蓝色，Action Item点击后的背景色改为浅绿色，ActionBar的标题名称字体颜色改为了黑色(默认是白色)。但是我们发现overflow中的item并没有跟着改变其背景色，那如果要修改的话，该怎么做呢？下面我们也来实现一下。

自定义overflow的背景

        要更改overflow中的item的背景，需要重写父类中的android:dropDownListViewStyle属性，并自定义Style--MyDropDownListView,其继承系统提供的android:style/Widget.Holo.ListView.DropDown，然后重写android:listSelector和android:background,前者作用是设置item选中时的背景样式，而android:background是设置整个overflow的背景。为了让整个ActioBar上的item都为白色，我们也可以重写android:actionOverflowButtonStyle这个属性来替换系统提供的overflow按钮(最右上角的三个点的小图标)。具体的代码如下：
[html] view plain copy
  1. <!-- Android3.0及以上ActionBar自定义的样式主题 -->  
  2.    <style name="MyActionBarTheme" parent="@android:style/Theme.Holo">  
  3.        <!-- 设置ActionBar Style -->  
  4.        <item name="android:actionBarStyle">@style/MyActionBar</item>  
  5.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  6.        <item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>  
  7.     <!-- 设置overflow按钮的图片资源 -->  
  8.     <item name="android:actionOverflowButtonStyle">@style/MyOverFlowButton</item>  
  9.     <!-- 设置overflow中items的背景和点击选中时的style -->  
  10.     <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>  
  11.    </style>  
  12.   
  13.    <!--Android3.0及以上ActionBar样式-->  
  14.    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">  
  15.        <!--设置ActionBar的背景-->  
  16.        <item name="android:background">@color/actionbar_background</item>  
  17.        <!--设置ActionBar的标题的样式-->  
  18.        <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>  
  19.    </style>  
  20.   
  21. <!--Android3.0及以上ActionBar字体样式 -->  
  22.    <style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">  
  23.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  24.    </style>  
  25.   
  26. <!--Android3.0及以上设置overflow按钮的图片资源 -->  
  27.    <style name="MyOverFlowButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">  
  28.        <item name="android:src">@drawable/actionbar_more_icon</item>  
  29.    </style>  
  30.   
  31. <!--Android3.0及以上设置overflow中items的背景和点击选中时的style-->  
  32.    <style name="MyDropDownListView" parent="@android:style/Widget.Holo.ListView.DropDown">  
  33.     <item name="android:listSelector">@drawable/choose_action_items_background</item>  
  34.     <item name="android:background">@color/actionbar_background</item>  
  35. </style>  
  36.   
  37.    <!---------------------------------------------------------------------->  
  38.     <!--Android2.1及以上ActionBar自定义的样式主题 -->  
  39.    <style name="MyActionBarTheme" parent="@style/Theme.AppCompat">  
  40.         <!-- 设置ActionBar Style -->  
  41.        <item name="actionBarStyle">@style/MyActionBar</item>  
  42.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  43.        <item name="selectableItemBackground">@drawable/choose_action_items_background</item>  
  44.     <!-- 设置overflow按钮的图片资源 -->  
  45.     <item name="actionOverflowButtonStyle">@style/MyOverFlowButton</item>  
  46.     <!-- 设置overflow中items的背景和点击选中时的style -->  
  47.     <item name="dropDownListViewStyle">@style/MyDropDownListView</item>  
  48.    </style>  
  49.      
  50.     <!--Android2.1及以上ActionBar样式-->  
  51.    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">  
  52.          
  53.        <!--设置ActionBar的背景-->  
  54.        <item name="background">@color/actionbar_background</item>  
  55.        <!--设置ActionBar的标题的样式-->  
  56.        <item name="titleTextStyle">@style/ActionBarTextStyle</item>  
  57.    </style>  
  58.   
  59. <!--Android2.1及以上ActionBar字体样式 -->  
  60.    <style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">  
  61.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  62.    </style>  
  63.   
  64. <!--Android2.1及以上设置overflow按钮的图片资源 -->  
  65.    <style name="MyOverFlowButton" parent="@style/Widget.AppCompat.ActionButton.Overflow">  
  66.        <item name="android:src">@drawable/actionbar_more_icon</item>  
  67.    </style>  
  68.   
  69. <!--Android2.1及以上设置overflow中items的背景和点击选中时的style-->  
  70.    <style name="MyDropDownListView" parent="android:style/Widget.AppCompat.ListView.DropDown">  
  71.     <item name="listSelector">@drawable/choose_action_items_background</item>  
  72.     <item name="background">@color/actionbar_background</item>  
  73. </style>  
然后运行程序，效果图如下：

如上图，实验成功！

自定义ActionBar Tabs背景

       接下来我们为ActionBar Tabs设置自定义背景，需要设置地方的一般分为两块，一个是ActionBar Tabs的字体颜色，另外一个是ActionBar Tab的背景。要设置字体颜色，需要重写父类中的android:actionBarTabTextStyle属性，并自定义继承自android:style/Widget.Holo.ActionBar.TabText的样式，重写android.textColor,然后设置我们所需要的字体颜色。而要设置ActionBar Tab背景，则需要重写父类中的android:actionBarTabStyle属性，并自定义继承自android:style/Widget.Holo.ActionBar.TabView的样式，重写android:background,最后设置背景色或背景图片。在这里我们设置背景的时候，采用设置背景图片的方式，那我们需要准备四张图片，如下：
                                                                        
这几张图片分别是在Tab不同状态下来显示，然后定义背景drawable,代码在res/drawable/tab_select_background.xml中，具体代码如下：
[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android"  
  3.      >  
  4.     <item  
  5.         android:state_pressed="false"  
  6.         android:state_selected="false"  
  7.         android:drawable="@drawable/tab_unselected_unpressed"  
  8.          />  
  9.     <item  
  10.         android:state_pressed="false"  
  11.         android:state_selected="true"  
  12.         android:drawable="@drawable/tab_selected_unpressed"  
  13.          />  
  14.     <item  
  15.         android:state_pressed="true"  
  16.         android:state_selected="false"  
  17.         android:drawable="@drawable/tab_unselected_pressed"  
  18.          />  
  19.     <item  
  20.         android:state_pressed="true"  
  21.         android:state_selected="true"  
  22.         android:drawable="@drawable/tab_selected_pressed"  
  23.           
  24.          />  
  25. </selector>  
下面再看看styles.xml文件中的具体的代码:
[html] view plain copy
  1. <!-- Android3.0及以上ActionBar自定义的样式主题 -->  
  2.    <style name="MyActionBarTheme" parent="@android:style/Theme.Holo">  
  3.        <!-- 设置ActionBar Style -->  
  4.        <item name="android:actionBarStyle">@style/MyActionBar</item>  
  5.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  6.        <item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>  
  7.     <!-- 设置overflow按钮的图片资源 -->  
  8.     <item name="android:actionOverflowButtonStyle">@style/MyOverFlowButton</item>  
  9.     <!-- 设置overflow中items的背景和点击选中时的style -->  
  10.     <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>  
  11.     <!-- 设置ActionBar Tab的字体颜色-->  
  12.     <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>  
  13.     <!-- 设置单个ActionBar Tab的样式背景 -->  
  14.     <item name="android:actionBarTabStyle">@style/MyActionBarTab</item>  
  15.    </style>  
  16.   
  17.    <!--Android3.0及以上ActionBar样式-->  
  18.    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">  
  19.        <!--设置ActionBar的背景-->  
  20.        <item name="android:background">@color/actionbar_background</item>  
  21.        <!--设置ActionBar的标题的样式-->  
  22.        <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>  
  23.    </style>  
  24.   
  25. <!--Android3.0及以上ActionBar字体样式 -->  
  26.    <style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">  
  27.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  28.    </style>  
  29.   
  30. <!--Android3.0及以上设置overflow按钮的图片资源 -->  
  31.    <style name="MyOverFlowButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">  
  32.        <item name="android:src">@drawable/actionbar_more_icon</item>  
  33.    </style>  
  34.   
  35. <!--Android3.0及以上设置overflow中items的背景和点击选中时的style-->  
  36.    <style name="MyDropDownListView" parent="@android:style/Widget.Holo.ListView.DropDown">  
  37.     <item name="android:listSelector">@drawable/choose_action_items_background</item>  
  38.     <item name="android:background">@color/actionbar_background</item>  
  39. </style>  
  40.   
  41. <!--Android3.0及以上设置ActionBar Tab的字体颜色-->  
  42.    <style name="MyActionBarTabText" parent="@android:style/Widget.Holo.ActionBar.TabText">  
  43.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  44.    </style>  
  45.      
  46.    <!--Android3.0及以上设置单个ActionBar Tab的样式背景 -->  
  47.     <style name="MyActionBarTab" parent="@android:style/Widget.Holo.ActionBar.TabView">  
  48.       <item name="android:background">@drawable/tab_select_background</item>  
  49.    </style>   
  50.   
  51.    <!---------------------------------------------------------------------->  
  52.     <!--Android2.1及以上ActionBar自定义的样式主题 -->  
  53.    <style name="MyActionBarTheme" parent="@style/Theme.AppCompat">  
  54.         <!-- 设置ActionBar Style -->  
  55.        <item name="actionBarStyle">@style/MyActionBar</item>  
  56.     <!--设置ActionBar中ActionItems的背景和点击选中时的style -->  
  57.        <item name="selectableItemBackground">@drawable/choose_action_items_background</item>  
  58.     <!-- 设置overflow按钮的图片资源 -->  
  59.     <item name="actionOverflowButtonStyle">@style/MyOverFlowButton</item>  
  60.     <!-- 设置overflow中items的背景和点击选中时的style -->  
  61.     <item name="dropDownListViewStyle">@style/MyDropDownListView</item>  
  62.       
  63.     <!-- 设置ActionBar Tab的字体颜色-->  
  64.     <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>  
  65.     <!-- 设置单个ActionBar Tab的样式背景 -->  
  66.     <item name="actionBarTabStyle">@style/MyActionBarTab</item>  
  67.    </style>  
  68.      
  69.     <!--Android2.1及以上ActionBar样式-->  
  70.    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">  
  71.          
  72.        <!--设置ActionBar的背景-->  
  73.        <item name="background">@color/actionbar_background</item>  
  74.        <!--设置ActionBar的标题的样式-->  
  75.        <item name="titleTextStyle">@style/ActionBarTextStyle</item>  
  76.    </style>  
  77.   
  78. <!--Android2.1及以上ActionBar字体样式 -->  
  79.    <style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">  
  80.        <item name="android:textColor">@color/actionbar_tab_textcolor</item>  
  81.    </style>  
  82.   
  83. <!--Android2.1及以上设置overflow按钮的图片资源 -->  
  84.    <style name="MyOverFlowButton" parent="@style/Widget.AppCompat.ActionButton.Overflow">  
  85.        <item name="android:src">@drawable/actionbar_more_icon</item>  
  86.    </style>  
  87.   
  88. <!--Android2.1及以上设置overflow中items的背景和点击选中时的style-->  
  89.    <style name="MyDropDownListView" parent="android:style/Widget.AppCompat.ListView.DropDown">  
  90.     <item name="listSelector">@drawable/choose_action_items_background</item>  
  91.     <item name="background">@color/actionbar_background</item>  
  92. </style>  
  93.   
  94. <!--Android2.1及以上设置ActionBar Tab的字体颜色-->  
  95.    <style name="MyActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText">  
  96.        <item name="textColor">@color/actionbar_tab_textcolor</item>  
  97.    </style>  
  98.      
  99.    <!-- Android2.1及以上设置单个ActionBar Tab的样式背景 -->  
  100.     <style name="MyActionBarTab" parent="@style/Widget.AppCompat.ActionBar.TabView">  
  101.       <item name="background">@drawable/tab_select_background</item>  
  102.    </style>   
然后运行程序，效果图如下：

自此，我们基本学习了自定义ActionBar Style的大部分知识点，我们完全可以根据我们项目产品的各自主题风格，自定义自己的ActionBar样式。

总结：通过学习两篇关于ActionBar组件的博文，我们基本上已经掌握了使用ActionBar的大部分方法。其实学习如何使用ActionBar难度并不大，我们只需要熟悉其设置的属性方法就行，关键的是在设计界面的时候，能够使得界面交互有良好的用户体验。

下载源代码，请戳下面：
  • GITHUB下载;
  • CSDN下载;

0 0
毕业设计的要求与数据 毕业设计的要求与数据
原创粉丝点击
热门IT博客
mysql shell 是什么mysql shell 是什么
怎么配置java开发环境怎么配置java开发环境
淘宝萌域mpuyu
阿的江女儿阿迪那知乎
sql注入原理及防范
中国电信网络重构
网络空间安全 科研
微信里淘宝链接
盐城淘宝美工培训
python格式化输出变量
淘宝网男士红色衬衣
java人事管理系统项目
iphone6s连不上网络
淘宝的c2c
自媒体点击软件
手机缩水软件
保利地产怎么样知乎
矩阵的初等变换规则
医院防统方软件
淘宝地区下拉选择
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 手机直播老掉怎么办 洋葱不辣眼睛怎么办 棉布衣服皱了怎么办 裤子后面太皱怎么办 裙子腰围大了怎么办 aj11鞋后褶皱怎么办 光脚穿凉鞋黏脚怎么办 衬衫全是褶皱怎么办 真丝衣服容易皱怎么办 衬衫买小了怎么办 aj前面有褶皱怎么办 烧伤扒皮和痒怎么办 真丝洗皱了怎么办 icloud邮箱密码忘记怎么办 win10账号已停用怎么办 12306忘了密码怎么办 12306换号了怎么办 在12306忘记账号怎么办 12306证件号码被注册怎么办 铁路12306忘记邮箱怎么办 手机邮箱开通!怎么办呢 qq邮箱忘记密码怎么办 忘记支付宝邮箱怎么办 jd白条逾期了怎么办 哺乳期吃了人参怎么办 喂奶吃了茄子怎么办 哺乳期吃了茄子怎么办 轴承的密封盖好掉怎么办 信用卡欠5万怎么办 工作中邮件太多怎么办 outlook邮件撤回失败怎么办 qq邮箱附件太大怎么办 天命之子记得id怎么办 淘宝有删除评论怎么办? 吃鸡号邮箱被改怎么办 衣柜钥匙丢了怎么办 微信久了不登录怎么办 win10触摸板失效怎么办 功夫贷逾期了怎么办 高考密码重置后怎么办 无线网密码重置怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里