如何使不同高度的CollectionView单元格无缝贴合排列？

嘿，我之前也踩过这个坑！不同高度的UICollectionViewCell之间出现莫名空隙，大概率是因为你用的默认Flow Layout在搞事情——它默认会把单元格按「行」对齐，哪怕同列里的单元格高度不一样，Flow Layout也会给每行预留当前行最高单元格的高度空间，导致矮单元格下面空出一大块。

给你几个针对性的解决方案，按靠谱程度排序：

1. 自定义Flow Layout（最彻底的解决办法） #

要实现真正的无缝贴合排列，就得自己控制每个单元格的frame，像瀑布流那样让每个单元格紧跟在上一个单元格的下面。这里给你一个简化版的自定义布局代码，你可以根据自己的需求调整：

class TightFlowLayout: UICollectionViewFlowLayout {
    private var cachedAttributes = [UICollectionViewLayoutAttributes]()
    // 可配置的列数，你改成自己需要的数值
    var columnCount = 2
    
    override func prepare() {
        super.prepare()
        guard let collectionView = collectionView else { return }
        
        cachedAttributes.removeAll()
        // 记录每列当前的底部Y坐标
        var columnBottomOffsets = [CGFloat](repeating: sectionInset.top, count: columnCount)
        
        let totalHorizontalSpacing = minimumInteritemSpacing * CGFloat(columnCount - 1)
        let itemWidth = (collectionView.bounds.width - sectionInset.left - sectionInset.right - totalHorizontalSpacing) / CGFloat(columnCount)
        
        for itemIndex in 0..<collectionView.numberOfItems(inSection: 0) {
            let indexPath = IndexPath(item: itemIndex, section: 0)
            // 找到当前底部最矮的列，把新单元格放这里
            let targetColumn = columnBottomOffsets.firstIndex(of: columnBottomOffsets.min()!)!
            
            let xOffset = sectionInset.left + CGFloat(targetColumn) * (itemWidth + minimumInteritemSpacing)
            let yOffset = columnBottomOffsets[targetColumn]
            // 这里调用你自己的高度计算逻辑
            let itemHeight = calculateItemHeight(for: indexPath)
            let cellFrame = CGRect(x: xOffset, y: yOffset, width: itemWidth, height: itemHeight)
            
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            attributes.frame = cellFrame
            cachedAttributes.append(attributes)
            
            // 更新该列的底部坐标
            columnBottomOffsets[targetColumn] = cellFrame.maxY + minimumLineSpacing
        }
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return cachedAttributes.filter { $0.frame.intersects(rect) }
    }
    
    override var collectionViewContentSize: CGSize {
        guard let collectionView = collectionView else { return .zero }
        let maxColumnBottom = cachedAttributes.map { $0.frame.maxY }.max() ?? sectionInset.top
        return CGSize(
            width: collectionView.bounds.width - sectionInset.left - sectionInset.right,
            height: maxColumnBottom + sectionInset.bottom - minimumLineSpacing
        )
    }
    
    // 替换成你自己的单元格高度计算逻辑
    private func calculateItemHeight(for indexPath: IndexPath) -> CGFloat {
        // 示例：根据数据源返回对应高度，或者用自动布局计算
        // 比如如果是自适应高度，可以用cell.systemLayoutSizeFitting(...)
        return CGFloat(Int.random(in: 120...350))
    }
}

使用的时候，只需要把CollectionView的布局换成这个自定义实例就行：

let layout = TightFlowLayout()
layout.columnCount = 2 // 你的列数
layout.minimumLineSpacing = 1
layout.minimumInteritemSpacing = 1
layout.sectionInset = .zero
collectionView.collectionViewLayout = layout

2. 检查高度计算是否准确 #

先确认你在collectionView(_:layout:sizeForItemAt:)里返回的高度是不是真的符合预期——有时候看起来是空隙，其实是单元格本身的高度计算错了（比如约束没拉全，或者动态计算内容高度时出了问题）。可以临时加个打印语句，看看每个单元格的height值：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let height = // 你的计算逻辑
    print("Item \(indexPath.item) height: \(height)")
    return CGSize(width: itemWidth, height: height)
}

3. 排除额外的内插干扰 #

有时候不是布局的问题，而是系统自动给CollectionView加了额外的contentInset。比如iOS11之前的automaticallyAdjustsScrollViewInsets，或者iOS11+的contentInsetAdjustmentBehavior，都会导致顶部/底部出现莫名空隙。可以在ViewController里加一行代码排除这个干扰：

// iOS11+
collectionView.contentInsetAdjustmentBehavior = .never
// iOS10及以下
self.automaticallyAdjustsScrollViewInsets = false

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