android应用开发-从设计到实现 2-8 组件与常用模式
组件与常用模式
前面已经比较全面的介绍了Material Design相关的设计哲学、设计原理和方法论。这一章开始，我们将看看这些原理是如何在安卓系统当中得到实践的。
一个应用并不是完全从什么都没有来组建的，至少会有一匹一匹的砖嘛。而在界面设计当中，这些能够拿过来就使用的砖块就是控件。
例如，按钮 滑动条 列表等等，都是可以直接拿过来用的砖块。
Material Design最基础的体现，就是看看这些砖长成什么样，以及如何用Material Design的理念将这些砖组合起来，构建成应用的界面。
这样的砖块很多，Google在Material Design的规范中给出了详细的定义。
因此我不会一一列举，只是拿出其中一两个最为常见的、最为典型的砖块和大家讨论，看看规范该如何解读和使用。知道了这些典型砖块的实践方式以后，大家就能自己根据设计规范来查看资料了。
我这里选取了按钮 列表 应用栏 系统栏来详细的讨论。
按钮
Material Design中有3类按钮：
Floating action按钮：前面已经大致介绍过，它是一个圆形的按钮，悬浮在界面之上6dp的位置，当点击的时候，按钮会向上浮动（显示出更大的阴影），是界面中吸引用户的界面元素之一；
Raised按钮：拥有背景颜色（Accent color）的按钮，点击时它在z轴的位置会向上变化；
Flat按钮：按钮文字有颜色（Accent color）的按钮，点击时它在z轴的位置不会变化；
Flat按钮
Flat按钮常常用在toolbar、对话框以及需要与很多文字配合的地方。通常用来告诉用户“我能提供一些轻量级的功能，这些功能并不是我的特色，你知道我有就行”。
它的设计规范如下，
| 项目 | 数值 |
|---|---|
| 最小宽度 | 88dp |
| 高度 | 36dp |
| 边角弧度半径 | 2dp |
| 左右margin | 8dp |
| 左右padding | 8dp |
| 字体大小 | 15sp |
当使用亮色主题并按下按钮的时候，按钮的背景颜色是#999999，透明度为40%；
当使用暗色主题并按下按钮的时候，按钮的背景颜色是#CCCCCC，透明度为25%；
当点击按钮的时候，会出现水波纹一样的动画，
Raised按钮
Raised按钮比Flat按钮能更加吸引用户的注意力。通常用来告诉用户“点击我以后，会启动我一个很重要的功能，你要特别注意”。
它的设计规范如下，
| 项目 | 数值 |
|---|---|
| 最小宽度 | 88dp |
| 高度 | 36dp |
| 默认z轴位置 | 2dp |
| 按下时z轴位置 | 8dp |
| 边角弧度半径 | 2dp |
| 左右margin | 0dp |
| 左右padding | 16dp |
| 字体大小 | 15sp |
当使用暗色主题时，背景的颜色如下，
| 按钮状态 | 数值 |
|---|---|
| 正常 | 调色板500类型的颜色 |
| 按下 | 调色板700类型的颜色 |
当点击按钮的时候，会出现水波纹一样的动画，之后按钮在Z轴的位置也会提升，
FloatingAction按钮
FloatAction按钮是界面当中最引人瞩目的按钮。它代表了这个界面能提供的最重要、最核心的功能。默认情况下它的尺寸是56dp，放在上方会小一点，是40dp。
按照中心位置会内嵌一个系统图标，系统图标的大小我们在图标的章节讲过，是24dp。
需要注意的是：并不是所有的界面一定要有个FloatAction按钮，它的存在完全是由应用的逻辑决定的。之所以我们看到那么多界面都有FloatAction按钮，是因为这是Material Design的典型特征，所以选择的很多例子都有它。如果某个界面确实需要FloatAction按钮，那么一个界面上也只能有一个，表明只有一个功能是最为重要的。
FloatAction按钮还有一些常用的使用模式：
当拥有FloatAction按钮的界面退出的时候，按钮要用动画的形式消失；
当拥有FloatAction按钮的界面显示的时候，按钮要用动画的形式出现；
当拥有FloatAction按钮的界面在内部进行切换的时候，按钮要有动态变化的效果；
按钮点击后可以，展示出更多菜单；
- 按钮变化成一个新的纸片，纸片上展现更多的内容；
它的设计规范如下，
| 项目 | 数值 |
|---|---|
| 标准尺寸 | 56dp |
| 最小尺寸 | 40dp |
| 内嵌图标尺寸 | 24dp |
| 默认z轴位置 | 6dp |
| 按下时z轴位置 | 12dp |
| 背景颜色 | Accent Color |
列表
接下来，我们看看另外一个会经常用到的组件列表。
列表用来显示展示类型相同的数据，比如都有头像、名字、职务等信息，不同的只是这些信息的具体内容。
列表项是列表的一个显示单元，列表项的布局不要超过三行，如果确实要超过三行，那么就不应该使用列表来展示内容了。
列表项的内容根据位置的不同，体现出的重要性也不同：
- 靠左边的内容是最重要的，右边的次之；
- 靠上边的内容是最重要的，下边的次之；
常见的列表布局有以下三种，
单行：有一行文字的显示
双行：有两行文字的显示
三行：有三行文字的显示
这些布局中各个元素的位置，都在规范中有明确的规定，经过按钮那一小节的讲述，我想大家一定具备看懂规范的能力，能够从中找到设置位置的关键点。
在查看上面的示例时，大家应该注意到了列表项的分割线。这些分割线将列表区域按照逻辑区分开来，都是1dp的宽度。
有的分割线贯穿了整个屏幕；
有的只是将文字的部分分开；
有的没有分隔；
to
关于分割线，在Material Design的规范当中，也有专门的章节细致的讲述。
应用栏与工具栏
工具栏的作用是把很多操作按钮集中起来，一起展现给用户。它可以放在应用界面的上部分、中间、底部，
在安卓的设计当中，有个ActionBar的概念，它的作用就是展示一个应用的图标、名字，以及菜单、导航栏等内容，从安卓3.0开始它就被提出，并推广了起来。
不过从安卓5.0开始，在ActionBar的基础上提出了AppBar。AppBar除了担当ActionBar的功能外，还增加了一些新的特性，例如滑动效果。新引入的具体的控件ToolBar接替了ActionBar的具体功能，成为AppBar最为核心的组件。
为了便于理解，我举一个例子。Google在2015年进行拆分，成立了多家公司，并将它们规整到Alphabet公司旗下。而以前的Google只保留搜索业务，成为了一个比较单纯的公司。
ActionBar就相当于以前的Google公司；AppBar相当于Alphabet；ToolBar就是Alphabet成立后的Google。AppBar除了ToolBar以外，还可能包含更多组件在其中。
应用栏的高度根据屏幕横竖状态的不同而不同，
| 屏幕状态 | 高度 |
|---|---|
| 竖屏 | 56dp |
| 横屏 | 48dp |
应用栏可以根据开发者的要求，变成透明的、半透明的、甚至不显示。
AppBar除了显示标题、菜单等功能外，还有令人炫目的滑动效果，这也是安卓系统使用Material Design的重要特色。
AppBar除了Toolbar以外，可以包含分页标签Tabs 图片等等内容。图片占用的空间叫做可变空间-Flexible space，不一定就是放图片，也可以放其他的元素，只不过就界面设计来讲，显示图片的效果要很多。
AppBar只有Toolbar：内容滚动的过程中，Toolbar可以被顶到消失；也可通过下拉再次出现。
AppBar有Toolbar和Tab：内容滚动的过程中，
Toolbar可以被顶到消失，只留下Tab；也可通过下拉再次出现。内容滚动的过程中，
Toolbar和Tab都被顶到消失；也可通过下拉再次出现。
AppBar有Toolbar和可变区域：内容滚动的过程中，可变区域可以被顶到消失，只留下
Toolbar；也可通过下拉再次出现。内容滚动的过程中，
Toolbar和可变区域都被顶到消失；也可通过下拉再次出现。
状态栏与导航栏
用过智能手机的同学对状态栏和导航栏一定不会陌生，
状态栏贯穿了整个屏幕的宽度，高度是24dp。
导航栏同样贯穿了整个屏幕的宽度，高度是48dp。不过在很多国内定制的系统当中，因为手机已经有了实体按键，就取消了导航栏。
状态栏和导航栏的背景颜色是可以各自改变的，透明、半透明、不透明。
为了配合不同应用的使用场景，状态栏和导航栏的显示也有不同的表现，
沙发模式（Lean back）：就像在瘫坐在沙发上看电影时一样，屏幕尽可能的呈现视频内容，把状态栏和导航栏都藏起来。这个过程中你几乎不会去接触到屏幕，当你碰触屏幕的时候，状态栏和导航栏才会出现。
沉浸模式（Immersive）：比如当你在使用阅读软件看书的时候，屏幕只显示书本的内容，把状态栏和导航栏隐藏起来，让你沉浸在阅读的快乐当中。但每次翻页的时候，你还是需要接触屏幕的。虽然翻页的过程中接触了屏幕，状态栏和导航栏也不会出现，除非你在屏幕的边缘做了一个滑动的动作，才能将它们再次唤出。
关灯模式（Light out）：当你不碰触屏幕超过一定的时间，状态栏会自动的隐退；导航栏虽然还在那里，但是那三个操作的按钮却变成了三个小点。这个过程就好像是关闭了照亮屏幕的灯，状态栏和导航栏似乎还在那里，只是没有了灯光，已经看的不真切了。
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。
如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。
除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。
android应用开发-从设计到实现 2-8 组件与常用模式相关推荐
- android应用开发-从设计到实现 2-4 文字的使用
文字的使用 文字是应用当中使用最多的要素.显示一段供用户阅读的文字,程序运行时的信息提示都离不开它. 文字是内容的实际体现者,因此设计师需要将用户的注意力尽可能的吸引到文字当中. 字体可以分成两种类型 ...
- android应用开发-从设计到实现 4-10 解析天气预报数据
解析天气预报数据 界面布局完成以后,就需要设计代码来控制界面上各个元素的逻辑了. 从网络获取天气预报数据: 解析获取的数据: 根据解析的结果更新天气预报界面: 天气预报的数据依赖于网络端的服务器,不是 ...
- android应用开发-从设计到实现 3-3 Sketch静态原型设计
Sketch静态原型设计 对于静态原型的设计,我们使用Sketch. 启动Sketch后,我们将看到类似如下的界面, 工具栏 它的顶部是工具栏, 可以通过菜单栏View -> Customize ...
- android应用开发-从设计到实现 2-1 设计原理
设计原理 设计是一门让人感觉很抽象的艺术.设计需要从两个方面来考虑问题: 实用:体现在功能上和交互性上: 美观:体现在界面的布局,色彩的搭配,字体的运用上: 对于我们的安卓应用来讲,设计的目的就是要体 ...
- android应用开发-从设计到实现 3-9 Origami动态原型设计
动态原型设计 动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具. 开发者不需要猜测设计师要什么样的效果,照着原型产品做就好了. 很多创业团队也发现了产品人的这个刚需,做出 ...
- android应用开发-从设计到实现 3-5 静态原型的Appbar
静态原型的Appbar 我们设计的Appbar包括了两个部分,一个是toolbar,另一个就是flexible space-显示当日天气的详细信息, Toolbar参数确定 添加Toolbar很简单, ...
- android应用开发-从设计到实现 3-4 静态原型的状态栏
静态原型的状态栏 状态栏Symbol 状态栏似乎很复杂,有wifi信号.手机信号.时间.电量等信息,幸好Sketch原生就自带的现成组件,你可以直接拿过来就用了.当然,你也可以自己一个一个去画,不过既 ...
- android应用开发-从设计到实现 3-6 静态原型的天气预报
静态原型的天气预报 未来5天的天气预报,可以看成由5个类似的天气模块构成,只要完成一个,其他几个就可以通过复制+修改内容实现改变. 首先来明确一下各个组件的尺寸和参数, 整个区域的大小,我设定成360 ...
- android应用开发-从设计到实现 4-4版本管理
版本管理 前面已经提到了,非常有必要对开发的代码进行管理.那么进行版本管理到底什么时候使用呢? 我总结了使用版本管理的主要场景,有以下3种: 对于个人开发者,版本管理能记录开发的变迁.它记录了所有文档 ...
最新文章
- hdu2006 求奇数的乘积【C++】
- 使用Zabbix通过BMC管理口监控HP服务器
- 这回导师们颤抖了，这个网站能匿名评价其“人品”，已有大量“不良”导师被爆...
- Spring Cloud Gateway——2020.x以上版本HTTP 503 或 NoLoadBalancer[负载均衡]解决方案
- iOS进阶（XML、JSON数据解析）
- c++画函数图像_二次函数图像与系数a，b，c的关系
- java第一次作业0
- 首次体验 Live Writter
- iOS多线程编程--NSOperation（转）
- 初涉SEO有感-房途网SEO
- html 时间控件 只选择年,js时间控件只显示年月
- Editplus 3添加edtool插件文档
- 计算机excel高级筛选操作大全,Excel高级筛选的7个使用实例，含不等于空、多条件、筛选到另一表格、用通配符*/?或公式组合条件...
- 支付宝接口对接指南（二、对接框架基础搭建 springboot+支付宝SDK）【保姆级】
- rss订阅，全文阅读，渴望大家发贴的时候在RSS中总是显示全文
- 微信小程序（登录、分享、支付）
- 查看UiPath许可证状态
- 编写价格排序程序C语言,C语言程序简单例子
- 【原生js】动态添加class
- 我的cocos2d-x学习之路