如何在UIKit的UICollectionView中实现双倍高度单元格布局？

你之前的认知有误——UICollectionView完全支持同一行内单元格高度不同的布局，尤其是苹果推出的UICollectionViewCompositionalLayout，能轻松实现这类自定义布局。下面是具体的实现方案：

一、使用UICollectionViewCompositionalLayout构建布局 #

Compositional Layout是苹果推荐的现代布局方案，通过Item、Group、Section三级结构灵活组合布局，支持不同尺寸的单元格混排。

示例代码：创建自定义布局 #

func buildCollectionViewLayout() -> UICollectionViewLayout {
    return UICollectionViewCompositionalLayout { (sectionIndex, env) -> NSCollectionLayoutSection? in
        // 1. 定义两种单元格的尺寸
        // 普通单元格：占每行1/3宽度，固定高度100
        let normalItemSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1/3),
            heightDimension: .absolute(100)
        )
        let normalItem = NSCollectionLayoutItem(layoutSize: normalItemSize)
        normalItem.contentInsets = NSDirectionalEdgeInsets(top: 4, leading: 4, bottom: 4, trailing: 4)
        
        // 高单元格：占每行1/3宽度，固定高度200
        let tallItemSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1/3),
            heightDimension: .absolute(200)
        )
        let tallItem = NSCollectionLayoutItem(layoutSize: tallItemSize)
        tallItem.contentInsets = NSDirectionalEdgeInsets(top: 4, leading: 4, bottom: 4, trailing: 4)
        
        // 2. 创建水平分组，每行包含3个单元格，允许高度自适应
        let groupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(200) // 用estimated适配不同高度的单元格
        )
        // 这里可根据数据源动态调整分组内的item，示例为2个普通+1个高单元格
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [normalItem, normalItem, tallItem])
        
        // 3. 创建Section并返回
        let section = NSCollectionLayoutSection(group: group)
        section.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
        return section
    }
}

二、区分单元格类型并配置 #

1. 定义单元格类型枚举 #

enum CollectionCellType {
    case normal
    case tall
}

// 示例数据源，可根据需求动态生成
var cellTypes: [CollectionCellType] = [.normal, .normal, .tall, .normal, .tall, .normal]

2. 注册不同类型的单元格 #

在viewDidLoad中注册两种单元格（也可复用同一个Cell类，通过约束调整高度）：

collectionView.register(NormalCell.self, forCellWithReuseIdentifier: "NormalCellID")
collectionView.register(TallCell.self, forCellWithReuseIdentifier: "TallCellID")
// 绑定布局
collectionView.collectionViewLayout = buildCollectionViewLayout()

3. 数据源方法中返回对应单元格 #

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cellType = cellTypes[indexPath.item]
    
    switch cellType {
    case .normal:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "NormalCellID", for: indexPath) as! NormalCell
        // 配置普通单元格内容，比如设置背景色、文本等
        cell.backgroundColor = .lightGray
        return cell
    case .tall:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TallCellID", for: indexPath) as! TallCell
        // 配置高单元格内容
        cell.backgroundColor = .systemBlue
        return cell
    }
}

三、动态高度适配（可选） #

如果需要单元格高度根据内容自动调整，只需修改item的高度维度为.fractionalHeight(1.0)，同时保证单元格内部通过Auto Layout撑开展示内容：

// 动态高度的item尺寸
let dynamicItemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1/3),
    heightDimension: .fractionalHeight(1.0) // 高度占group的100%，group用estimated自适应
)

替代方案：自定义UICollectionViewFlowLayout #

如果需要兼容iOS 12及以下系统，可以自定义FlowLayout，重写layoutAttributesForElements(in:)方法，手动调整特定单元格的frame：

class CustomFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)?.map { $0.copy() as! UICollectionViewLayoutAttributes }
        
        attributes?.forEach { attr in
            // 判断是否为高单元格，修改其frame
            if attr.indexPath.item % 3 == 2 { // 假设每第3个是高单元格
                attr.frame.size.height = 200
                attr.frame.origin.y = attr.frame.origin.y - 50 // 向上偏移，避免遮挡下方单元格
            }
        }
        return attributes
    }
}

不过这种方式需要处理更多布局冲突，不如Compositional Layout简洁。

内容的提问来源于stack exchange，提问作者Altynbek Tanbayev