android应用开发-从设计到实现 3-7 静态原型的更多天气信息

静态原型的更多天气信息

天气的更多信息，是通过列表的形式展现的。

参数设计

列表项的高度在

Material Design

中，被定义成了

48dp

；并且整个

list

的顶部还有

8dp

的边距。

列表项由3部分组成，

图标：

项目	数值
大小	24dp
左边距	16dp
位置	垂直居中
颜色	000000
透明度	54%

* 项目名称：

项目	数值
字体	Noto
字形	Regular
大小	16sp
颜色	000000
透明度	87%
左边距	72dp
位置	垂直居中

* 项目取值（参考）：

项目	数值
字体	Noto
字形	Regular
大小	14sp
颜色	000000
透明度	54%
右边距	16dp
位置	垂直居中

注意：以上的数据都在

Material Design

的文档List当中有明确的定义。

添加列表项区域

创建一个360dp*48dp的矩形区域-

row bound

，作为第一条数据项使用的空间，



注意：

list

的顶部

8dp

边距，这里还没有加上。因为我准备在添加完成所有的列表项后，再做整体的移动。

添加图标

系统图标的尺寸是

24dp

的正方形，但是最外一圈还要有

2dp

的边距，所以真正的图标内容是局限在一个20dp*20dp的区域内的。



首先，

创建一个24dp*24dp的矩形-

icon bound

；

放到距

row bound

左边距

16dp

的位置；

让它垂直居中；



然后，

从事先准备好的资源文件中，找到

风力.svg

，拖入到

Sketch

的

工作区域

；调整图片大小为

20dp*20dp

;



颜色设置成

#000000

，透明度

54%

；



将其放置于

icon bound

的中心位置；



删除

icon bound

的背景色和边线；

添加项目名称

在

row bound

的区域内，

添加

风力

文字；

设置左边距为

72dp

；

字体为

Noto

，大小为

16sp

，字形是

Regular

；

字体颜色设置成

#000000

，透明度为

87%

；

添加项目取值

在

row bound

的区域内，

添加

3级

文字；

设置右边距为

16dp

；

字体为

Noto

，大小为

14sp

，字形是

Regular

；

字体颜色设置成

#000000

，透明度为

54%

；

列表项组合

将

风力

文字、

风力

图标、

3级

、

row bound

、

icon bound

组合成一个新的组件

风力

，



最后把

row bound

的背景色和边线移除掉，

添加多个列表项

复制粘贴第一个列表项，把剩余的项目以此添加到画板当中，



之后将它们组合成一个组件-

More info

，



最后再整体把

More info

向下移动

8dp

，使之符合

List

的设计规范，



这里有个技巧：在制作列表的时候，会发现数据已经超出了手机屏幕的高度，这时候，可以把

Mobile Portrait

的高度扩展到足以容纳的尺寸，



至此，整个主要界面的设计就完成了。

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

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

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

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

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

最后再次感谢各位读者对

安豆

的支持，谢谢:)