静态原型的天气预报
未来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,