原文：IGListKit Tutorial: Better UICollectionViews
作者：Ryan Nystrom
译者：kmyhy
每个 app 都以同样的方式开始：几个界面，几颗按钮，一两个 list。但随着进度的进行以及 app 膨胀，功能开始发生变化。你简单的数据源开始在工期和产品经理的压力下变得支离破碎。再过一久，你留下一堆庞大得难以维护的 view controller。今天，IGListKit 来拯救你了！
IGListKit 专门用于解决在使用 UICollectionView 时出现的功能蔓延（需求蔓延）和 view controller 膨胀的问题。用 IGListKit 创建列表，你可以使用非耦合组件来构建 app，飞快的刷新，支持任何类型的数据。
本教程中，你将重构一个 UICollectionView 成 IGListKit，然后扩展 app，让它超凡脱俗！
开始
如果你是 NASA 的顶尖软件工程师，正在从事最新的火星载人飞行任务。开发团队已经做好了第一版的 MarsLink app，你可以在[这里](https://koenig-media.raywenderlich.com/uploads/2016/12/Marslink_Starter.zip）下载。下载完这个项目，打开 Marslink.xcworkspace 并运行 app。
这个 app 简单地列出了宇航员的飞行日志。
你的任务是当团队需要新功能时，添加新功能给这个 app。打开 Marslink\ViewControllers\ClassicFeedViewController.swift 随便看看，熟悉一下项目。如果你用过 UICollectionView，你会发现它非常普通：
- ClassicFeedViewController 继承了 UIViewController ，并用一个扩展实现 了 UICollectionViewDataSource 协议。
- viewDidLoad() 中创建了一个 UICollectionView, 注册了 cell，设置了数据源，然后将它添加到视图树中。
- loader.entries 数组保存了几个 section，每个 section 中有两个 cell（一个日期，一个文字）。
- 日期 cell 显示阳历的日期，文本 cell 显示日志内容。
- collectionView(_:layout:sizeForItemAt:) 方法返回一个固定的大小用于日期 cell，以及一个根据字符串大小计算出来的 size 给文本 cell。
每件事情都很完美，但是项目 leader 带来了一个紧急的产品升级需求：
在火星上，一名宇航员搁浅了。我们需要添加一个天气预报模块和实时聊天。你只有48小时的时间。
JPL(喷气推进实验室，Jet Propulsion Laboratory) 的工程师要用到这些功能，但需要你将他们放到这个 app 中来。
如果把一名宇航员带回家的压力还不够大的话，NASA 的首席设计师还有一个需求，app 中每个子系统的升级必须是的平滑的，也就是不能 reloadData()。
你怎么会以为将这些模块集成到一个伟大的 app 中并创建所有的转换动画？这名宇航员已经没有多少土豆了！
IGListKit 介绍
UICollectionView 是一个极其强大的工具，与其强大一起的是负有同样大的责任。保持你的数据源和视图同步是极其重要的，通常崩溃就是因为这里没搞好。
IGListKit 是一个数据驱动的 UICollectionView 框架，有 Instagram 团队编写。使用这个框架，你提供一个对象数组用于显示到 UICollectionView 中。对于每种类型的对象，需要创建一个 adapter，也叫做 section controller，里面包含了所有创建 cell 所需要的细节。
IGListKit 自动识别你的对象并在任何东西发生变化时在 UICollectonView 上执行批量动画刷新。这样，你就永远不需要编写 batch update 语句，避免这里列出的警告。
将 UICollectionView 换成 IGListKit
IGListKit 负责所有识别 collection 中发生变化，并以动画方式刷新对应的行。它还能够轻易处理针对不同的 section 使用不同的 data 和 UI 的情况。考虑到这一点，它能够完美解决当前需求——让我们开始吧！
在 Marslink.xcworkspace 打开的情况下，右击 ViewControllers 文件夹并选择 New File…。新建一个 Cocoa Touch Class 继承于 UIViewController 并命名为 FeedViewController。
打开 AppDelegate.swift 找到 application(_:didFinishLaunchingWithOptions:) 方法。找到将ClassicFeedViewController() push 到 navigation controller 的行，将它换成：
nav.pushViewController(FeedViewController(), animated: false)FeedViewController 现在成为了 root view controller。你可以保留 ClassicFeedViewController.swift 作为参考，但 FeedViewController 将作为你使用 IGListKit 实现一个 collection view 的地方。
运行程序，确保你能看到一个崭新的、空白的 view controller shows。
添加 Journal loader
打开 FeedViewController.swift 在 FeedViewController 顶部添加属性:
let loader = JournalEntryLoader()JournalEntryLoader 是一个类，用于加载一个硬编码的日志记录到一个数组中。
在 viewDidLoad() 最后一行添加:
loader.loadLatest()loadLatest() 是 JournalEntryLoader 中的方法，加载最新的日志记录。
加入 collection view
现在来添加某些 IGListKit 的特殊控件到 view controller 中了。在这样做之前，你需要引入这个框架。在 FeedViewController.swift 顶部加入 import 语句:
import IGListKit注意：本示例项目使用 CocoaPods 管理依赖。IGListKit 是 Objective-C 些的，因此需要在桥接头文件中用 #import 手动添加到你的项目。
在 FeedViewController 顶部添加一个 collectionView 常量:
// 1
let collectionView: IGListCollectionView = {
// 2
let view = IGListCollectionView(frame: CGRect.zero, collectionViewLayout: UICollectionViewFlowLayout())
// 3
view.backgroundColor = UIColor.black
return view
}()- IGListKit 使用了 IGListCollectionView, 这是一个 UICollectionView 的子类，添加了某些功能并修复了某些缺陷。
- 一开始用一个大小为 0 的 frame，因为 view 都还没创建。它也使用了 UICollectionViewFlowLayout ，就像 ClassicFeedViewController 一样。
- 背景色设为 NASA-认可的黑色。
在 viewDidLoad() 方法最后一句加入:
view.addSubview(collectionView)这将新的 collectionView 添加到 controller 的 view。
在 viewDidLoad() 下面加入：
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
collectionView.frame = view.bounds
}viewDidLayoutSubviews() 是一个覆盖方法，将 collectionView的 frame 设为view 的 bounds。
IGListAdapter 和数据源
使用 UICollectionView，你需要某个数据源实现 UICollectionViewDataSource 协议。它的作用是返回 section 和 row 的数目以及每个 cell。
在 IGListKit 中，你使用一个 GListAdapter 来控制 collection view。你仍然需要一个数据源来实现 IGListAdapterDataSource 协议，但不是返回数字或 cell，你需要提供数组和 controllers(后面会细讲)。
首先，在 FeedViewController.swift 在头部加入：
lazy var adapter: IGListAdapter = {
return IGListAdapter(updater: IGListAdapterUpdater(), viewController: self, workingRangeSize: 0)
}()这创建了一个延迟加载的 IGListAdapter 变量。这个初始化方法有 3 个参数：
- updater 是一个实现了 IGListUpdatingDelegate 协议的对象, 它负责处理 row 和 section 的刷新。IGListAdapterUpdater 有一个默认实现，刚好给我们用。
- viewController 是一个 UIViewController ，它拥有这个 adapter。 这个 view controller 后面会用于导航到别的 view controllers。
- workingRangeSize 是 warking range 的大小。允许你为那些不在可见范围内的 section 准备内容。
注意：working range 是另一个高级主题，本教程不会涉及。但是在 IGListKit 的代码库中有它丰富的文档甚至一个示例 app。
在 viewDidLoad() 方法最后一行添加：
adapter.collectionView = collectionView
adapter.dataSource = self这会将 collectionView 和 adapter 联系在一起。还将 self 设置为 adapter 的数据源——这会报一个错误，因为你还没有实现 IGListAdapterDataSource 协议。
要解决这个错误，声明一个 FeedViewController 扩展以实现 IGListAdapterDataSource 协议。在文件最后添加：
extension FeedViewController: IGListAdapterDataSource {
// 1
func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
return loader.entries
}
// 2
func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
return IGListSectionController()
}
// 3
func emptyView(for listAdapter: IGListAdapter) -> UIView? { return nil }
}FeedViewController 现在采用了 IGListAdapterDataSource 协议并实现了 3 个必须的方法：
- objects(for:) 返回一个数据对象组成的数组，这些对象将显示在 collection view。这里返回了loader.entries，因为它包含了日志记录。
- 对于每个数据对象，listAdapter(_:sectionControllerFor:) 方法必须返回一个新的 section conroller 实例。现在，你返回了一个空的 IGListSectionController以解除编译器的抱怨——等会，你会修改这里，返回一个自定义的日志的 section controller。
- emptyView(for:) 返回一个 view，它将在 List 为空时显示。NASA 给的时间比较仓促，他们没有为这个功能做预算。
创建第一个 Section Controller
一个 section controller 是一个抽象的对象，指定一个数据对象，它负责配置和管理 CollectionView 中的一个 section 中的 cell。这个概念类似于一个用于配置一个 view 的 view-model：数据对象就是 view-model，而 cell 则是 view，section controller 则是二者之间的粘合剂。
在 IGListKit 中，你根据不同类型的数据的类型和特性创建不同的 section controller。JPL 的工程师已经放入了一个 JournalEntry model，你只需要创建能够处理这个 Model 的 section controller 就行了。
在 SectionController 文件夹上右击，选择 New File…，创建一个 Cocoa Touch Class 名为 JournalSectionController ，继承 IGListSectionController。
Xcode 不会自动引入第三方框架，因此在 JournalSectionController.swift 需要添加:
import IGListKit为 JournalSectionController 添加如下属性:
var entry: JournalEntry!
let solFormatter = SolFormatter()JournalEntry 是一个 model 类，在实现数据源时你会用到它。SolFormatter 类提供了将日期转换为太阳历格式的方法。很快你会用到它们。
在 JournalSectionController 中，覆盖 init() 方法：
override init() {
super.init()
inset = UIEdgeInsets(top: 0, left: 0, bottom: 15, right: 0)
}如果不这样做，section 中的 cell 会一个紧挨着一个。这个方法在每个 JournalSectionController 对象的下方增加 15 个像素的间距。
你的 section controller需要实现 IGListSectionType 协议才能被 IGListKit 所用。在文件最后添加一个扩展：
extension JournalSectionController: IGListSectionType {
func numberOfItems() -> Int {
return 2
}
func sizeForItem(at index: Int) -> CGSize {
return .zero
}
func cellForItem(at index: Int) -> UICollectionViewCell {
return UICollectionViewCell()
}
func didUpdate(to object: Any) {
}
func didSelectItem(at index: Int) {}
}注意: IGListKit 非常依赖 required 协议方法。但在这些方法中你可以空实现，或者返回 nil，以免收到“缺少方法”的警告或运行时报错。这样，在使用 IGListKit 时就不容易出错。
你实现了 IGListSectionType 协议的 4 个 required 方法。
所有方法都是无存根的实现，除了 numberOfItems() 方法— 返回了一个 2 ，表示一个日期和一个文本字符串。你可以回到 ClassicFeedViewController.swift 看看，在collectionView( _:numberOfItemsInSection:) 方法中你返回的也是 2。这两个方法基本上是一样的。
在 didUpdate(to:)方法中加入：
entry = object as? JournalEntrydidUpdate(to:) 用于将一个对象传给 section controller。注意在任何 cell 协议方法之前调用。这里，你把接收到的 object 参数赋给 entry。
注意：在一个 section controller 的生命周期中，对象有可能会被改变多次。这只会在启用了 IGListKit 的更高级的特性时候发生，比如自定义模型的 Diffing 算法。在本教程中你不需要担心 Diffing。
现在你有一些数据了，你可以开始配置你的 cell 了。将 cellForItem(at:) 方法替换为：
// 1
let cellClass: AnyClass = index == 0 ? JournalEntryDateCell.self : JournalEntryCell.self
// 2
let cell = collectionContext!.dequeueReusableCell(of: cellClass, for: self, at: index)
// 3
if let cell = cell as? JournalEntryDateCell {
cell.label.text = "SOL \(solFormatter.sols(fromDate: entry.date))"
} else if let cell = cell as? JournalEntryCell {
cell.label.text = entry.text
}
return cellcellForItem(at:) 方法询问到 section 的某个 cell（指定的 Index）时调用。以上代码解释如下：
- 如果 index 是第一个，返回 JournalEntryDateCell 单元格，否则返回 JournalEntryCell 单元格。日志数据总是先显示日期，然后才是文本。
- 从缓存中取出一个 cell，dequeue 时需要指定 cell 的类型，一个 section controller 对象，以及 index。
- 根据 cell 的类型，用你先前在 didUpdate(to objectd:)方法中设置的 entry 来配置 cell。
然后，将 sizeForItem(at:) 方法替换为:
// 1
guard let context = collectionContext, let entry = entry else { return .zero }
// 2
let width = context.containerSize.width
// 3
if index == 0 {
return CGSize(width: width, height: 30)
} else {
return JournalEntryCell.cellSize(width: width, text: entry.text)
}collectionContext 是一个弱引用，同时是 nullabel 的。虽然它永远不可能为空，但最好是做一个前置条件判断，使用 Swift 的 guard 语句就行了。
IGListCollectionContext 是一个上下文对象，保存了这个 section view 中用到的 adapter、collecton view、以及 view controller。这里我们需要获取容器 container 的宽度。
如果是第一个 index(即日期 cell)，返回一个宽度等于 container 宽度，高度等 30 像素的 size。否则，使用 cell 的助手方法根据 cell 文本计算 size。
最后一个方法是 didSelectItem(at:)，这个方法在点击某个 cell 时调用。这是一个 required 方法，你必须实现它，但如果你不想进行任何处理的话，可以空实现。
这种 dequeue 不同类型的 cell、对 cell 进行不同配置和并返回不同 size 的套路和你之前使用 UICollectionView 的套路并无不同。你可以回去 ClassicFeedViewController 看看，这些代码中有许多都很相似！
现在你拥有了一个 section controller，它接收一个 JournalEntry 对象，并返回连个 cell 和 size。接下来我们就来使用它。
打开 FeedViewController.swift, 将 listAdapter(_:sectionControllerFor:) 方法替换为:
return JournalSectionController()现在，这个方法返回了新的 Journal Section Controller 对象。
运行程序，你将看到一个航空日志的列表！
添加消息
JPL 工程师很高兴你能这么快就完成了修改，但他们还需要和那个倒霉的宇航员建立联系。他们要你尽快将消息模块也集成进去。
在添加任何视图之前，首先的一件事情就是数据。
打开 FeedViewController.swift 添加一个属性：
let pathfinder = Pathfinder()PathFinder() 扮演了消息系统，并代表了火星上宇航员的探路车。
在 IGListAdapterDataSource 扩展中找到 objects(for:) ，将内容修改为：
var items: [IGListDiffable] = pathfinder.messages
items += loader.entries as [IGListDiffable]
return items你可能想起来了，这个方法负责将数据源对象提供给 IGListAdapter。这里进行了一些修改，将 pathfinder.messages 添加到 items 中，以便为新的 section controller 提供消息数据。
注意：你必须转换消息数组以免编译器报错。这些对象已经实现了 IGListDiffable 协议。
在 SectionControllers 文件夹上右击，创建一个新的 IGListSectionController 子类名为 MessageSectionController。在文件头部引入 IGListKit:
import IGListKit让编译器不报错之后，保持剩下的内容不变。
回到 FeedViewController.swift 修改 IGListAdapterDataSource 扩展中的 listAdapter(_:sectionControllerFor:) 方法为：
if object is Message {
return MessageSectionController()
} else {
return JournalSectionController()
}现在，如果数据对象的类型是 Message,，我们会返回一个新的 Message Secdtion Controller。
JPL 团队需要你在创建 MessageSectionController 时满足下列需求:
- 接收 Message 消息
- 底部间距 15 像素
- 通过 MessageCell.cellSize(width:text:) 函数返回一个 cell 的 size
- dequeue 并配置一个 MessageCell，并用 Message 对象的 text 和 user.name 属性填充 Label。
试试看！如果你需要帮助，JPL 团队也在下面的提供了参考答案：
答案: MessageSectionController
import IGListKit
class MessageSectionController: IGListSectionController {
var message: Message!
override init() {
super.init()
inset = UIEdgeInsets(top: 0, left: 0, bottom: 15, right: 0)
}
}
extension MessageSectionController: IGListSectionType {
func numberOfItems() -> Int {
return 1
}
func sizeForItem(at index: Int) -> CGSize {
guard let context = collectionContext else { return .zero }
return MessageCell.cellSize(width: context.containerSize.width, text: message.text)
}
func cellForItem(at index: Int) -> UICollectionViewCell {
let cell = collectionContext?.dequeueReusableCell(of: MessageCell.self, for: self, at: index) as! MessageCell
cell.messageLabel.text = message.text
cell.titleLabel.text = message.user.name.uppercased()
return cell
}
func didUpdate(to object: Any) {
message = object as? Message
}
func didSelectItem(at index: Int) {}
}当你写完时，运行 app，看看将消息集成后的效果！
火星天气预报
我们的宇航员需要知道当前天气以便避开某些东西比如沙尘暴。JPL 编写了一个显示当前天气的模块。但是那个信息有点多，因此他们要求只有在用户点击之后才显示天气信息。
编写最后一个 sectioncontroller，名为 WeatherSecdtionController。现在这个类中定义一个构造函数和几个变量：
import IGListKit
class WeatherSectionController: IGListSectionController {
// 1
var weather: Weather!
// 2
var expanded = false
override init() {
super.init()
// 3
inset = UIEdgeInsets(top: 0, left: 0, bottom: 15, right: 0)
}
}这个 section controller 会从 didUpdate(to:) 方法中接收到一个 Weather 对象。
expanded 是一个布尔值，用于保存天气 section 是否被展开。默认为 false,这样它下面的 cell 一开始是折叠的。
和另外几个 section 一样，底部 inset 设置为 15 像素。
加一个 IGListSectionType 扩展，实现 3 个 required 方法:
extension WeatherSectionController: IGListSectionType {
// 1
func didUpdate(to object: Any) {
weather = object as? Weather
}
// 2
func numberOfItems() -> Int {
return expanded ? 5 : 1
}
// 3
func sizeForItem(at index: Int) -> CGSize {
guard let context = collectionContext else { return .zero }
let width = context.containerSize.width
if index == 0 {
return CGSize(width: width, height: 70)
} else {
return CGSize(width: width, height: 40)
}
}
}- 在 didUpdate(to:) 方法中，你保存了传入的 Weather 对象。
- 如果天气被展开，numberOfItems() 返回 5 个 cell，这样它会包含天气数据的每个部分。如果不是展开状态，只返回一个用于显示占位内容的 cell。
- 第一个 cell 会比其他 cell 大一点，因为它是一个 Header。没有必要判断展开状态，因为 Header cell 只会显示在第一个 cell。
然后你需要实现 cellForItem(at:)方法来配置 weather cell。有几个细节需要注意：
- 第一个 cell 是 WeatherSummaryCell 类型，其他 cell 是 WeatherDetailCell 类型。
- 通过 cell.setExpanded(_:) 方法来配置 WeatherSummaryCell。
配置 4 个不同的 WeatherDetailCell 用下列 title 和 detail 标签：
- “Sunrise” - weather.sunrise
- “Sunset” - weather.sunset
- “High” - “(weather.high) C”
- “Low” - “(weather.low) C”
试着配置一下这个 cell! 参考答案如下。
func cellForItem(at index: Int) -> UICollectionViewCell {
let cellClass: AnyClass = index == 0 ? WeatherSummaryCell.self : WeatherDetailCell.self
let cell = collectionContext!.dequeueReusableCell(of: cellClass, for: self, at: index)
if let cell = cell as? WeatherSummaryCell {
cell.setExpanded(expanded)
} else if let cell = cell as? WeatherDetailCell {
let title: String, detail: String
switch index {
case 1:
title = "SUNRISE"
detail = weather.sunrise
case 2:
title = "SUNSET"
detail = weather.sunset
case 3:
title = "HIGH"
detail = "\(weather.high) C"
case 4:
title = "LOW"
detail = "\(weather.low) C"
default:
title = "n/a"
detail = "n/a"
}
cell.titleLabel.text = title
cell.detailLabel.text = detail
}
return cell
}最后还有最后一件事情，当 cell 被点击时，切换 section 的展开状态并刷新 cell。在 IGListSectionType 扩展后实现这个 required 协议方法:
func didSelectItem(at index: Int) {
expanded = !expanded
collectionContext?.reload(self)
}reload() 方法重新加载整个 section。当 section controller 中的 cell 的数目或者内容发生变化时，你可以调用这个方法。因此我们通过 numberOfItems() 方法切换 section 的展开状态，在这个方法中根据 expanded 的值来添加或减少 cell 的数目。
回到 FeedViewController.swift, 在头部加入属性:
let wxScanner = WxScanner()WxScanner 是一个用于天气情况的模型对象。
然后，修改 IGListAdapterDataSource 扩展中的 objects(for:) 方法：
// 1
var items: [IGListDiffable] = [wxScanner.currentWeather]
items += loader.entries as [IGListDiffable]
items += pathfinder.messages as [IGListDiffable]
// 2
return items.sorted(by: { (left: Any, right: Any) -> Bool in
if let left = left as? DateSortable, let right = right as? DateSortable {
return left.date > right.date
}
return false
})我们修改了数据源方法，让它增加 currentWeather 的数据。代码解释如下：
- 将 currentWeather 添加到 items 数组。
- 让所有数据实现 DataSortable 协议，以便用于排序。这样数据会按照日期前后顺序排列。
最后，修改 listAdapter(_:sectionControllerFor:) 方法:
if object is Message {
return MessageSectionController()
} else if object is Weather {
return WeatherSectionController()
} else {
return JournalSectionController()
}现在，当 object 是 Weather 类型时，返回一个 WeatherSectionController。
运行 app。你会在顶部看到新的天气对象。点击这个 section，展开和收起它！
更新操作
JPL 对你的进度相当的满意！当你在工作时，NASA 的 director 组织了对宇航员的营救工作，要求他起飞并拦截另一艘飞船！这是一次复杂的起飞，他起飞的时间必须十分精确。
JPL 工程师扩展了消息模块，加入了实时聊天功能，要求你集成它。
打开 FeedViewController.swift 在 viewDidLoad() 方法最后一行加入:
pathfinder.delegate = self
pathfinder.connect()这个 Pathfinder 模块增加了实时聊天支持。你需要做的仅仅是连接这个模块并处理委托事件。
在文件底部增加新的扩展：
extension FeedViewController: PathfinderDelegate {
func pathfinderDidUpdateMessages(pathfinder: Pathfinder) {
adapter.performUpdates(animated: true)
}
}FeedViewController 现在实现了 PathfinderDelegate 协议。只有一个 performUpdates(animated:completion:) 方法，用于告诉 IGListAdapter 查询数据源中的新对象并刷新UI。这个方法用于处理对象被删除、更新、移动或插入的情况。
运行 app，你会看到标题上消息正在刷新！你只不过是为 IGListKit 添加了一个方法，用于说明数据源发生了什么变化，并在收到新数据时执行修改动画。
现在，你所需要做的仅仅是将最新版本发给宇航员，他就能回家了！干得不错!
结束
在这里下载最后完成的项目。
在帮助一位搁浅的宇航员回家的同时，你学习了 IGListKit 的基本功能：section controller、adapter、以及如何将它们组合在一起。还有其他重要的功能，比如 supplementary view 和 display 事件。
你可以阅读 Instagram 放在 Realm 上关于为什么要编写 IGListKit 的讨论。这个讨论中提到了许多在编写 app 时经常遇到在 UICollecitonView 中出现的问题。
如果你对参加 IGListKit 有兴趣，开发团队为了便于让你开始，在 Github 上创建了一个 starter-task 的tag。