了解Sky的项目结构和UI构成

在这个系列里，我们通过从零开始开发一个完整的天气App - Sky，来理解并掌握MVVM的编程思想。并且，在这个过程中，我们还会引入RxCocoa、单元测试，以及UI测试等内容，尽可能还原一个比较真实的App独立开发场景。

作为整个系列的开始，我们先了解一下这个App的大体构成，并用MVC的方式勾勒出一个轮廓。这样，我们就会很自然的从一些熟悉的场景，过渡到MVVM了。

整理项目目录

首先，还是创建一个Single View Application，这不过这次，记得把Include Unit Tests和Include UI Tests选上，在稍后的内容里，我们会涉及到单元测试以及UI测试的内容：

FrameTheAppInMVC

其次，我们把Xcode默认创建的项目目录结构调整成下面这个样子：

FrameTheAppInMVC

它们的含义大多简单直观，我们就不再一一说明了。这里，有两点要说明下：

• 在大家下载下来的项目初始模板里，Assets.xcassets中已经包含了项目需要的所有图片资源；
• 当我们把Info.plist放在了SupportingFiles目录下之后，如果我们直接编译项目，就会看到下面这样的错误：

FrameTheAppInMVC

这时，我们就要在TARGETS中选中Sky，然后，在Build Settings里把Info.plist File的设置修改成对应的位置：

FrameTheAppInMVC

这样，就不会再有错误了。

从设计首页Storyboard开始

接下来，打开Main.storyboard，我们从构建首屏UI开始。在这个界面上，我们先拖两个Container View进来，其中，上半部分用于显示当前的天气信息；下半部分将会设计成一个UITableView，用于显示天气预告：

FrameTheAppInMVC

然后，设置上下两部分容器的位置约束：

FrameTheAppInMVC

完成后，选中上半部分的Container View，按住Ctrl拖拽到下面的Container View上，在弹出的菜单中，选择Vertical Spacing和Equal Heights

FrameTheAppInMVC

最后，在storyboard中选中Equal Heights约束，在Attribute Inspector中，把Multiplier选项设置成2:3。这样，上下两部分在任何屏幕上，就都有固定的比例显示了。

FrameTheAppInMVC

完成后，我们来处理显示当前天气的部分，为了方便整体控制这部分内容的加载，我们先拖一个UIView进来作为这部分所有其他元素的容器，并按下图给它设置约束：

FrameTheAppInMVC

接下来，拖一个UIImageView进来，表示当前天气的图片，按照下图给它添加约束之后，在Attribute Inspector里，把默认的图片设置成clear-day：

FrameTheAppInMVC

完成后，我们拖两个UIButton进来，放在这个区域的左右上角，并按下图设置它们的属性和位置约束：

FrameTheAppInMVC

这里，要注意的是，一定要清空这两个按钮的默认文字内容，否则会影响计算它们的大小。其中，左边的按钮用于切换地区，右边的按钮，用于对App的行为进行一些设置，它们都将是我们在稍后的内容中实现的部分，现在，只是把它们放在这里就好了。

完成后，我们添加一些UILabel。第一个，表示当前所在城市：

FrameTheAppInMVC

第二个，表示当前天气的文字描述：

FrameTheAppInMVC

第三个，表示当前时间：

FrameTheAppInMVC

第四个，表示当前温度：

FrameTheAppInMVC

第五个，表示当前湿度：

FrameTheAppInMVC

这样，表示当前温度信息的UI部分就完成了，直接执行一下，可以在模拟器里，看到下面这样的结果：

FrameTheAppInMVC