6a4e5fb12709a71b31a75f0eebfe9368
快速掌握 Xcode 预览

Session 233:Mastering Xcode Previews
作者:Hale

Xcode 编译项目时间漫长曾困扰多少 iOS 开发者。很多时候我们只是修改了一点 UI 相关的代码,想要看到效果我们就必须 重新 build 项目,即使 Xcode 有增量编译的优化,还是需要我们等待。这一次伴随着 SwiftUI 的到来,Xcode 也终于支持 Hot Reload 了!!!Xcode 11 支持在编辑器中显示用户界面的预览,我们可以在左侧编写代码,右侧预览界面实时刷新,无需重新运行项目我们就可以看到新的呈现了。通过本 Session 我们将了解到 Xcode 预览的工作原理,如何对 SwiftUI 应用程序进行预览,并尝试对其结构进行优化,以及如何为现有的 UIKit 视图和视图控制器添加预览支持。

Xcode 预览原理

其实 Xcode 是通过一种特殊的编译方式实现了实时预览。由于 Xcode 总是能够知道我们当前操作的视图文件,这样一来 Xcode 就能单独编译这个视图文件,利用 Swift dynamic repacement 特性将新的实现注入到运行的程序中。由于 Xcode 只需要编译一个文视图文件,所以速度会非常快,自然给我们的感觉就是实时在刷新。像一些只调整字符串或数字的改动甚至都不需要重新编译。如图1所示:

图1

实现预览

struct KoalaCellPreviews : PreviewProvider {
    static var previews: some View {
        KoalaCell()
    }
}

基于 SwiftUI 实现预览需要我们实现 PreviewProvider 协议, 在协议约定的 previews 属性中返回对应的视图。如图2所示:

图2

Xcode 预览支持同时展示多个不同种类的预览视图,还支持以视图实际尺寸大小展示。如图3所示:

图3

Development Assets

Xcode 11 为 Previews 提供了 Development Assets,这里面的资源不会被打包到最终的 Release 版本中。这对我们在开发前期制作一些快速原型非常有帮助。该配置项位于 Targets -> General -> Development Assets。如图4所示:

图4

优化 Previews 架构

Apple 建议在编写 Previews 应用程序时,将普通 Model 用 View Model 进行封装,View Model 中只保留需要的数据字段,并根据显示做一些合并或者其他的处理。这不仅能使程序更加简明也能够更方便的编写测试用例。降低因为数据错误而导致布局错误的可能性。

```
// Animal
class Animal {
let commonName: String
let class: String
let genus: String
let species: String
weak var clade: Clade?
let genome: Genome
let imageName: String
}

// AnimalCellModel -- AnimalCell's View Model
struct AnimalCellModel {
let commonName: String
let class: String
let scientificName: String
let image: String?
}

extension AnimalCellModel {
init(for animal: Animal) {
self.commonName = animal.commonName
self.scientificName = "\(animal.genus) \(animal.species)"
...
}

top Created with Sketch.