【Android 应用开发】 ActionBar 样式具体解释 -- 样式主题简单介绍 Actionbar 的 icon logo 标题菜单样式改动...

川长思鸟来 2021-09-17 12:58 347阅读 0赞

**作者 : 万境绝尘 (octopus\_truth@163.com)**

**转载请著名出处: [http://blog.csdn.net/shulianghan/article/details/39269163][http_blog.csdn.net_shulianghan_article_details_39269163]**

**演示样例代码下载** :

**-- GitHub : [https://github.com/han1202012/Octopus\_ActionBarStyle.git ][https_github.com_han1202012_Octopus_ActionBarStyle.git]**

**-- CSDN : **[**http://download.csdn.net/detail/han1202012/7926959**][http_download.csdn.net_detail_han1202012_7926959]

# 一. 样式 和 主题 资源 #

## 1. 样式资源解析 ##

### (1) 样式简单介绍 ###

**样式解析** : 样式是设置给 View 组件的**多个属性的集合**;

\-- **样式的优点** : 给一个 TextView 设置 文字大小, 颜色, 对齐方式等, 假设须要给多个 TextView 设置同样的属性, 这里使用样式就能够大大节省了代码量;

**样式指定** : 每一个 View 组件都有一个 **style** 属性, 能够通过该属性指定 样式, 注意与 android:style 属性区分;

### (2) 样式标签定义 ###

**样式定义的位置** : **/res/values/** 文件夹下的 跟标签是 **<resources />** 标签的 xml 文件, 如默认的 styles.xml 文件;

**样式标签解析** : <style /> 标签在 <resources /> 标签内, <style /> 标签的子标签是 <item />;

\-- **根标签** : <style /> 标签都是定义在 <resources /> 标签内部;

\-- **子标签** : <item /> 标签是 <style /> 标签的子标签, 其定义了详细的 View 组件的属性;

**<style /> 标签属性** :

\-- **name 属性** : 指定样式的名称, 如 定义 TextView 组件, name 属性能够是 "android:textColor" 等 TextView 组件的属性;

\-- **parent 属性** : <style /> 标签能够继承另外一个标签, 该标签会获得被集成标签的全部属性格式, 反复定义属性格式, 子标签的属性会覆盖父标签的属性;

### (3) 样式演示样例  ###

**样式资源文件** :

xml version="1.0" encoding="utf-8"?> <resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="text1"> <item name="android:gravity">center</item> <item name="android:textColor">@android:color/holo\_green\_dark</item> <item name="android:textSize">30dp</item> <item name="android:textStyle">bold</item> <item name="android:padding">20dip</item> <item name="android:background">@android:color/holo\_orange\_light</item> </style> <style name="text2"> <item name="android:gravity">center</item> <item name="android:textColor">@android:color/holo\_blue\_dark</item> <item name="android:textSize">40dp</item> <item name="android:textStyle">italic</item> <item name="android:padding">30dip</item> <item name="android:background">@android:color/holo\_red\_light</item> </style> </resources>

**布局文件** :

**页面展示效果** :

![20140915195018786][]

## 2. 主题资源解析 ##

### (1) 主题资源 与 样式资源比較 ###

**主题资源 与 样式资源 同样点** : 定义方式基本同样, 都是在 /res/values 文件夹下的 带 <resources /> 根标签的 xml 中定义;

**主题资源 与 样式资源 不同点** :

\-- **作用范围** : 样式资源一般作用于 **单个 View 组件**, 主题资源作用于 **整个 Application 应用** 或者 **指定的 Activity**, Theme 是在 AndroidManifest.xml 中指定的;

\-- **属性内容** : 主题资源一般用于定义改变窗体的外观格式等;

### (2) Theme 主题设置方法 ###

**Theme 主题用法** :

\-- **在 Manifest.xml 文件里配置** : 为 <application /> 或者 <activity /> 标签设置 android.theme 属性 "@style/style\_name", 设置的也是一个 style 样式属性;

\-- **Activity 代码中设置** : 在 onCreate() 方法的 setContentView() 方法之前调用 setTheme(R.style.style\_name) 方法设置 Theme 主题, 假设在 setComtentView 之后调用就不会起作用;

### (3) Android 系统定义的 Theme  ###

android:theme="@android:style/Theme.Dialog" : Activity显示为对话框模式
    android:theme="@android:style/Theme.NoTitleBar" : 不显示应用程序标题栏
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen" : 不显示应用程序标题栏。并全屏
    android:theme="Theme.Light ": 背景为白色
    android:theme="Theme.Light.NoTitleBar" : 白色背景并无标题栏
    android:theme="Theme.Light.NoTitleBar.Fullscreen" : 白色背景，无标题栏，全屏
    android:theme="Theme.Black" : 背景黑色
    android:theme="Theme.Black.NoTitleBar" : 黑色背景并无标题栏
    android:theme="Theme.Black.NoTitleBar.Fullscreen" : 黑色背景，无标题栏，全屏
    android:theme="Theme.Wallpaper" : 用系统桌面为应用程序背景
    android:theme="Theme.Wallpaper.NoTitleBar" : 用系统桌面为应用程序背景，且无标题栏
    android:theme="Theme.Wallpaper.NoTitleBar.Fullscreen" : 用系统桌面为应用程序背景，无标题栏。全屏
    android:theme="Theme.Translucent : 透明背景
    android:theme="Theme.Translucent.NoTitleBar" : 透明背景并无标题
    android:theme="Theme.Translucent.NoTitleBar.Fullscreen" : 透明背景并无标题。全屏
    android:theme="Theme.Panel ": 面板风格显示
    android:theme="Theme.Light.Panel" : 平板风格显示

### (4) 经常使用的 Theme 设置属性 ###

<item name="windowBackground">@android:drawable/screen_background_selector_dark</item> 界面背景图片
            <item name="windowFrame">@null</item>	界面前景图片
            <item name="windowNoTitle">false</item>	是否带有标题
            <item name="windowFullscreen">false</item>	是否全屏
            <item name="windowIsFloating">false</item>	是否是悬浮窗

### (5) Theme 演示样例程序 ###

**style 样式** :

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <style name="octopus_style">
            <item name="android:windowBackground">@drawable/bg1</item>
            <item name="android:windowFullscreen">true</item>
            <item name="android:windowNoTitle">true</item>
            <item name="android:windowIsFloating">true</item>
        </style>
    </resources>

**Manifest.xml 中配置** :

**页面演示样例** :

![20140916112813498][]

# 二. ActionBar 样式解析 #

## 1. AppTheme 解析 ##

### (1) AppTheme 引入 ###

**在 AndroidManifest.xml 中默认的主题** : AppTheme, AppTheme 是在 /res/alues/style.xml 中定义的;

### (2) AppTheme 定义 ###

**style.xml 文件** : 该文件定义了 **AppTheme** 主题;

\-- **代码演示样例** :

\-- **代码解析** : AppTheme 主题继承了 AppBaseTheme 主题, 而 AppBaseTheme 主题确不是固定的, 在 /res/values-v14 中的 style.xml 中也定义了 AppBaseTheme, 该 AppBaseTheme 能够覆盖 在 res/values/style.xml 中定义的主题;

## 2. AppBaseTheme 解析 ##

### (1) AppBaseTheme 简单介绍  ###

**AppBaseTheme 简单介绍** :

\-- **AppBaseTheme 父类** : 在 Android project创建时会有一个选择 Theme 的标题样式, AppBaseTheme 就会继承这个样式;

\-- **AppBaseTheme 位置** : 在 Android project中, **/res/values/style.xml /res/vaules-v11/style.xml res/values-v14/style.xml** 中都定义了 AppBaseTheme 主题;

\-- **style 样式优先级** : 定义在 **values-vxx 中的样式**的**优先级**会高于 定义在 **values 中的样式**, 假设有反复定义 优先级高的会覆盖优先级低的;

### (2) AppBaseTheme 代码分析 ###

**定义在 /res/values/style.xml 中的 AppBaseTheme** : 该主题依赖于 API 版本号, 假设在相应版本号的 values 中定义了 AppBaseTheme , 会覆盖该项;

<style name="AppBaseTheme" parent="android:Theme.Light">
            
        </style>

**定义在 /res/values-11/style.xml 中的 AppBaseTheme**  : 假设 API 的版本号 高于 11, 就会默认使用该 AppBaseTheme;

**定义在 /res/values-14/style.xml 中的 AppBaseTheme**  : 假设 API 的版本号 高于 14, 就会默认使用该 AppBaseTheme;

## 3. Activity 主题样式 android:Theme.Holo.Light.DarkActionBar  ##

**这里我们分析 API-14 相应的主题样式** : 在上面的 **/res/values-v14/style.xml** 中定义的 AppBaseTheme 假设在 API-14 的情况下继承的是 android:Theme.Holo.Light.DarkActionBar 主题样式, 该主题定义在 **sdk/platforms/android-19/data/res/values/themes.xml** 文件里;

\-- **代码演示样例** :

<style name="Theme.Holo.Light.DarkActionBar">
            <item name="android:windowContentOverlay">@android:drawable/ab_solid_shadow_holo</item>
            <item name="android:actionBarStyle">@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse</item>
            <item name="actionBarWidgetTheme">@android:style/Theme.Holo</item>
    
            <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="homeAsUpIndicator">@android:drawable/ic_ab_back_holo_dark</item>
            <item name="actionBarTabStyle">@style/Widget.Holo.Light.ActionBar.TabView.Inverse</item>
            <item name="actionBarTabBarStyle">@style/Widget.Holo.Light.ActionBar.TabBar.Inverse</item>
            <item name="actionBarTabTextStyle">@style/Widget.Holo.Light.ActionBar.TabText.Inverse</item>
            <item name="actionBarDivider">@android:drawable/list_divider_holo_dark</item>
            <item name="actionBarItemBackground">@android:drawable/item_background_holo_dark</item>
            <item name="actionMenuTextColor">?

android:attr/textColorPrimaryInverse</item> <item name="actionModeStyle">@style/Widget.Holo.Light.ActionMode.Inverse</item> <item name="actionModeCloseButtonStyle">@style/Widget.Holo.ActionButton.CloseMode</item> <item name="actionModePopupWindowStyle">@android:style/Widget.Holo.PopupWindow.ActionMode</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> </style>

### (1) ActionBar 样式  ###

**android:actionBarStyle 样式作用** : 定义 ActionBar 的 标题 副标题样式, 背景, 切割条, 进度条样式等;

**属性名称** : android:actionBarStyle, 样式的名称为 Widget.Holo.Light.ActionBar.Solid.Inverse, 该样式定义在  **sdk/platforms/android-19/data/res/values/styles.xml** 中** . **

<item name="android:actionBarStyle">@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse</item>

**Widget.Holo.Light.ActionBar.Solid.Inverse 样式详细内容** :

**重要的属性解析** :

\-- **android:titleTextStyle** : 标题样式, 能够改动标题文字相关的属性;

\-- **android:subtitleTextStyle** : 副标题样式;

\-- **android:background** : 背景, 能够改动 ActionBar 背景;

### (2) ActionBar button样式 ###

**actionButtonStyle 样式作用** : 控制 ActionBar 上的button样式, 如 菜单button等;

**ActionBar button属性** : **actionButtonStyle**, 属性值为 **@android:style/Widget.Holo.ActionButton** ;

<item name="actionButtonStyle">@android:style/Widget.Holo.ActionButton</item>

**android:style/Widget.Holo.ActionButton 详细属性** : 该样式继承了 Widget.ActionButton 样式;

\-- **Widget.ActionButton 样式** :

### (3) Tab 标签样式 ###

**actionBarTabStyle 样式作用** : 定义 ActionBar Tab 导航时 Tab 标签样式;

**Tab 标签样式属性** : actionBarTabStyle, 样式为 @style/Widget.Holo.Light.ActionBar.TabView.Inverse, 该样式为 空, 未定义不论什么属性;

item name="actionBarTabStyle">@style/Widget.Holo.Light.ActionBar.TabView.Inverse</item>

### (4) 其他样式 ###

**actionBarDivider 样式** : ActionBar 各项目之间的分隔符, 指定了一个 drawable 资源;

<item name="actionBarDivider">@android:drawable/list_divider_holo_dark</item>

**菜单文字颜色** : actionMenuTextColor, 指定菜单中文字的颜色;

<item name="actionMenuTextColor">?android:attr/textColorPrimaryInverse</item>

**actionBarTabBarStyle 样式** : 定义 ActionBar Tab 导航中 Tab 的切割条, 指定一个 drawable 资源;

<item name="actionBarTabBarStyle">@style/Widget.Holo.Light.ActionBar.TabBar.Inverse</item>

**actionDropDownStyle 样式** : 指定 ActionBar List 导航 下拉列表样式;

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

# 三. 自己定义 ActionBar 样式 #

**默认的 ActionBar 样式** :

![20140916161135312][]

## 1. 自己定义标题样式 ##

### (1) 样式解析  ###

**查找标题样式定义位置** :

\-- **样式的继承关系** : AppTheme 是直接使用的样式, AppTheme 继承了 AppBaseTheme, AppBaseTheme 继承了 android:Theme.Holo.Light.DarkActionBar 样式;

\-- **标题样式位置** : android:titleTextStyle 样式在 android:actionBarStyle 中定义, android:actionBarStyle 在 android:Theme.Holo.Light.DarkActionBar 中定义;

\-- **层次关系** : AppTheme 与 AppBaseTheme android:Theme.Holo.Light.DarkActionBar 是继承关系, 是同一层次的, 包括 android:actionBarStyle 样式, android:actionBarStyle 样式 包括 android:titleTextStyle 样式;

**在 AppTheme 中覆盖 标题样式方法** :

\-- **须要实现一个 ****android:actionBarStyle 子样式** : 由于 AppTheme 层次高于 android:titleTextStyle 两层, 不能直接在 AppTheme 中定义该样式进行覆盖, 须要实现一个 android:actionBarStyle 子样式, 在该子样式中又一次定义 android:titleTextStyle 样式, 就可以覆盖掉标题样式;

\-- **实现一个 android:titleTextStyle 子样式** : 该样式 也须要继承原样式, 覆盖一些属性;

\-- **AppTheme 又一次定义 ****android:actionBarStyle 样式** : 上面将 android:actionBarStyle 样式 和 android:titleTextStyle 样式覆盖, 这里将已经重写的标题栏样式设置给 android:actionBarStyle 就可以;

### (2) 系统默认样式  ###

**AppTheme** :

<style name="AppTheme" parent="AppBaseTheme">
            
        </style>

**AppBaseTheme** :

**Theme.Holo.Light.DarkActionBar** :

**Widget.Holo.Light.ActionBar.Solid.Inverse** :

### (3) 样式定义 ###

**重写 android:titleTextStyle 样式** :

<style 
            name="OctopusActionBarTittle" 
            parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">
            <item name="android:textColor">@android:color/holo_green_dark</item>
            <item name="android:textStyle">italic</item>
            <item name="android:textSize">25sp</item>
        </style>

**重写 android:actionBarStyle 样式** :

<style 
            name="OctopusActionBarStyle" 
            parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        	<item name="android:titleTextStyle">@style/OctopusActionBarTittle</item>
    	</style>

**覆盖 android:actionBarStyle 样式** :

<style name="AppTheme" parent="AppBaseTheme">
            
            <item name="android:actionBarStyle">@style/OctopusActionBarStyle</item>
        </style>

### (4) 代码演示样例 ###

**/res/values/styles.xml 代码** :

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <style name="AppBaseTheme" parent="android:Theme.Light">
            
        </style>
    
        
        <style name="AppTheme" parent="AppBaseTheme">
            
            <item name="android:actionBarStyle">@style/OctopusActionBarStyle</item>
        </style>
        
        
        <style 
            name="OctopusActionBarStyle" 
            parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        	<item name="android:titleTextStyle">@style/OctopusActionBarTittle</item>
    	</style>
        
        
        <style 
            name="OctopusActionBarTittle" 
            parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">
            <item name="android:textColor">@android:color/holo_green_dark</item>
            <item name="android:textStyle">italic</item>
            <item name="android:textSize">25sp</item>
        </style>
    </resources>

**界面效果** :

![20140916170525328][]

## 2. 自己定义菜单文字样式 ##

### (1) 系统默认样式 ###

**默认样式下的界面显示** :

![20140916173034881][]

### (2) 自己定义菜单 ###

**自己定义菜单样式** :

<style 
            name="OctopusMenuTittleStyle"
            parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">
            <item name="android:textColor">@android:color/white</item>
            <item name="android:textStyle">bold</item>
            <item name="android:textSize">20sp</item>
        </style>

**AppTheme 中覆盖 android:actionMenuTextAppearance 属性** :

### (3) 代码演示样例 ###

**完整 /res/values/styles.xml 代码** :

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <style name="AppBaseTheme" parent="android:Theme.Light">
            
        </style>
    
        
        <style name="AppTheme" parent="AppBaseTheme">
            
            <item name="android:actionBarStyle">@style/OctopusActionBarStyle</item>
            
            
            <item name="android:actionMenuTextAppearance">@style/OctopusMenuTittleStyle</item>
        </style>
        
        
        <style 
            name="OctopusActionBarStyle" 
            parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        	<item name="android:titleTextStyle">@style/OctopusActionBarTittle</item>
    	</style>
        
        
        <style 
            name="OctopusActionBarTittle" 
            parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">
            <item name="android:textColor">@android:color/holo_green_dark</item>
            <item name="android:textStyle">italic</item>
            <item name="android:textSize">25sp</item>
        </style>
        
        
        <style 
            name="OctopusMenuTittleStyle"
            parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">
            <item name="android:textColor">@android:color/white</item>
            <item name="android:textStyle">bold</item>
            <item name="android:textSize">20sp</item>
        </style>
    </resources>

**界限展示效果** :

![20140916173634062][]

## 3. 改动 ActionBar 背景色 ##

**在 android:actionBarStyle 样式中改动就可以** :

**界面效果** :

![20140916181815926][]

## 4. 自己定义左側的小箭头 ##

**在 Activity 中加入代码** : 显示 左側的小箭头;

\-- **显示箭头代码** :

/* 获取 ActionBar 对象 */
    		ActionBar actionBar = getActionBar();
    		/* 设置标题可点击, 而且加入 向左的小箭头 */
    		actionBar.setDisplayHomeAsUpEnabled(true);

\--  **效果** : 箭头太小, 且不美观;

![20140916182341577][]

**小箭头定义位置** : 小箭头 在 Theme.Holo.Light.DarkActionBar 样式中定义;

<item name="homeAsUpIndicator">@android:drawable/ic_ab_back_holo_dark</item>

**自己定义小箭头** : 直接在 AppTheme 样式下 重写 android:homeAsUpIndicator 属性就可以

<style name="AppTheme" parent="AppBaseTheme">
            
            <item name="android:actionBarStyle">@style/OctopusActionBarStyle</item>
            
            
            <item name="android:actionMenuTextAppearance">@style/OctopusMenuTittleStyle</item>
            
            
            <item name="android:homeAsUpIndicator">@drawable/back</item>
        </style>

\-- **界面效果** :

![20140916183104609][]

**作者 : 万境绝尘 (octopus\_truth@163.com)**

**转载请著名出处 : [http://blog.csdn.net/shulianghan/article/details/39269163][http_blog.csdn.net_shulianghan_article_details_39269163]**

**演示样例代码下载** :

**-- GitHub : [https://github.com/han1202012/Octopus\_ActionBarStyle.git ][https_github.com_han1202012_Octopus_ActionBarStyle.git]**

**-- CSDN : [http://download.csdn.net/detail/han1202012/7926959][http_download.csdn.net_detail_han1202012_7926959]**

[http_blog.csdn.net_shulianghan_article_details_39269163]: http://blog.csdn.net/shulianghan/article/details/39269163
[https_github.com_han1202012_Octopus_ActionBarStyle.git]: https://github.com/han1202012/Octopus_ActionBarStyle.git
[http_download.csdn.net_detail_han1202012_7926959]: http://download.csdn.net/detail/han1202012/7926959
[20140915195018786]: /images/20210726/4ef2c9e25be746baa687fc7b71a114fa.png
[20140916112813498]: /images/20210726/9aef440e3734492eb296d255093ba996.png
[20140916161135312]: /images/20210726/10fe1c9e07324f3596ecd8787d5c4c0c.png
[20140916170525328]: /images/20210726/84e0869b2da643d3974856fc537a51e8.png
[20140916173034881]: /images/20210726/97419c85ce644c17838893736859e207.png
[20140916173634062]: /images/20210726/ac180b956f544b47ada8a3c36f92792c.png
[20140916181815926]: /images/20210726/3c4092078e2e449984055942aa3d2c61.png
[20140916182341577]: /images/20210726/d51521cc1d2d447ebad42db2566ffadc.png
[20140916183104609]: /images/20210726/57a1a24ddc954e6da4001064765636fc.png