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

静态原型的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灯，相关的配套文档也可以在这里看到。

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

最后再次感谢各位读者对

安豆

的支持，谢谢:)