集合视图控制器

17 Mar 2025 | 4 分钟阅读

到目前为止，我们已经讨论了CollectionView，它是一种用于表示项目集合的内容视图，其中 UICollectionViewCell 表示一个项目。我们已经使用 CollectionView 创建了 iOS 应用程序。在本教程的这一部分中，我们将使用 CollectionViewController 来管理 collectionview。

CollectionViewController 可以定义为专门用于管理 CollectionView 的 ViewController。它是 UICollectionViewController 的一个实例，它继承了 UIViewController 类。

与 TableViewController 类似，我们不能将任何自定义 UIView 添加到 CollectionView 控制器，因为它只能管理 CollectionView。CollectionViewController 在故事板中包含一个内置的 collectionview，至少包含一个 collectionview 单元格（项目）。但是，我们可以在 CollectionViewController 中拥有任意数量的项目。我们可以通过使用该类的 collectionView 属性来访问 UICollectionViewController 子类中的 collectionview。

CollectionViewController 实现 UICollectionViewDelegate 和 UICollectionViewDataSource 协议来控制 CollectionView 的数据和用户交互。当 CollectionView 第一次出现时，CollectionViewController 会重新加载集合视图数据。它还在每次显示视图时清除当前选择。但是，我们可以通过将 clearsSelectionOnViewWillAppear 属性的值设置为 false 来更改此行为。

将 CollectionViewController 添加到界面

在 XCode 中创建一个新的 Single View iOS 应用程序。我们将在 XCode 中获得以下自动生成的文件。

在这里，我们需要删除故事板中现有的 View Controller，并通过在对象库中搜索 Collection View Controller 并将其结果拖到故事板上来添加它。

这将在故事板中创建一个 Collection View Controller，其中包含一个集合视图单元格。

在我们的项目中，我们还需要创建 UICollectionViewController 的子类，该子类可以分配给故事板中的 Collection View Controller。

要创建一个新的类文件，请按 Command + n 并选择选项“Cocoa Touch Class”。

这将打开一个如下图所示的窗口。输入类的名称，然后从下拉列表中选择父类为 UICollectioViewController。

在这里，我们创建了一个 MyCollectionViewController 类，它是 UICollectionViewController 的子类。将此类分配给故事板中的集合视图控制器。

CollectionViewController 组件

Collection View Controller 包含屏幕上可见的各种特定组件。

CollectionView：Collection View Controller 提供了一个内置的集合视图，其中包含一个集合视图单元格。可以通过在 UICollectionViewController 子类中使用 collectionView 属性来访问此 collectionview。它是 UICollectionView 类的实例，它继承了 UIView。

CollectionViewCell：Collection View Cell 显示 Collection View Controller 的实际内容。它包含一个类型为 UIView 的内容视图，我们可以在其中添加自定义子视图。它是 UICollectionViewCell 类的实例。

NavigationBar：导航栏显示在嵌入在导航控制器中的 ViewControllers 的顶部。它包含标题和栏按钮项目。它是 UINavigationBar 类的实例。

UICollectionViewController 属性

UICollectionViewController 包含以下属性。

序号	属性	描述
1	var collectionView: UICollectionView!	它表示由 View Controller 管理的集合视图对象。
2	var collectionViewLayout: UICollectionViewLayout	它表示用于初始化集合视图控制器的布局对象。
3	var clearsSelectionOnViewWillAppear: Bool	它是一个布尔值，指示当视图即将出现在屏幕上时是否应该清除选择。
4	var installsStandardGestureForInteractiveMovement: Bool	一个布尔值，指示集合视图控制器是否安装标准的手势识别器来驱动重新排序过程。
5	var useLayoutToLayoutNavigationTransitions: Bool	一个布尔值，指示集合视图控制器是否与导航控制器协调进行过渡。

示例

在此示例中，我们将创建一个简单的 Collection View Controller，并将不同的颜色分配给每个 collectionview 单元格。

界面生成器

在这里，我们将在对象库中搜索集合视图控制器，并将结果拖到故事板中。这将在故事板中创建一个 CollectionViewController，其中包含 collectionview 原型单元格。

现在，我们将创建一个 UICollectionViewController 的子类，并将此类命名为 MyCollectionViewController。

MyCollectionViewController.swift

import UIKit

private let reuseIdentifier = "cell"

class MyCollectionViewController: UICollectionViewController {
    var colorArr = Array<UIColor>()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Register cell classes
        self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
        
        colorArr = [UIColor.red,UIColor.black,UIColor.yellow,UIColor.blue,UIColor.gray,UIColor.green,UIColor.brown,UIColor.cyan,UIColor.darkGray]

        // Do any additional setup after loading the view.
    }

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 3
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of items
        return colorArr.count
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
    
        // Configure the cell
        cell.contentView.backgroundColor = colorArr[indexPath.row]
    
        return cell
    }
}

输出