Android ActionBar学习(二) -- 自定义ActionBar Style
转载请注明出处：http://blog.csdn.net/yegongheng/article/details/38659147
上一篇文章我们初步了解了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/>节点，例如：
<uses-sdk
android:minSdkVersion="8"
android:maxSdkVersion="14"
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背景
我们拿实例中的Scr
eenSecondActivity实验，为其ActionBar自定义Theme Style,首先看一下该ActionBar默认的Theme Style,如图下：
接着我们设置ActionBar的背景， 首先我们在项目中的res/values/styles.xml文件中定义自己的<style/>节点，名为MyActionBarTheme，然后再设置相关ActionBar背景属性。
具体代码如下：
<!-- 第二步 -->
<!-- Android3.0及以上ActionBar自定义的样式主题 -->
<style name="MyActionBarTheme" parent="@android:style/Theme.Holo">
<!-- 设置ActionBar Style -->
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!--设置ActionBar中ActionItems的背景和点击选中时的style -->
<item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>
</style>
<!--Android3.0及以上ActionBar样式-->
<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
<!--设置ActionBar的背景-->
<item name="android:background">@color/actionbar_background</item>
<!--设置ActionBar的标题的样式-->
<item name="android:titleTextStyle">@style/ActionBarTextStyle</item>
</style>
<!--Android3.0及以上ActionBar字体样式 -->
<style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_tab_textcolor</item>
</style>
<!---------------------------------------------------------------------->
<!--Android2.1及以上ActionBar自定义的样式主题 -->
<style name="MyActionBarTheme" parent="@style/Theme.AppCompat">
<!-- 设置ActionBar Style -->
<item name="actionBarStyle">@style/MyActionBar</item>
<!--设置ActionBar中ActionItems的背景和点击选中时的style -->
<item name="selectableItemBackground">@drawable/choose_action_items_background</item>
</style>
<!--Android2.1及以上ActionBar样式-->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">
<!--设置ActionBar的背景-->
<item name="background">@color/actionbar_background</item>
<!--设置ActionBar的标题的样式-->
<item name="titleTextStyle">@style/ActionBarTextStyle</item>
</style>
<!--Android2.1及以上ActionBar字体样式 -->
<style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_tab_textcolor</item>
</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，代码如下：
<activity
android:name="com.androidleaf.actionbar.activity.ScreenSecondActivity"
android:logo="@drawable/sys_icon"
android:label="@string/main_title"
android:theme="@style/MyActionBarTheme"
>
然后运行程序，效果图如图下：
如上图，我们成功将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按钮(最右上角的三个点的小图标)。具体的代码如下：
<!-- Android3.0及以上ActionBar自定义的样式主题 -->
<style name="MyActionBarTheme" parent="@android:style/Theme.Holo">
<!-- 设置ActionBar Style -->
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!--设置ActionBar中ActionItems的背景和点击选中时的style -->
<item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>
<!-- 设置overflow按钮的图片资源 -->
<item name="android:actionOverflowButtonStyle">@style/MyOverFlowButton</item>
<!-- 设置overflow中items的背景和点击选中时的style -->
<item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
</style>
<!--Android3.0及以上ActionBar样式-->
<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
<!--设置ActionBar的背景-->
<item name="android:background">@color/actionbar_background</item>
<!--设置ActionBar的标题的样式-->
<item name="android:titleTextStyle">@style/ActionBarTextStyle</item>
</style>
<!--Android3.0及以上ActionBar字体样式 -->
<style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_tab_textcolor</item>
</style>
<!--Android3.0及以上设置overflow按钮的图片资源 -->
<style name="MyOverFlowButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">@drawable/actionbar_more_icon</item>
</style>
<!--Android3.0及以上设置overflow中items的背景和点击选中时的style-->
<style name="MyDropDownListView" parent="@android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">@drawable/choose_action_items_background</item>
<item name="android:background">@color/actionbar_background</item>
</style>
<!---------------------------------------------------------------------->
<!--Android2.1及以上ActionBar自定义的样式主题 -->
<style name="MyActionBarTheme" parent="@style/Theme.AppCompat">
<!-- 设置ActionBar Style -->
<item name="actionBarStyle">@style/MyActionBar</item>
<!--设置ActionBar中ActionItems的背景和点击选中时的style -->
<item name="selectableItemBackground">@drawable/choose_action_items_background</item>
<!-- 设置overflow按钮的图片资源 -->
<item name="actionOverflowButtonStyle">@style/MyOverFlowButton</item>
<!-- 设置overflow中items的背景和点击选中时的style -->
<item name="dropDownListViewStyle">@style/MyDropDownListView</item>
</style>
<!--Android2.1及以上ActionBar样式-->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">
<!--设置ActionBar的背景-->
<item name="background">@color/actionbar_background</item>
<!--设置ActionBar的标题的样式-->
<item name="titleTextStyle">@style/ActionBarTextStyle</item>
</style>
<!--Android2.1及以上ActionBar字体样式 -->
<style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_tab_textcolor</item>
</style>
<!--Android2.1及以上设置overflow按钮的图片资源 -->
<style name="MyOverFlowButton" parent="@style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">@drawable/actionbar_more_icon</item>
</style>
<!--Android2.1及以上设置overflow中items的背景和点击选中时的style-->
<style name="MyDropDownListView" parent="android:style/Widget.AppCompat.ListView.DropDown">
<item name="listSelector">@drawable/choose_action_items_background</item>
<item name="background">@color/actionbar_background</item>
</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中，具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="false"
android:state_selected="false"
android:drawable="@drawable/tab_unselected_unpressed"
/>
<item
android:state_pressed="false"
android:state_selected="true"
android:drawable="@drawable/tab_selected_unpressed"
/>
<item
android:state_pressed="true"
android:state_selected="false"
android:drawable="@drawable/tab_unselected_pressed"
/>
<item
android:state_pressed="true"
android:state_selected="true"
android:drawable="@drawable/tab_selected_pressed"
/>
</selector>
下面再看看styles.xml文件中的具体的代码:
<!-- Android3.0及以上ActionBar自定义的样式主题 -->
<style name="MyActionBarTheme" parent="@android:style/Theme.Holo">
<!-- 设置ActionBar Style -->
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!--设置ActionBar中ActionItems的背景和点击选中时的style -->
<item name="android:selectableItemBackground">@drawable/choose_action_items_background</item>
<!-- 设置overflow按钮的图片资源 -->
<item name="android:actionOverflowButtonStyle">@style/MyOverFlowButton</item>
<!-- 设置overflow中items的背景和点击选中时的style -->
<item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
<!-- 设置ActionBar Tab的字体颜色-->
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<!-- 设置单个ActionBar Tab的样式背景 -->
<item name="android:actionBarTabStyle">@style/MyActionBarTab</item>
</style>
<!--Android3.0及以上ActionBar样式-->
<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
<!--设置ActionBar的背景-->
<item name="android:background">@color/actionbar_background</item>
<!--设置ActionBar的标题的样式-->
<item name="android:titleTextStyle">@style/ActionBarTextStyle</item>
</style>
<!--Android3.0及以上ActionBar字体样式 -->
<style name="ActionBarTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_tab_textcolor</item>
</style>
<!--Android3.0及以上设置overflow按钮的图片资源 -->
<style name="MyOverFlowButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">@drawable/actionbar_more_icon</item>
</style>
<!--Android3.0及以上设置overflow中items的背景和点击选中时的style-->
<style name="MyDropDownListView" parent="@android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">@drawable/choose_action_items_background</item>
<item name="android:background">@color/actionbar_background</item>
</style>
<!--Android3.0及以上设置ActionBar Tab的字体颜色-->
<style name="MyActionBarTabText" parent="@android:style/Widget.Holo.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_tab_textcolor</item>
</style>
<!--Android3.0及以上设置单个ActionBar Tab的样式背景 -->
<style name="MyActionBarTab" parent="@android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">@drawable/tab_select_background</item>
</style>
<!---------------------------------------------------------------------->
<!--Android2.1及以上ActionBar自定义的样式主题 -->
<style name="MyActionBarTheme" parent="@style/Theme.AppCompat">
<!-- 设置ActionBar Style -->
<item name="actionBarStyle">@style/MyActionBar</item>
<!--设置ActionBar中ActionItems的背景和点击选中时的style -->
<item name="selectableItemBackground">@drawable/choose_action_items_background</item>
<!-- 设置overflow按钮的图片资源 -->
<item name="actionOverflowButtonStyle">@style/MyOverFlowButton</item>
<!-- 设置overflow中items的背景和点击选中时的style -->
<item name="dropDownListViewStyle">@style/MyDropDownListView</item>
<!-- 设置ActionBar Tab的字体颜色-->
<item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
<!-- 设置单个ActionBar Tab的样式背景 -->
<item name="actionBarTabStyle">@style/MyActionBarTab</item>
</style>
<!--Android2.1及以上ActionBar样式-->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">
<!--设置ActionBar的背景-->
<item name="background">@color/actionbar_background</item>
<!--设置ActionBar的标题的样式-->
<item name="titleTextStyle">@style/ActionBarTextStyle</item>
</style>
<!--Android2.1及以上ActionBar字体样式 -->
<style name="ActionBarTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_tab_textcolor</item>
</style>
<!--Android2.1及以上设置overflow按钮的图片资源 -->
<style name="MyOverFlowButton" parent="@style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">@drawable/actionbar_more_icon</item>
</style>
<!--Android2.1及以上设置overflow中items的背景和点击选中时的style-->
<style name="MyDropDownListView" parent="android:style/Widget.AppCompat.ListView.DropDown">
<item name="listSelector">@drawable/choose_action_items_background</item>
<item name="background">@color/actionbar_background</item>
</style>
<!--Android2.1及以上设置ActionBar Tab的字体颜色-->
<style name="MyActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText">
<item name="textColor">@color/actionbar_tab_textcolor</item>
</style>
<!-- Android2.1及以上设置单个ActionBar Tab的样式背景 -->
<style name="MyActionBarTab" parent="@style/Widget.AppCompat.ActionBar.TabView">
<item name="background">@drawable/tab_select_background</item>
</style>
然后运行程序，效果图如下：
自此，我们基本学习了自定义ActionBar Style的大部分知识点，我们完全可以根据我们项目产品的各自主题风格，自定义自己的ActionBar样式。
总结：通过学习两篇关于ActionBar组件的博文，我们基本上已经掌握了使用ActionBar的大部分方法。其实学习如何使用ActionBar难度并不大，我们只需要熟悉其设置的属性方法就行，关键的是在设计界面的时候，能够使得界面交互有良好的用户体验。
下载源代码，请戳下面：
- GITHUB下载;
- CSDN下载;