静态原型的天气预报

未来5天的天气预报，可以看成由5个类似的天气模块构成，只要完成一个，其他几个就可以通过复制+修改内容实现改变。

首先来明确一下各个组件的尺寸和参数，

1. 整个区域的大小，我设定成360dp*100dp；
2. 左右边距设置成16dp；
3. 这样一来，每日的天气模块就是（360-16-16）/ 5 = 65.6dp，我将它们设定成65dp宽；
4. 天气的图标的大小设定成30dp的正方形区域（注意，这些图标不算是系统图标，所以它的尺寸不需要参考设计成24dp的系统图标）；

5. 日期的文字，参考Body 2的文字类型：

   

6. 温度范围的文字，参考Caption的文字类型：

   

创建预报区域

接下来，我们开始创建预报区域。划定一个360dp*100dp的区域，

添加一个预报模块

添加一个65dp*100dp的背景限制区域-bound，以后每个预报模块的内容都要放到这个区域当中。这也是一个很有用的技巧。

从事先准备好的资源文件夹中，添加雪，并使用Primary Color-#3F51B5给它上色，

将预测温度和温度范围添加进去，并用Body 2和Caption分别设定它们的属性，

将雪``bound``明天``18℃～21℃组合起来，形成-明天；并调整它们的位置，使之居中，

添加第二个预报模块

复制明天组件，产生第二个预报模块，修改第二个模块的名称和内容为星期六，

修改雪的图标成晴。

1. 将资源晴从文件中拖到工作区域；
2. 参考之前的方式调整图标的大小、位置和颜色；
3. 将原来的图标雪，删除；

添加三个预报模块

之后，重复之前的动作，完成星期日 星期一 星期二的内容创建，

位置排列

将明天 星期六 星期日 星期一 星期二与forcast_bg组合到一起，形成Forcast，

因为要给左右两端留下16dp的内容，明天 星期六 星期日 星期一 星期二没有办法水平瓜分forcast_bg占据的空间。所以这里我就使用了一个小把戏：把forcast_bg的宽度缩短32dp，变成328dp，并将它水平居中，

再调整明天和星期二的水平位置，使之刚好位于forcast_bg区域之内，

再选中明天 星期六 星期日 星期一 星期二与forcast_bg，使用水平分配空间的功能，让预报模块平均占用空间，

最后，出去背景颜色，预报区域就全部完成了，

添加隔断

为了界面分层，逻辑清楚，我在预报区域的下面，设计了一个360dp*10dp的隔离带，颜色为：#BDBDBD，

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

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

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

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

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

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