静态原型的天气预报

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

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

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

     3_3_table_date_font
  6. 温度范围的文字,参考Caption的文字类型:

     3_3_table_temp_font

创建预报区域

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

 sketch_forcast_area_settings

添加一个预报模块

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

 sketch_forcast_item_bound

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

 sketch_forcast_item_icon_color

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

 sketch_forcast_item_date_settings
 sketch_forcast_item_temp_settings

雪``bound``明天``18℃~21℃组合起来,形成-明天;并调整它们的位置,使之居中,

 sketch_forcast_item_group

添加第二个预报模块

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

 sketch_forcast_item_2

修改的图标成

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

添加三个预报模块

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

 sketch_forcast_item_5

位置排列

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

 sketch_forcast_group

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

 sketch_forcast_bg_adjust_center

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

 sketch_forcast_bg_adjust_center

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

 sketch_forcast_bg_adjust_center

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

 sketch_forcast_complete

添加隔断

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

 sketch_gap_settings