模块4：主视图UI布局

2019-03-13 本文已影响0人 jingz课程

介绍

在模块3中，我们完成了iWeather应用项目主界面的总体框架，即采用抽屉布局来进行导航。在模块4中，我们将重点关注抽屉框架中的主视图部分。这是整个应用程序UI体系中最显要的部分。

主视图效果图及线框图

以上是主视图布局效果图和示意图。同时，按照设计主屏幕支持用户左右滑动切换页面以不同位置的天气信息：

左右划屏切换页面

对主屏幕布局结构进行分析，可以划分出以下几个层次：

顶部系统状态栏 + 底部虚拟按键栏：这两项是系统组件，但是我们也可以配置其风格使它们符合我们的视觉设计要求。
导航栏：它紧贴系统状态栏的下方，并且包含左、中、右三部分，分别是抽屉菜单按钮、标题文字、增加新位置按钮。
内容视图：展示当地天气信息。这是主视图中的主要内容呈现部分。观察其设计特点，又可划分为前景文字信息部分和背景天气图片部分。其中最有特点的是背景天气图片它占据整个屏幕，甚至延伸到了系统状态栏、虚拟按键栏以及导航栏背后，形成了全屏幕浑然一体的视觉效果。

用户界面层次

上图是对用户界面中各主要单元的层次划分。我们的开发工作即可根据这种划分来依次展开。在本单元，我们将完成以下任务：