静态原型的Appbar

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

Toolbar参数确定

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

1. 这是一个高度为56dp的矩形区域；

2. 当Appbar收缩时，应用的名字会显示出来，

   

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

   

添加Toolbar

先添加区域，

1. 选择Insert -> Shape -> Rectangle(或者快捷按键R)；

2. 在期望的位置，拖动出一个56px*360px的矩形框；拖动的过程中，矩形尺寸会动态的显示出来；

   

   此时画板上已经多出了一个叫做Rectangle的形状。

3. 假如尺寸有偏差也没有关系，可以通过修改属性区域的高宽数值，进行精确的修改

   

4. 修改背景颜色为Primary Color：#3F51B5，

   

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

1. 选择Insert -> Text(或者快捷按键T)；
2. 在Toolbar的大致位置进行点击，写下位置名称-成都；此时画板上多出了Text组件；

3. 修改新组件的属性为，

   

4. 选中Rectangle和成都组件，使用cmd + G，将其组合成Toolbar

   

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

1. 选择Toolbar下的所有组件，点击垂直对齐的按钮，

   

2. 标题的左边距是16dp，选中成都，同时按下alt按键，可以看到成都上下左右的边距大小，使用方向键调整左边距的大小即可，

   

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

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

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

天气详情区域参数设定

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

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

整体设计上讲，天气详情区域、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，我们将它移出，

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

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

添加天气图标

引入天气图标，

1. 打开之前准备好的资源文件夹，把晴间多云的图标-阴晴拖入工作区域，尺寸设置成120dp*100dp；

2. 将刚引入的阴晴与之前的weather icon bg组合成一个新的组件-Weather icon，并将阴晴水平居中放置，

   

3. 展开阴晴，修改其颜色成Accent Color：#FFC107，

   

4. 移除weather icon bg的背景颜色，

   

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

添加温度信息

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

对组件结构进行调整，

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

添加位置

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

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

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

---

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

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

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

---

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

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

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