您的位置:首页 > 产品设计 > UI/UE

【Android UI设计与开发】第13期:顶部标题栏(四)自定义ActionBar风格和样式

2014-02-12 17:10 555 查看
这篇文章将对ActionBar专题前面几篇学习过的内容做一个总结,顺便运用以前学过的知识实现一个自定义样式的ActionBar标题栏效果。话不多说,进入今天的正题。

一、实现效果图

竖屏效果图:最左边是Logo图标,右边是工具栏按钮,点击Menu键显示其余的按钮键,下方是Tab标签选项。





横屏效果图:竖屏中的Tab选项标签变成了中间的下拉导航按钮













二、项目结构图



三、编码准备工作

先来学习一下自定义样式的基础知识,以便大家能看懂关于后面的代码。

1、设置操作栏的样式

如果你对应用程序中的可视构件进行了定制化的设计,那么你可能也会要对操作栏做一些重新设计,以便跟应用程序的设计匹配。要这样做的话,需要使用Android的样式与主题框架中的一些特殊的样式属性来重新设置操作栏的样式。

注意:改变外观的背景图片依赖与当前按钮的状态(选择、按下、解除选择),因此你使用的可描画的资源必须是一个可描画的状态列表。

警告:对于你提供的所有可描画的背景,要确保使用NinePatch类型可描画资源,以便允许图片的拉伸。NinePatch类型的图片应该比40像素高30像素宽的图片要小。

2、普通的外观

android:windowActionBarOverlay

这个属性声明了操作栏是否应该覆盖Activity布局,而不是相对Activity的布局位置的偏移。这个属性的默认值是false。

通常,在屏幕上,操作栏需要它自己的空间,并且把剩下的空间用来填充Activity的布局。当操作栏四覆盖模式时,Activity会使用所有的有效空间,系统会在Activity的上面描画操作栏。如果你想要在操作栏隐藏和显示时,布局中的内容保持固定的尺寸好位置,那么这种覆盖模式是有用的。你也可能只是为了显示效果来使用它,因为你可以给操作栏设置半透明的背景,以便用户依然能够看到操作栏背后的Activity布局。

注意:默认情况下,Holo主题会用半透明背景来描画操作栏。但是,你能够用自己的样式来修改它,并且默认的情况下,DeviceDefault主题在不同的设备上可能使用不透明的背景。

覆盖模式被启用时,Activity布局不会感知到操作栏覆盖在它的上面,因此,在操作栏覆盖的区域,最好不要放置一些重要的信息或UI组件。如果适合,你能够引用平台的actionBarSize值来决定操作栏的高度,例如,在XML布局文件中引用这个值。

双击代码全选

你还能够用getHeight()方法在运行时获取操作栏的高度。如果在Activity生存周期的早期调用这个方法,那么在调用时所反映的操作栏的高度可能不包括被堆放的操作栏(因为导航选项标签)。要看如何在运行时判断操作栏总的高度(包括被堆放的操作栏),请看Honeycomb Gallery示例应用中的TitlesFragment类。

3、操作项元素

android:actionButtonStyle给操作项按钮定义样式资源。android:actionBarItemBackground给每个操作项的背景定义可描画资源(被添加在API 级别 14中)。android:itemBackground给每个悬浮菜单项的背景定义可描画资源。android:actionBarDivider给操作项之间的分隔线定义可描画资源(被添加在API 级别 14中)android:actionMenuTextColor给显示在操作项中文本定义颜色。android:actionMenuTextAppearance给显示在操作项中文本定义样式资源。android:actionBarWidgetTheme给作为操作视窗被填充到操作栏中的可视构件定义主题资源(被添加在API级别14中)。4、导航选项标签android:actionBarTabStyle给操作栏中的选项标签定义样式资源。android:actionBarTabBarStyle给显示在导航选项标签下方的细条定义样式资源。android:actionBarTabTextStyle给导航选项标签中的文本定义样式资源。
5、下拉列表

android:actionDropDownStyle给下拉导航列表定义样式(如背景和文本样式)。如,下例XML文件中给操作栏定义了一些定制的样式:

双击代码全选

注意:一定要在<style>标签中声明一个父主题,这样定制的主题可以继承所有没有明确声明的样式。在修改操作栏样式时,使用父主题是至关重要的,它会让你能够简单的覆写你想要改变的操作栏样式,而不影响你不想修改的样式(如文本的外观或操作项的边缘)。

你能够在清单文件中把定制的主题应用到整个应用程序或一个单独的Activity对象,如:

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

6、高级样式

如果需要比上述属性更高级的样式,可以在Activity的主题中包含android:actionBarStyle和android:actionBarSplitStyle属性。这两个属性的每一个都指定了另一种能够给操作栏定义各种属性的样式,包括带有android:background、android:backgroundSplit、android:backgroundStacked属性的不同背景。如果要覆盖这些操作栏样式,就要确保定义一个像Widget.Holo.ActionBar这样的父操作栏样式。

例如,如果要改变操作栏背景,你可以使用下列样式:

双击代码全选

四、详细代码编写

1、整个项目中最核心的地方就是在res/values下的styles.xml文件中,这是自定义风格样式的资源文件,styles.xml:

双击代码全选

2、定义好了之后,在AndroidManifest.xml清单文件中使用,可以在application中使用,这样就会作用于每一个Activity,也可以在每一个单独的Activity中使用,AndroidManifest.xml:

双击代码全选

3、新建一个drawable文件夹,在文件夹下再定义几个资源文件:

<1> 用于tab选项标签背景的修改, actionbar_tab_bg.xml:

双击代码全选

<2> ActionBar标题栏的背景渐变色,actionbar_gradient_bg.xml:

双击代码全选

<3> 用于下拉列表背景的变换,ad_spinner_background_holo_light.xml:

双击代码全选

<4> ActionBar标题栏上的按钮选中时的背景颜色切换,selected_background.xml:

双击代码全选

ad_selectable_background.xml:

双击代码全选

4、菜单的资源文件,main_menu.xml:

双击代码全选

这里的资源文件有点多,为了节省篇幅,讲解重点和难点,博主这里就不一一列出来了,有需要的同学可以看源码,一目了然。

5、主Activity程序入口类,MainActivity.java:

双击代码全选

6、Tab选项标签监听接口类,MyTabListener.java:

7、Fragment类,用于显示Tab选项标签的内容,列出其中一个,FragmentPage1.java:

双击代码全选

关于ActionBar的内容总结到这里差不多就要结束了,今后如果有什么关于ActionBar好玩好用的东西再拿出来更大家一起分享、总结和交流。在这里博主希望大家能积极评论,指出文中的不足和错误的地方,博主一定第一时间改正和完善。谢谢支持!下一篇开始会讲解自定义的顶部标题栏,敬请期待!

源码下载地址
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐