Android之Toolbar的使用
2016-01-21 15:49
393 查看
1. 概述
Android 3.0 Android 推了 ActionBar 这个控件,而到了2013 年 Google 开始大力地推动所谓的 android style,想要逐渐改善过去 android 纷乱的界面设计,希望让终端使用者尽可能在 android 手机有个一致的操作体验。ActionBar 过去最多人使用的两大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 里的 AppCompat。既然会有本篇跟各位介绍的 Toolbar,也意味着官方在某些程度上认为 ActionBar 限制了 android app 的开发与设计的弹性,而在 material design 也对之做了名称的定义:App bar。接下来将为各位分成几个阶段进行说明,如何在 android app 中用 toolbar 这个控件来做出一个基本的 app bar 喽。
本篇所使用到的程序请到 Github 取得。
2. 基础套用
这个阶段从 toolbar_demo_checkpoint0 开始,分成下列三个部份:风格 (style)
界面 (layout)
程序 (java)
2.1 风格(style)
风格要调整的地方有二一在 res/values/styles.xml中
二在 /res/values-v21/styles.xml中
为了之后设定方便,我们先在 res/values/styles.xml 里增加一个名为 AppTheme.Base 的风格
2.2 界面(Layout)
在 activity_main.xml 里面添加 Toolbar 控件:这里需注意,要将 RelatvieLayout 里的四个方向的padding 属性去掉,并记得将原本的 Hello World 设为 layout_below="@+id/toolbar" ,否则会看到像下面这样的错误画面。
2.3 程序 (Java)
在 MainActivity.java 中加入 Toolbar 的声明:完整代码见:toolbar_demo_checkpoint1
3. 自定义颜色(Customization color)
这个阶段将从 toolbar_demo_checkpoint1 接着往下进行:上图是将本阶段要完成的结果画面做了标示,结合下面的描述希望大家能明白。
colorPrimaryDark(状态栏底色):在风格 (styles) 或是主题 (themes) 里进行设定。
App bar 底色
这个设定分为二,若你的 android app 仍是使用 actionbar ,则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可;
可若是采用 toolbar 的话,则要在界面 (layout) 里面设定 toolbar 控件的 background 属性。
navigationBarColor(导航栏底色):
仅能在 API v21 也就是 Android 5 以后的版本中使用, 因此要将之设定在 res/values-v21/styles.xml 里面。
主视窗底色:windowBackground
也因此在这个阶段,我们需要设定的地方有三,一是 style中(res/values/styles.xml)
最后,再来看一下结果画面。
完整代码见: toolbar_demo_checkpoint2
4. 控件 (component)
本阶段将从 toolbar_demo_checkpoint2 接续,在还未于<android.support.v7.widget.Toolbar/> 标签中,自行添加元件的 toolbar 有几个大家常用的元素可以使用,请先见下图:
大抵来说,预设常用的几个元素就如图中所示,接着就依序来说明之:
setNavigationIcon
即设定 up button 的图标,因为 Material 的介面,在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。
setLogo
APP 的图标。
setTitle
主标题。
setSubtitle
副标题。
setOnMenuItemClickListener
设定菜单各按鈕的动作。
先来看看菜单外的代码,在 MainActivity.java 中:
菜单部分,需要先在res/menu/menu_main.xml左定义:
完完整程序见:toolbar_demo_checkpoint3
5. 总结
在这样的架构设计下,ToolBar直接成了Layout中可以控制的东西,相对于过去的actionbar来说,设计与可操控性大幅提升。本文上面的解释中用到的完成代码:toolbar demo check point 0 ~ 4,请到Github 取得。
最后再附上一个界面上常用的属性说明图:
这里按照图中从上到下的顺序做个简单的说明:
colorPrimaryDark
状态栏背景色。
在 style 的属性中设置。
textColorPrimary
App bar 上的标题与更多菜单中的文字颜色。
在 style 的属性中设置。
App bar 的背景色
Actionbar 的背景色设定在 style 中的 colorPrimary。
Toolbar 的背景色在layout文件中设置background属性。
colorAccent
各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。
在 style 的属性中设置。
colorControlNormal
各控制元件的预设颜色。
在 style 的属性中设置
windowBackground
App 的背景色。
在 style 的属性中设置
navigationBarColor
导航栏的背景色,但只能用在 API Level 21 (Android 5) 以上的版本
在 style 的属性中设置
最后需要注意的是:使用material主题的时候,必须设定targetSdkVersion = 21,否则界面看起来是模糊的
转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
封装toolbar参考: http://www.w2bc.com/Article/45123
相关文章推荐
- Android开发之Intent.Action
- 走向Android5.0之toolbar,Snackbar
- android 录制短音频
- Android 获取系统联系人并排序
- Android学习历程7-Activity详解
- android代码集锦
- AndroidManifest.xml配置文件详解
- Android Studio 图片资源引用杂谈
- Android小问题:android studio怎么查看数字签名 sha1(地图)
- Cordova / PhoneGap开发入门,基于HTML、CSS和JavaScript的Android移动开发框架
- android技巧(五)一个异步+接口回调的例子
- Android数据存储
- Android working with Google Maps V2
- Android Studio集成crashlytics后无法编译的问题
- Android中使用【microlog4】进行日志存储
- 初识Face++在android上的应用
- Android Content
- 彻底理解android中的内部存储与外部存储
- Ubuntu 编译Android源码出现Switch.pm出错信息的解决方法
- Android Netty框架的使用