Master MVVM in Swift<1>

时间 2019-12-02

标签 master mvvm swift 栏目 Swift 繁體版

原文原文链接

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

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

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

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

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

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

在你们下载下来的项目初始模板里，Assets.xcassets中已经包含了项目须要的全部图片资源；
当咱们把Info.plist放在了SupportingFiles目录下以后，若是咱们直接编译项目，就会看到下面这样的错误：

frame-the-app-in-mvc-3@2x.png

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

这样，就不会再有错误了。单元测试

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

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

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

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

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

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

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

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

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

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

第三个，表示当前时间：

第四个，表示当前温度：

第五个，表示当前湿度：

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

至此，咱们UI的构建工做就能够告一个段落了。由于这些UI以及咱们对App整个结构的描述，已经足够开始探索一些MVC的问题，以及MVVM对应的解决方法了。在下一节里，咱们将了解一个能够访问到天气的API服务，并以此设计Sky用到的model。