设计工具栏Action Bar(订制工具栏类型)

  工具栏给用户提供了一种熟悉和可预测的方式来执行某种动作和操纵应用程序,但是这并不意味着它就需要和其他的应用程序看起来一样的。如果想设计工具栏以使得它能更适合产品的商标,使用android的style和theme资源可以很容易做到点。

  android包含一些内置的活动主题(build-in activity themes)例如 ”dark"或者"light"工具栏风格。用户也可以扩展这些主题来进一步订制用户自己工具栏的外观。

注意: 如果你使用支持库APIs来设计工具栏,必须要重载Theme.AppCompat函数族,而不是Theme.Holo函数族。这样做的过程中,每一个用户声明的风格特性都必须声明两次:一次使用平台的风格特性( the android:properties),一次使用风格特性包含在支持库( Support Library) 中,例如 the appcompat.R.attr 属性- 这些属性的内容才是真正的应用程序。

使用Android主题

Android包含两种基本的主题,用来指定工具栏的颜色:

Theme.Holo指定一个”dark“主题

Theme.Holo.Light指定一个”light“主题

用户通过声明这些主题到程序的 menifest file中,可以应用这些主题到整个应用程序或者某个单独的活动(individual activity), 声明方式为 android:theme 并将它放到<application>元素中或者<activity>元素中。例如:

<application android:theme="@android:style/Theme.Holo.Light" ... />

用户也可以声明Theme.Holo.Light.DarkActionBar来使用一个黑色的工具栏而其他的活动则使用浅色(light color)

当使用支持库的时候,必须使用 Theme.AppCompat主题

Theme.AppCompat 黑色主题

Theme.AppCompat.Light 浅色主题

Theme.AppCompat.Light.DarkActionBar 带有黑色工具栏的浅色主题

确保工具栏图标能够与工具栏颜色合适的匹配。 此外,Action Bar Icon Pack 包含标准的动作图标可以使用,既有全浅色的 也有全黑色的工具栏。

订制背景

若想改变工具栏背景,需要给用户的活动activity创建一个用户主题,重载actionBarStyle属性。这个属性指向另一个风格,在这个风格里用户可以重载背景属性以便为工具栏背景明确一个drawable资源。

如果程序使用 navigation tabs或者split action bar,那么可以使用backgroundStacked和backgroundSplit属性分别为这些栏bars明确背景。

注意:为你的用户主题声明一个合适的父主题是很重要的。如果没有父主题,你的工具栏可能会丢失很多风格属性除非你显式的声明它们。

对于Android3.0或者更高的版本

你可以按如下方式 定义工具栏背景

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">@drawable/actionbar_background</item>
</style>
</resources>

订制文本颜色

在工具栏中改变文本的颜色,需要为每个文本元素重载不同的属性。

  • 工具栏标题:创建用户风格来明确 textColor属性和明确 titleTextStyle属性,在程序actionBarStyle来进行

  注意:运用到titleTextStyle上的用户风格应该使用TextAppearance.Holo.Widget.ActionBar.Title作为父风格(parent style)

  • 工具栏制表符: 在用户的活动主题中重载actionBarTabTextStyle
  • 动作按钮:在用户的活动主题(activity theme)中重载actionMenuTextColor函数
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="@style/Theme.Holo">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MyActionBarTitleText" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
</style>
<!-- ActionBar tabs text styles -->
<style name="MyActionBarTabText" parent="@style/Widget.Holo.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
</style>
</resources>

订制制表指示器( tabs indicator)

要想改变导航标签navigation tabs的指示器indicator,需要创建一个活动主题重载 actionBarStyle 属性。 这个属性指向另一个style资源,在这个style资源里面用户需要重载background属性, 且这个属性必须明确为state-list drawable。

注意:state-list drawable是重要的,使得这个当前被选择的标签标明它的背景状态与其他标签是不同的。 想更加进一步了解如何创建一个能够处理多种按钮状态的drawable资源,请查阅 State List 文档。

例如,下面是一个state-list drawable声明了一个明确的背景图片,具有几个不同状态的工具栏标签,

res/drawable/actionbar_tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- STATES WHEN BUTTON IS NOT PRESSED --> <!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected_focused" />
<!-- STATES WHEN BUTTON IS PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed" />
</selector>
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="@style/Theme.Holo">
<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs" parent="@style/Widget.Holo.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">@drawable/actionbar_tab_indicator</item>
</style>
</resources>

  

android 设计工具栏的更多相关文章

  1. 【转】Android设计中的.9.png

    来源:http://isux.tencent.com/android-ui-9-png.html Android设计中的.9.png 注意:当使用9.png做TextView背景时,一定要设置内容区域 ...

  2. Android 设计随便说说之简单实践(合理组合)

    上一篇(Android 设计随便说说之简单实践(模块划分))例举了应用商店设计来说明怎么做模块划分.模块划分主要依赖于第一是业务需求,具体是怎么样的业务.应用商店则包括两个业务,就是向用户展示appl ...

  3. Android 设计随便说说之简单实践(模块划分)

    上篇随笔随(Android 设计随便说说)便说了一下什么是设计以及设计的原则,这里举一个简单的例子来进一步的说Android设计.我们以应用商店的设计来举例. 在设计之前,需要把握两部分内容,才能使得 ...

  4. android设计的布局在阿拉伯语下界面错乱的解决方法

    (1)正在AndroidManifest.xml声明文件的application元素中,增加” android:supportsRtl=true” (2)建] androidの设计的布局在阿拉伯语下界 ...

  5. Android设计中的.9.png图片

    .9.png是一种能够自己定义拉伸特定区域的图片格式. 简书:Android设计中的.9.png图片 在Android的UI设计开发中,非常多控件须要适配不同的手机分辨率进行拉伸或者压缩,这样就出现了 ...

  6. android设计准则

    ------------缘由-------------------------------------------------------------------------------------- ...

  7. Android 设计一个菱形形状的Imageview组件.

    网上没有资料,特来请教下大神 Android 设计一个菱形形状的Imageview组件. >> android这个答案描述的挺清楚的:http://www.goodpm.net/postr ...

  8. Android 设计原则【转载+整理】

    原文地址 本文内容 吸引我的眼球 简化我的生活 让我眼前一亮 在使用过大量 Android APP 后,你会发现,遵循了下面这些原则的 APP 将会有更好的用户体验. 我们知道,往往国企的那些软件,都 ...

  9. android 设计

    引用:http://my.eoe.cn/blue_rain/archive/3631.html 1.一些概念 模式的定义: 每个模式都描述了一个在我们的环境中不断出现的问题,然后描述了该问题的解决方案 ...

随机推荐

  1. poj 1276 多重背包

    735 3 4 125 6 5 3 350 //735的最大额,3种,4个125,6个5,3个350 633 4 500 30 6 100 1 5 0 1 735 0 0 3 10 100 10 50 ...

  2. 实例讲解虚拟机3种网络模式(桥接、nat、Host-only)

    转自:http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646007.html 前言 很多人安装虚拟机的时候,经常遇到不能上网的问题,而vmwa ...

  3. 用VMware9 安装 mac 10.8和10.9搜集的资料

    VMware9虚拟机安装MAC OS X Mountain Lion 10.8.2详细图文教程 http://diybbs.zol.com.cn/1/34037_699.html vmware too ...

  4. Listview点击事件

    listview = (ListView) findViewById(R.id.listview); // 填充data数据 data = new ArrayList<String>(); ...

  5. 解析Cloudera Manager内部结构、功能包括配置文件、目录位置等

    转载自 http://www.aboutyun.com/thread-9189-1-1.html 问题导读1.CM的安装目录在什么位置? 2.hadoop配置文件在什么位置? 3.Cloudera m ...

  6. TODO:Half Half的设计

    IMessageHandler :消息同步处理接口 AbsQueue:消息队列处理层,可以使用Template Method进行设计 INetWorkLayer:专门处理网络IO的,并附带多线程与异步 ...

  7. quick cocos map使用

    '''lua local MainScene = class("MainScene", function() return display.newScene("MainS ...

  8. BZOJ4298 : [ONTAK2015]Bajtocja

    设f[i][j]为第i张图中j点所在连通块的编号,加边时可以通过启发式合并在$O(dn\log n)$的时间内维护出来. 对于每个点,设h[i]为f[j][i]的hash值,若两个点hash值相等,则 ...

  9. WIN7启动WIFI

    启动虚拟无线AP netsh wlan set hostednetwork mode=allow ssid=WIFI_NAME key="abcdefgh" netsh wlan ...

  10. TYVJ P1030 乳草的入侵 Label:跳马问题

    背景 USACO OCT09 6TH 描述 Farmer John一直努力让他的草地充满鲜美多汁的而又健康的牧草.可惜天不从人愿,他在植物大战人类中败下阵来.邪恶的乳草已经在他的农场的西北部份佔领了一 ...