静态原型的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的内容就添加完毕了。
