android应用开发-从设计到实现 3-6 静态原型的天气预报

静态原型的天气预报

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

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

整个区域的大小，我设定成360dp*100dp；

左右边距设置成

16dp

；

这样一来，每日的天气模块就是（360-16-16）/ 5 = 65.6dp，我将它们设定成

65dp

宽；

天气的图标的大小设定成30dp的正方形区域（注意，这些图标不算是系统图标，所以它的尺寸不需要参考设计成24dp的系统图标）；

日期的文字，参考

Body 2

的文字类型：



温度范围的文字，参考

Caption

的文字类型：

创建预报区域

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

添加一个预报模块

添加一个65dp*100dp的背景限制区域-

bound

，以后每个预报模块的内容都要放到这个区域当中。这也是一个很有用的技巧。



从事先准备好的资源文件夹中，添加

雪

，并使用

Primary Color

-

#3F51B5

给它上色，



将预测温度和温度范围添加进去，并用

Body 2

和

Caption

分别设定它们的属性，





将

雪``bound``明天``18℃～21℃

组合起来，形成-

明天

；并调整它们的位置，使之居中，

添加第二个预报模块

复制

明天

组件，产生第二个预报模块，修改第二个模块的名称和内容为

星期六

，



修改

雪

的图标成

晴

。

将资源

晴

从文件中拖到

工作区域

；

参考之前的方式调整图标的大小、位置和颜色；

将原来的图标

雪

，删除；

添加三个预报模块

之后，重复之前的动作，完成

星期日

星期一

星期二

的内容创建，

位置排列

将

明天

星期六

星期日

星期一

星期二

与

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

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

最后再次感谢各位读者对

安豆

的支持，谢谢:)