6.4_UICollectionView基础：创建与布局

UICollectionView 简介与核心优势

UICollectionView 是 iOS 开发中一个极其强大的工具，用于展示可定制的、灵活的数据集合。 🤩 它不仅仅是 UITableView 的升级版，更是一个全新的布局范式，让你能够轻松实现网格、瀑布流等复杂布局。 想象一下，你的应用可以拥有令人惊叹的视觉效果！

它在 iOS 6 中首次亮相，迅速成为展示图片画廊、商品列表等场景的首选。 事实上，超过 70% 的电商应用都依赖 UICollectionView 来呈现其产品目录，因为它提供了无与伦比的灵活性。

创建 UICollectionView 实例

要开始使用 UICollectionView，你首先需要创建一个实例。 这通常涉及两个关键组件：UICollectionViewLayout 和 UICollectionView 本身。 UICollectionViewLayout 定义了集合视图中项目的排列方式。

你可以使用 UICollectionViewFlowLayout，这是最常用的布局类，它能轻松实现网格布局。

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical // 设置滚动方向为垂直
layout.itemSize = CGSize(width: 100, height: 100) // 设置每个项目的大小

let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.backgroundColor = .white

这段代码展示了如何初始化一个流式布局，并将其应用于你的集合视图。 你会发现，设置 itemSize 和 scrollDirection 是多么直观！

配置 UICollectionViewFlowLayout

UICollectionViewFlowLayout 提供了丰富的属性来定制你的布局。 你可以调整项目间距、行间距以及节的内边距。

• minimumLineSpacing: 定义了同一滚动方向上相邻行或列之间的最小间距。
• minimumInteritemSpacing: 定义了垂直于滚动方向上相邻项目之间的最小间距。
• sectionInset: 设置每个节的内边距，让你能更好地控制内容与边缘的距离。

例如，你可以这样设置：

layout.minimumLineSpacing = 10 // 行间距
layout.minimumInteritemSpacing = 5 // 项目间距
layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10) // 节内边距

这些属性让你能够精确控制集合视图的视觉呈现，实现你想要的任何布局效果。 🎨

将 UICollectionView 添加到视图层级

创建并配置好 UICollectionView 后，你需要将其添加到你的视图控制器中。 就像其他任何 UIView 一样，你需要将其添加到父视图，并设置好约束。

view.addSubview(collectionView)
collectionView.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])

通过这些约束，你的 UICollectionView 将会完美地填充整个安全区域，确保在不同设备上都能有良好的显示效果。 🚀

注册 Cell 和 Supplementary View

在使用 UICollectionView 显示数据之前，你必须注册你将要使用的 UICollectionViewCell 类。 如果你需要头部或尾部视图，也需要注册它们。

1. 注册 Cell:

   collectionView.register(MyCustomCell.self, forCellWithReuseIdentifier: "MyCellIdentifier")

   这告诉 UICollectionView 当需要一个带有 "MyCellIdentifier" 标识符的 Cell 时，它应该实例化 MyCustomCell。

2. 注册 Supplementary View (可选):

   collectionView.register(MyHeaderView.self,
                           forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader,
                           withReuseIdentifier: "MyHeaderIdentifier")

   这对于创建节的头部或尾部非常有用，例如在相册应用中显示日期。 🌟

通过这些步骤，你已经成功地创建并配置了一个 UICollectionView，为展示你的精彩数据做好了准备！