静态原型的更多天气信息
天气的更多信息，是通过列表的形式展现的。
参数设计
列表项的高度在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灯，相关的配套文档也可以在这里看到。
这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。
最后再次感谢各位读者对安豆的支持，谢谢:)