UICollectionView 新发现

学习 UICollectionView 的各种新功能，解锁全新功能，使其变得更加方便易用。我们将向你展示如何结合 diffable data source 使用区域截图，创建可以展开/收起的轮廓界面，并向你介绍如何使用复合式界面创建列表，并打造出带有网格视图、类似 UITableView 的界面。此外，你还将探索令单元元素离开队列、调整其内容与风格的现代技术。为使此节发挥最大效用，请您实现学习关于复合式界面的基本内容。若要获得更多信息，请观看 WWDC19 的“网格视图界面新发现”。

资源

相关视频

WWDC21

制作超快列表和精选集视图

WWDC20

WWDC19

下载

（大家好 WWDC 2020）

大家好欢迎来到 WWDC （UICollectionView 的改进）欢迎大家我叫 Steve Breen 是 UIKit 团队的工程师在这个视频中我们要稍微聊聊 iOS 14 上 UICollectionView 的改进但在开始讲解之前我想强调这个视频中之后会出现的一个配套示例项目叫做表情符号管理器这个示例在设计中融入了许多有趣元素在顶端分区有一个水平滚动的表情符号网格在当今的应用程序中这是很常见的设计表情符号管理器的中间分区尤其创新中间是可扩展可折叠轮廓这是 iOS 14 的创新在底部分区设计看起来出奇地像 UITableView 临时安置在我们的 UICollectionview 中好了这就是表情符号管理器我们在这个视频中会不断再提到它由 UICollectionview 组成的 API 能被分成三类数据、布局和展示 UICollectionView 的创新概念之一是构筑在关注点分离的原则上也就是“数据”和“布局” 即内容和内容渲染所在地的分离核心的区别才让 UICollectionView 如此灵活当首先在 iOS 6 推出 UICollectionView 时数据是通过基于 indexPath 的协议管理的即 UICollectionViewDataSource 布局方面当时我们有抽象类 UICollectionViewLayout 还推出了具体子类 UICollectionViewFlowLayout

在展示端我们推出了两类视图 UICollectionViewCell 和 UICollectionReusableView

到了 iOS 13 我们分别为数据和布局引入了两个新组件即差量数据源和组合布局这些是今天用于在 UICollectionView 中构建 app 的 API

到了 iOS 14 基于上面这些 API 在全部三种 API 上我们都构建并引入了新功能并改进了差量数据源组合布局和单元

首先聊聊对差量数据源的改进在 iOS 13 引入了差量数据源通过添加新的快照数据类型极大简化了对 UIState 的管理通过对特殊分区和条目标示符的使用快照把整个 UIState 封装了起来更新 UICollectionView 时我们首先要创建一个新快照将它填充到现有的 UIState 中然后应用到数据源中差量数据源会计算它们的不同不需你的任何额外工作就能自动生成动画我们在 WWDC 2019 上已经详细讲解过这个 API 请见视频“用户界面数据源的改进” 我希望你们去看看那段视频以进一步了解相关内容

到了 iOS 14 我们添加了新的快照类型叫做“分区快照” 正如名字所示分区快照能把 UICollectionView 中单一分区的数据封装起来做出这个改进有两个原因第一使数据源更容易组合到分区大小的数据块中

第二允许分层数据建模如果要支持轮廓样式 UI 就需要它这种视觉设计贯穿整个 iOS 14 咱们回到表情符号管理器看看如何使用分区快照构建这个示例 app 首先在我们的水平滚动分区我们看到自己只使用单一分区快照来为这里的内容建模接下来我们在第二个分区看到了这种可扩展可折叠轮廓样式第二分区快照被用来为分层数据建模最后在我们的列表分区我们用第三分区快照为此区内容建模对表情符号管理器来说我们将差量数据源组合到三个不同的分区快照中每个分别代表各自的分区内容 iOS 14中为 UICollectionView 中的差量数据源引入了分区快照以上是我们对它的概述但还有更多我们还添加了新的重排序 API 想对这些新 API 有更深入了解请见视频“差量数据源的改进” 下面我们谈谈 iOS 14 中对组合布局做出的改进组合布局在 iOS 13 时引入它允许我们将更小且容易理清的布局组合起来从而构建丰富复杂的布局组合布局运转快速因为你在描述希望的布局是什么样而不是描述布局应该怎样组合布局也能能建立某分区专属布局来帮助你构建更完善 UI 它甚至支持正交滚动分区想进一步了解组合布局请见 WWDC 2019 视频“集合视图布局的改进”

到了 iOS 14 我们在组合布局的基础上构建了一个叫做“列表”的新功能

列表允许你把 UITableView 样的分区纳入任何 UICollectionView 中这些列表充满了你期待 UITableView 会提供的功能比如轻扫动作和许多常用的单元布局创建一个列表样式的布局很简单既然列表是构建在组合布局之上我们能以分区为基础容易和其他种布局的列表进行混搭咱们看一段代码片段来看看在组合布局中创建列表样式的布局有多容易

正如你们所见很简单只需两行代码在这个示例中我们在创建一个 UICollectionView 布局其中我们集合视图中的每个分区都是外观上内嵌组的列表

这就是这个布局的样子

以上是组合布局列表的简介但列表方面还有更多内容有新的具体 UICollectionViewListCell 还有标头和页脚支持会出现在许多 iPadOS 系统 app 上的全新侧边栏外观想了解更多请见视频“UICollectionView 中的列表”

最后我们再稍微谈谈 UICollectionView 和新式单元

到了 iOS 14 通过我们称之为“单元注册”的新 API 我们有了全新配置单元的方式单元注册是简单可重复使用的在视图模型中设置单元的方式单元注册省去了注册单元类或 nib 的额外步骤不用这样把它和重复使用标示符联系起来我们用的是通用注册类型它包含了配置闭包以在视图模型中设置新单元咱们看看这个 API 应用时是什么样首先我们创建我们的单元注册它在单元类上是通用的在这里是MyCell 和ViewModel 类请注意注册需要闭包每次构建新单元时都要访问闭包我们可以在 ViewModel 中的这个地方配置单元内容有了单元注册我们不再需要访问注册这额外一步我们只需使用来自差量数据源单元提供者的单元注册再配合上一个新 API 它名叫 dequeueConfiguredReusableCell 并使用注册以上是单元注册下一步单元内容配置单元内容配置为单元提供了标准布局这和 UITableView 中的标准单元类型相似这些配置可用在任何单元甚至用在通用 UIView 上它们很灵活下面我们看看几个示例感受一下它们应用起来到底如何这是一个简单的示例在一个非常标准的单元布局中有一张图和文本这是 valueCell 变量它的次级文本是在单元边缘（准备设置编程）最后还有 subtitleCell 它的次级文本是在主文本下面

请注意这些内容配置类型非常轻量直接描述出了内容应该是什么样这个框架涵盖了所有布局要素并能自动优化性能最后背景配置这和内容配置很相似但它适用于任何单元背景并能调整属性包括颜色、边框样式等我们只是粗略地介绍了下新式单元配置想更多了解请见视频“新式单元配置” iOS 14 集合视图改进的讲解就到这里了请下载示例 app 来看看这些API 应用起来效果如何并使用我们的代码作为向你的 app 添加这些功能的基础想了解更多请看相关视频谢谢观看

6:15 - UICollectionViewCompositionalLayout Lists

let configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
let layout = UICollectionViewCompositionalLayout.list(using: configuration)

7:33 - Cell Registration

// Example of using new iOS 14 cell registration

let reg = UICollectionView.CellRegistration<MyCell, ViewModel> { cell, indexPath, model in
   // configure cell content 
}

let dataSource = UICollectionViewDiffableDataSource<S,I>(collectionView: collectionView) {
                     collectionView, indexPath, item -> UICollectionViewCell in
   return collectionView.dequeueConfiguredReusableCell(using: reg, for: indexPath, item: item)
}

8:32 - .cell Content Configuration

var contentConfiguration = UIListContentConfiguration.cell()
contentConfiguration.image = UIImage(systemName:"hammer")
contentConfiguration.text = "Ready. Set. Code"
cell.contentConfiguration = contentConfiguration

8:38 - .valueCell Content Configuration

var contentConfiguration = UIListContentConfiguration.valueCell()
contentConfiguration.image = UIImage(systemName:"hammer")
contentConfiguration.text = "Ready. Set. Code."
contentConfiguration.secondaryText = "#WWDC20"
cell.contentConfiguration = contentConfiguration

8:44 - .subtitleCell Content Configuration

var contentConfiguration = UIListContentConfiguration.subtitleCell()
contentConfiguration.image = UIImage(systemName:"hammer")
contentConfiguration.text = "Ready. Set. Code."
contentConfiguration.secondaryText = "#WWDC20"
cell.contentConfiguration = contentConfiguration

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。