静态原型的更多天气信息

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

参数设计

列表项的高度在Material Design中，被定义成了48dp；并且整个list的顶部还有8dp的边距。

列表项由3部分组成，

• 图标：

* 项目名称：

* 项目取值（参考）：

注意：以上的数据都在Material Design的文档List当中有明确的定义。

添加列表项区域

创建一个360dp*48dp的矩形区域-row bound，作为第一条数据项使用的空间，

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

添加图标

系统图标的尺寸是24dp的正方形，但是最外一圈还要有2dp的边距，所以真正的图标内容是局限在一个20dp*20dp的区域内的。

首先，

1. 创建一个24dp*24dp的矩形-icon bound；
2. 放到距row bound左边距16dp的位置；
3. 让它垂直居中；

然后，

1. 从事先准备好的资源文件中，找到风力.svg，拖入到Sketch的工作区域；调整图片大小为20dp*20dp;

2. 颜色设置成#000000，透明度54%；

3. 将其放置于icon bound的中心位置；

4. 删除icon bound的背景色和边线；

添加项目名称

在row bound的区域内，

1. 添加风力文字；
2. 设置左边距为72dp；
3. 字体为Noto，大小为16sp，字形是Regular；
4. 字体颜色设置成#000000，透明度为87%；

添加项目取值

在row bound的区域内，

1. 添加3级文字；
2. 设置右边距为16dp；
3. 字体为Noto，大小为14sp，字形是Regular；
4. 字体颜色设置成#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灯，相关的配套文档也可以在这里看到。

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

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