android应用开发-从设计到实现 2-8 组件与经常使用模式
组件与经常使用模式
前面已经比較全面的介绍了Material Design
相关的设计哲学、设计原理和方法论。
这一章開始,我们将看看这些原理是怎样在安卓系统其中得到实践的。
一个应用并非全然从什么都没有来组建的。至少会有一匹一匹的砖嘛。而在界面设计其中,这些能够拿过来就使用的砖块就是控件。
比如,button
滑动条
列表
等等,都是能够直接拿过来用的砖块。
Material Design
最基础的体现,就是看看这些砖长成什么样。以及怎样用Material Design
的理念将这些砖组合起来,构建成应用的界面。
这种砖块非常多。Google在Material Design
的规范中给出了详细的定义。
因此我不会一一列举。仅仅是拿出其中一两个最为常见的、最为典型的砖块和大家讨论,看看规范
该怎样解读和使用。知道了这些典型砖块的实践方式以后。大家就能自己依据设计规范
来查看资料了。
我这里选取了button
列表
应用栏
系统栏
来详细的讨论。
button
Material Design
中有3类button:
Floating actionbutton:前面已经大致介绍过,它是一个圆形的button,悬浮在界面之上6dp的位置,当点击的时候,button会向上浮动(显示出更大的阴影)。是界面中吸引用户的界面元素之中的一个;
Raisedbutton:拥有背景颜色(Accent color)的button。点击时它在z轴的位置会向上变化。
Flatbutton:button文字有颜色(Accent color)的button,点击时它在z轴的位置不会变化;
Flatbutton
Flatbutton经常常使用在toolbar
、对话框
以及须要与非常多文字配合的地方。
通经常使用来告诉用户“我能提供一些轻量级的功能,这些功能并非我的特色。你知道我有即可”。
![](http://7xrwhw.com1.z0.glb.clouddn.com/flat_btn_pos.png)
它的设计规范例如以下,
项目 | 数值 |
---|---|
最小宽度 | 88dp |
高度 | 36dp |
边角弧度半径 | 2dp |
左右margin | 8dp |
左右padding | 8dp |
字体大小 | 15sp |
当使用亮色主题并按下button的时候,button的背景颜色是#999999。透明度为40%;
当使用暗色主题并按下button的时候,button的背景颜色是#CCCCCC,透明度为25%;
![](http://7xrwhw.com1.z0.glb.clouddn.com/flat_btn_spec.png)
当点击button的时候,会出现水波纹一样的动画。
![](http://7xrwhw.com1.z0.glb.clouddn.com/flat_btn_press_effect.gif)
Raisedbutton
Raisedbutton比Flatbutton能更加吸引用户的注意力。通经常使用来告诉用户“点击我以后,会启动我一个非常重要的功能,你要特别注意”。
![](http://7xrwhw.com1.z0.glb.clouddn.com/raised_btn_pos.png)
它的设计规范例如以下,
项目 | 数值 |
---|---|
最小宽度 | 88dp |
高度 | 36dp |
默认z轴位置 | 2dp |
按下时z轴位置 | 8dp |
边角弧度半径 | 2dp |
左右margin | 0dp |
左右padding | 16dp |
字体大小 | 15sp |
当使用暗色主题时,背景的颜色例如以下,
button状态 | 数值 |
---|---|
正常 | 调色板500类型的颜色 |
按下 | 调色板700类型的颜色 |
![](http://7xrwhw.com1.z0.glb.clouddn.com/raised_btn_spec.png)
当点击button的时候。会出现水波纹一样的动画,之后button在Z轴的位置也会提升,
![](http://7xrwhw.com1.z0.glb.clouddn.com/raised_btn_effect.gif)
FloatingActionbutton
FloatActionbutton是界面其中最引人瞩目的button。它代表了这个界面能提供的最重要、最核心的功能。默认情况下它的尺寸是56dp,放在上方会小一点。是40dp。
![](http://7xrwhw.com1.z0.glb.clouddn.com/float_action_btn_pos.png)
依照中心位置会内嵌一个系统图标,系统图标的大小我们在图标的章节讲过,是24dp。
须要注意的是:并非全部的界面一定要有个FloatActionbutton。它的存在全然是由应用的逻辑决定的。
之所以我们看到那么多界面都有FloatActionbutton,是由于这是Material Design
的典型特征,所以选择的非常多样例都有它。假设某个界面确实须要FloatActionbutton。那么一个界面上也仅仅能有一个,表明仅仅有一个功能是最为重要的。
FloatActionbutton另一些经常使用的使用模式:
当拥有FloatActionbutton的界面退出的时候,button要用动画的形式消失。
当拥有FloatActionbutton的界面显示的时候。button要用动画的形式出现。当拥有FloatActionbutton的界面在内部进行切换的时候。button要有动态变化的效果;
button点击后能够,展示出很多其它菜单;
- button变化成一个新的纸片,纸片上展现很多其它的内容。
它的设计规范例如以下,
项目 | 数值 |
---|---|
标准尺寸 | 56dp |
最小尺寸 | 40dp |
内嵌图标尺寸 | 24dp |
默认z轴位置 | 6dp |
按下时z轴位置 | 12dp |
背景颜色 | Accent Color |
列表
接下来,我们看看另外一个会经经常使用到的组件列表。
列表用来显示展示类型相同的数据,比方都有头像、名字、职务等信息。不同的仅仅是这些信息的详细内容。
![](http://7xrwhw.com1.z0.glb.clouddn.com/list_example.png)
列表项是列表的一个显示单元,列表项的布局不要超过三行。假设确实要超过三行。那么就不应该使用列表来展示内容了。
列表项的内容依据位置的不同,体现出的重要性也不同:
- 靠左边的内容是最重要的。右边的次之;
- 靠上边的内容是最重要的。下边的次之;
![](http://7xrwhw.com1.z0.glb.clouddn.com/list_item_import_order.png)
常见的列表布局有下面三种,
单行:有一行文字的显示
双行:有两行文字的显示
三行:有三行文字的显示
这些布局中各个元素的位置。都在规范中有明白的规定。经过button
那一小节的讲述。我想大家一定具备看懂规范
的能力,能够从中找到设置位置的关键点。
在查看上面的演示样例时。大家应该注意到了列表项的切割线。
这些切割线将列表区域依照逻辑区分开来,都是1dp的宽度。
有的切割线贯穿了整个屏幕。
有的仅仅是将文字的部分分开;
有的没有分隔。
to
![](http://7xrwhw.com1.z0.glb.clouddn.com/list_no_divider.png)
关于切割线,在Material Design
的规范其中,也有专门的章节仔细的讲述。
应用栏与工具栏
工具栏的作用是把非常多操作button集中起来,一起展现给用户。它能够放在应用界面的上部分、中间、底部,
![](http://7xrwhw.com1.z0.glb.clouddn.com/toolbar_top.png)
![](http://7xrwhw.com1.z0.glb.clouddn.com/toolbar_map.png)
![](http://7xrwhw.com1.z0.glb.clouddn.com/toolbar_keyboard.png)
在安卓的设计其中,有个ActionBar
的概念,它的作用就是展示一个应用的图标、名字,以及菜单、导航栏等内容,从安卓3.0開始它就被提出,并推广了起来。
![](http://7xrwhw.com1.z0.glb.clouddn.com/app_bar_example.png)
只是从安卓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
,不一定就是放图片,也能够放其它的元素,仅仅只是就界面设计来讲,显示图片的效果要非常多。
![](http://7xrwhw.com1.z0.glb.clouddn.com/appbar_area.png)
AppBar
仅仅有Toolbar
:内容滚动的过程中,Toolbar
能够被顶到消失。也可通过下拉再次出现。AppBar
有Toolbar
和Tab
:内容滚动的过程中,
Toolbar
能够被顶到消失,仅仅留下Tab
。也可通过下拉再次出现。内容滚动的过程中,
Toolbar
和Tab
都被顶到消失;也可通过下拉再次出现。
AppBar
有Toolbar
和可变区域:内容滚动的过程中,可变区域能够被顶到消失,仅仅留下
Toolbar
;也可通过下拉再次出现。内容滚动的过程中,
Toolbar
和可变区域都被顶到消失。也可通过下拉再次出现。
状态栏与导航栏
用过智能手机的同学对状态栏和导航栏一定不会陌生。
![](http://7xrwhw.com1.z0.glb.clouddn.com/statusbar_example.png)
![](http://7xrwhw.com1.z0.glb.clouddn.com/navbar_example.png)
状态栏贯穿了整个屏幕的宽度,高度是24dp。
导航栏相同贯穿了整个屏幕的宽度。高度是48dp。
只是在非常多国内定制的系统其中,由于手机已经有了实体按键。就取消了导航栏。
状态栏和导航栏的背景颜色是能够各自改变的。透明、半透明、不透明。
![](http://7xrwhw.com1.z0.glb.clouddn.com/statusbar_status.png)
![](http://7xrwhw.com1.z0.glb.clouddn.com/navbar_status.png)
为了配合不同应用的使用场景,状态栏和导航栏的显示也有不同的表现,
沙发模式(Lean back):就像在瘫坐在沙发上看电影时一样,屏幕尽可能的呈现视频内容,把状态栏和导航栏都藏起来。
这个过程中你差点儿不会去接触到屏幕,当你碰触屏幕的时候,状态栏和导航栏才会出现。
沉浸模式(Immersive):比方当你在使用阅读软件看书的时候,屏幕仅仅显示书本的内容,把状态栏和导航栏隐藏起来,让你沉浸在阅读的快乐其中。但每次翻页的时候,你还是须要接触屏幕的。尽管翻页的过程中接触了屏幕,状态栏和导航栏也不会出现,除非你在屏幕的边缘做了一个滑动的动作。才干将它们再次唤出。
关灯模式(Light out):当你不碰触屏幕超过一定的时间。状态栏会自己主动的隐退;导航栏尽管还在那里。可是那三个操作的button却变成了三个小点。这个过程就好像是关闭了照亮屏幕的灯。状态栏和导航栏似乎还在那里,仅仅是没有了灯光。已经看的不真切了。
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有不论什么的意见和建议请留言,我都会尽量一一回复。
假设您认为本文对你有帮助。请推荐给很多其它的朋友;或者添加我们的QQ群348702074和很多其它的小伙伴一起讨论。也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。
除了CSDN公布的文章,本系列最新的文章将会首先公布到我的专属博客book.anddle.com。
大家能够去那里先睹为快。
转载于:https://www.cnblogs.com/zhchoutai/p/8724467.html
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种: 对于个人开发者,版本管理能记录开发的变迁.它记录了所有文档 ...
- android应用开发-从设计到实现 2-3 颜色的运用
颜色的运用 Material Design采用的是扁平化的设计,可以看到一大块一大块区域的颜色.这些颜色大多亮丽引人,整个界面上搭配的颜色也不会太多,基本保持在三种颜色以内. "没有错误的颜 ...
最新文章
- Mongodb地理空间索引
- 快速排序(quicksort)算法实现
- mongodb 监控项详解(mms)
- oracle 10g em 乱码问题解决方法
- 微信小程序开发打开另一个小程序的实现方法
- 一步一步学DataGuard之基础篇
- leetcode-生成括号(回溯算法)
- spring oauth2 OAuth2AuthenticationProcessingFilter 校验token过滤器
- [脚本收集]提取Tripntale图片
- [Java] 蓝桥杯PREV-5 历届试题 错误票据
- Access to the path Library\UnityAssemblies\UnityEngine.xml is denied.
- 使用客户端行为来丰富 ASP.NET的DataGrid(转)
- MessageDialog MessageDialogPage
- 翻译:如何理解梯度下降算法Gradient Descent algorithm
- python statsmodel 回归结果提取(回归系数、t值、pvalue、R方、、、、)
- VNC远程控制软件,VNC远程控制软件如何实现批量管理服务器
- 同时展示多张图片的无缝轮播
- 立方体在三维坐标中的旋转(3D,Spining)
- 时间戳转换为String
- 【深入kotlin】 - 与Java互操作:kotlin调用java