一、核心概念（白话解释）
可以把组合布局理解成 “搭积木”：
- Item（项）：最小的显示单元（比如一个商品卡片、一张图片），定义单个元素的尺寸。
- Group（组）：用来包裹 Item 的容器，决定 Item 在组内的排列方式（水平 / 垂直）和尺寸，一个组可以包含多个 Item。
- Section（分区）：包裹 Group 的大容器，一个 UICollectionView 可以有多个 Section，每个 Section 可以用不同的布局规则。
- Layout（布局）：最终把多个 Section 组合起来，形成完整的界面布局。
这种分层设计的好处是：不用写复杂的自定义布局代码，通过简单的参数配置就能实现各种复杂排版。
二、代码示例：快速实现一个基础组合布局
下面用 Swift 写一个最简单的 “2 列网格布局”，帮你直观理解核心用法（适配 iOS 13+）：
swift
import UIKitclass CompositionalLayoutDemoVC: UIViewController {// 1. 创建集合视图private lazy var collectionView: UICollectionView = {// 2. 配置组合布局let layout = createCompositionalLayout()let cv = UICollectionView(frame: view.bounds, collectionViewLayout: layout)cv.backgroundColor = .whitecv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")cv.dataSource = selfreturn cv}()override func viewDidLoad() {super.viewDidLoad()view.addSubview(collectionView)}// 3. 核心：创建组合布局private func createCompositionalLayout() -> UICollectionViewCompositionalLayout {// Step 1: 定义Item（单个单元格）// fractionalWidth(0.5)：占Group宽度的50% → 实现2列// fractionalHeight(1.0)：占Group高度的100%let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5),heightDimension: .fractionalHeight(1.0))let item = NSCollectionLayoutItem(layoutSize: itemSize)// 给Item加间距（可选）item.contentInsets = NSDirectionalEdgeInsets(top: 2, leading: 2, bottom: 2, trailing: 2)// Step 2: 定义Group（包裹Item的容器）// fractionalWidth(1.0)：占Section宽度的100%// absolute(100)：固定高度100ptlet groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),heightDimension: .absolute(100))// .horizontal：Item在Group内水平排列let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,subitems: [item])// Step 3: 定义Section（包裹Group的分区）let section = NSCollectionLayoutSection(group: group)// 给Section加整体间距（可选）section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)// Step 4: 创建最终布局return UICollectionViewCompositionalLayout(section: section)}
}// 4. 实现数据源（填充测试内容）
extension CompositionalLayoutDemoVC: UICollectionViewDataSource {func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {return 20 // 测试用20个单元格}func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)// 随机背景色，方便看效果cell.backgroundColor = UIColor(red: CGFloat.random(in: 0...1),green: CGFloat.random(in: 0...1),blue: CGFloat.random(in: 0...1),alpha: 1.0)return cell}
}三、关键知识点
1. 尺寸维度的 3 种定义方式
| 类型 | 用法 | 场景 |
|---|---|---|
.fractionalWidth/Height(比例) |
fractionalWidth(0.5) |
按父容器比例适配（推荐，适配不同屏幕） |
.absolute(固定值) |
absolute(100) |
固定尺寸（如固定高度的卡片） |
.estimated(预估值) |
estimated(100) |
动态高度（如文字不确定的单元格，自动适配内容） |
2. 常见布局扩展（改几行代码就能实现）
- 瀑布流：给不同 Item 设置不同的
fractionalHeight或absolute高度即可； - 混合行列：一个 Group 里放多个不同尺寸的 Item（比如 1 个宽 Item+2 个窄 Item）；
- 垂直列表：把 Group 的排列方式改成
.vertical，Item 宽度设为1.0； - 多分区布局：给不同 Section 设置不同的 Group/Item 规则（比如顶部 banner + 下方网格）。
3. 对比传统流水布局的优势
- 无需自定义
UICollectionViewLayout子类，代码量减少 80%； - 支持动态尺寸、复杂嵌套布局，适配性更强；
- 内置对 UICollectionViewCompositionalLayoutConfiguration 的支持，可快速设置滚动方向、边界效果等。
四、实际应用场景
- 电商 App：商品列表（网格 + 瀑布流混合）、首页多模块排版；
- 社交 App：朋友圈 / 动态流（文字 + 图片 + 视频混合布局）；
- 内容 App：资讯列表（标题 + 摘要 + 图片的不同排版组合）；
- 工具类 App：设置页面、相册网格 / 列表切换。
总结
- iOS 组合布局（UICollectionViewCompositionalLayout）是 iOS 13+ 推荐的布局方案，以 “Item-Group-Section” 分层结构实现灵活排版；
- 核心是通过
NSCollectionLayoutSize定义尺寸，支持比例、固定、预估三种维度，适配各类场景； - 相比传统流水布局，无需自定义子类，能低成本实现复杂布局，是现代 iOS 界面开发的核心工具。