静态原型的Appbar

我们设计的Appbar包括了两个部分，一个是toolbar，另一个就是flexible space-显示当日天气的详细信息，

Toolbar参数确定

添加Toolbar很简单，首先找到Material Design中对Appbar的描述可以知道，

这是一个高度为56dp的矩形区域；
当Appbar收缩时，应用的名字会显示出来，

注意：这里显示的是中文-Dense类型的文字，所以文字的大小比英文要大1sp。

添加Toolbar

先添加区域，

选择Insert -> Shape -> Rectangle(或者快捷按键R)；
在期望的位置，拖动出一个56px*360px的矩形框；拖动的过程中，矩形尺寸会动态的显示出来；

此时画板上已经多出了一个叫做Rectangle的形状。
假如尺寸有偏差也没有关系，可以通过修改属性区域的高宽数值，进行精确的修改
修改背景颜色为Primary Color：#3F51B5，

接下来添加应用名称：这里要显示的并不是应用的真实名称，而是天气预报的位置，

选择Insert -> Text(或者快捷按键T)；
在Toolbar的大致位置进行点击，写下位置名称-成都；此时画板上多出了Text组件；
修改新组件的属性为，
选中Rectangle和成都组件，使用cmd + G，将其组合成Toolbar

再来进行标题位置的设置，

选择Toolbar下的所有组件，点击垂直对齐的按钮，
标题的左边距是16dp，选中成都，同时按下alt按键，可以看到成都上下左右的边距大小，使用方向键调整左边距的大小即可，

因为此时并不需要显示位置信息，所以要点击成都组件旁边的眼睛按钮，把内容隐藏起来。

使用alt查看组件的边距是一个常用的技巧，查看的同时，如果移动鼠标到不同的区域，就能看到组件相对于不同区域的边距数值，这让我们在排版的时候非常的方便。

至此，Toolbar的设置就完成了。

天气详情区域参数设定

天气详情区域由三个部分组成，

天气图标；
当前温度，当日温度范围；
位置信息；

整体设计上讲，天气详情区域、Toolbar和状态栏都是整体的蓝色，占据整个屏幕空间的一半。因此这里将天气详情区域的高度，设计成245dp，它内部的元素都布局在360dp*245dp的区域范围内。

图标和温度的设计是比较自由的，只要设计师觉得美观就好了。我将它们放在两个150dp*100dp的矩形当中，让它们的左、右、上边距都成为24dp。

当前温度，采用Display 3的类型，

项目	数值
字体	Noto
字形	Regular
大小	56sp
颜色	FFFFFF
透明度	70%

当日温度范围，采用Headline的类型，

项目	数值
字体	Noto
字形	Regular
大小	24sp
颜色	FFFFFF
透明度	100%

位置信息，采用Display 1的类型，

项目	数值
字体	Noto
字形	Regular
大小	34sp
颜色	FFFFFF
透明度	100%
左边距	24dp
下边距	24dp

注意：Noto字体和Roboto字体对于English-like是兼容的，所以当表示数字、英文字母的时候，两者都可以使用。

添加天气详情

根据之前的规划，划出360px*245px的矩形区域，背景色修改成Primary Color：#3F51B5。默认情况下创建的矩形会有border，我们将它移出，

创建两个150dp*100dp的矩形，准备用它们分别装入天气图标和温度信息;
将新创建的矩形和bg进行组合；

调整两者顶部和左右的边距为24dp，

添加天气图标

引入天气图标，

打开之前准备好的资源文件夹，把晴间多云的图标-阴晴拖入工作区域，尺寸设置成120dp*100dp；
将刚引入的阴晴与之前的weather icon bg组合成一个新的组件-Weather icon，并将阴晴水平居中放置，
展开阴晴，修改其颜色成Accent Color：#FFC107，
移除weather icon bg的背景颜色，

在对图标进行居中设置的时候，需要选中阴晴和weather icon bg，使用水平居中对齐功能。weather icon bg在这里充当了被对齐的参照物，在使用Sketch设计的时候，经常需要添加一个这样的辅助设计元素。

添加温度信息

使用快捷按键T，在相应的位置，添加两个文字输入区域，写上对应的内容，并设置好对应的字体属性。

对组件结构进行调整，

对文字进行水平居中的排列，并移除背景的颜色，

添加位置

在适当的位置，添加一个Text组件，写入成都，做好设置，

注意，它的左边距和下边距都是24dp。

至此，整个Appbar的内容就添加完毕了。

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯，相关的配套文档也可以在这里看到。

这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对安豆的支持，谢谢:)

android应用开发-从设计到实现 3-5 静态原型的Appbar相关推荐

android应用开发-从设计到实现 3-3 Sketch静态原型设计
Sketch静态原型设计对于静态原型的设计,我们使用Sketch. 启动Sketch后,我们将看到类似如下的界面, 工具栏它的顶部是工具栏, 可以通过菜单栏View -> Customize ...
android应用开发-从设计到实现 3-9 Origami动态原型设计
动态原型设计动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具. 开发者不需要猜测设计师要什么样的效果,照着原型产品做就好了. 很多创业团队也发现了产品人的这个刚需,做出 ...
android应用开发-从设计到实现 2-4 文字的使用
文字的使用文字是应用当中使用最多的要素.显示一段供用户阅读的文字,程序运行时的信息提示都离不开它. 文字是内容的实际体现者,因此设计师需要将用户的注意力尽可能的吸引到文字当中. 字体可以分成两种类型 ...
android应用开发-从设计到实现 4-10 解析天气预报数据
解析天气预报数据界面布局完成以后,就需要设计代码来控制界面上各个元素的逻辑了. 从网络获取天气预报数据: 解析获取的数据: 根据解析的结果更新天气预报界面: 天气预报的数据依赖于网络端的服务器,不是 ...
android应用开发-从设计到实现 2-1 设计原理
设计原理设计是一门让人感觉很抽象的艺术.设计需要从两个方面来考虑问题: 实用:体现在功能上和交互性上: 美观:体现在界面的布局,色彩的搭配,字体的运用上: 对于我们的安卓应用来讲,设计的目的就是要体 ...
android应用开发-从设计到实现 3-4 静态原型的状态栏
静态原型的状态栏状态栏Symbol 状态栏似乎很复杂,有wifi信号.手机信号.时间.电量等信息,幸好Sketch原生就自带的现成组件,你可以直接拿过来就用了.当然,你也可以自己一个一个去画,不过既 ...
android应用开发-从设计到实现 3-6 静态原型的天气预报
静态原型的天气预报未来5天的天气预报,可以看成由5个类似的天气模块构成,只要完成一个,其他几个就可以通过复制+修改内容实现改变. 首先来明确一下各个组件的尺寸和参数, 整个区域的大小,我设定成360 ...
android应用开发-从设计到实现 4-4版本管理
版本管理前面已经提到了,非常有必要对开发的代码进行管理.那么进行版本管理到底什么时候使用呢? 我总结了使用版本管理的主要场景,有以下3种: 对于个人开发者,版本管理能记录开发的变迁.它记录了所有文档 ...
android应用开发-从设计到实现 2-3 颜色的运用
颜色的运用 Material Design采用的是扁平化的设计,可以看到一大块一大块区域的颜色.这些颜色大多亮丽引人,整个界面上搭配的颜色也不会太多,基本保持在三种颜色以内. "没有错误的颜 ...

android应用开发-从设计到实现 3-5 静态原型的Appbar