iOS 组合布局（UICollectionViewCompositionalLayout）

一、核心概念（白话解释）

可以把组合布局理解成 “搭积木”：

• Item（项）：最小的显示单元（比如一个商品卡片、一张图片），定义单个元素的尺寸。
• Group（组）：用来包裹 Item 的容器，决定 Item 在组内的排列方式（水平 / 垂直）和尺寸，一个组可以包含多个 Item。
• Section（分区）：包裹 Group 的大容器，一个 UICollectionView 可以有多个 Section，每个 Section 可以用不同的布局规则。
• Layout（布局）：最终把多个 Section 组合起来，形成完整的界面布局。

这种分层设计的好处是：不用写复杂的自定义布局代码，通过简单的参数配置就能实现各种复杂排版。

二、代码示例：快速实现一个基础组合布局

下面用 Swift 写一个最简单的 “2 列网格布局”，帮你直观理解核心用法（适配 iOS 13+）：

swift

 

 

 

 

 

import UIKit

class CompositionalLayoutDemoVC: UIViewController {
    // 1. 创建集合视图
    private lazy var collectionView: UICollectionView = {
        // 2. 配置组合布局
        let layout = createCompositionalLayout()
        let cv = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        cv.backgroundColor = .white
        cv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        cv.dataSource = self
        return 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)：固定高度100pt
        let 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：设置页面、相册网格 / 列表切换。

总结

1. iOS 组合布局（UICollectionViewCompositionalLayout）是 iOS 13+ 推荐的布局方案，以 “Item-Group-Section” 分层结构实现灵活排版；
2. 核心是通过 NSCollectionLayoutSize 定义尺寸，支持比例、固定、预估三种维度，适配各类场景；
3. 相比传统流水布局，无需自定义子类，能低成本实现复杂布局，是现代 iOS 界面开发的核心工具。