自定义UICollectionViewLayout：如何约束preferredLayoutAttributes宽度？

嘿，我正好做过类似Trello的布局，你的需求完全可以实现！核心思路就是固定preferredLayoutAttributes的宽度为列宽，再让自动布局基于这个宽度计算高度，下面是具体的实现步骤：

1. 先在自定义Layout中确定固定列宽 #

首先你得在自定义布局里先算出每一列的固定宽度，比如在prepare()方法里，根据CollectionView的宽度、列数和间距来计算：

class TrelloStyleLayout: UICollectionViewLayout {
    var columnCount = 3
    var interItemSpacing: CGFloat = 8
    var columnWidth: CGFloat = 0
    
    override func prepare() {
        super.prepare()
        guard let collectionView = collectionView else { return }
        // 计算可用宽度：CollectionView宽度 - 左右内边距 - 列之间的间距总和
        let availableWidth = collectionView.bounds.width - collectionView.contentInset.left - collectionView.contentInset.right - (interItemSpacing * CGFloat(columnCount - 1))
        columnWidth = availableWidth / CGFloat(columnCount)
    }
}

2. 在shouldInvalidateLayout中约束宽度并计算高度 #

当系统调用shouldInvalidateLayout(forPreferredLayoutAttributes:)时，你可以直接修改传入的布局属性的宽度为固定列宽，让系统基于这个宽度计算合适的高度。注意要复制一份属性再修改，避免影响原实例：

override func shouldInvalidateLayout(forPreferredLayoutAttributes preferredAttributes: UICollectionViewLayoutAttributes) -> Bool {
    // 复制属性，防止修改共享的原实例
    let adjustedAttributes = preferredAttributes.copy() as! UICollectionViewLayoutAttributes
    // 强制设置为固定列宽
    adjustedAttributes.size.width = columnWidth
    // 更新传入的属性尺寸
    preferredAttributes.size = adjustedAttributes.size
    
    // 返回true告诉系统需要重新计算布局
    return true
}

3. 确保Cell内部的自动布局正确 #

你的Cell是垂直堆叠的标签，一定要给contentView设置正确的约束，让内容能撑出高度：

• 所有标签的宽度约束等于contentView的宽度（或者直接让标签水平方向撑满contentView）
• 标签之间设置垂直间距约束
• 最顶部的标签和contentView顶部对齐，最底部的标签和contentView底部对齐
  这样当Cell宽度被固定为列宽时，自动布局就能准确计算出Cell的高度。

4. 可选：在Cell中配合preferredLayoutAttributesFitting优化 #

如果你想更精准地控制Cell的尺寸计算，可以在Cell类里实现preferredLayoutAttributesFitting(_:)方法，先固定宽度再计算高度：

class TrelloItemCell: UICollectionViewCell {
    // ... 你的标签视图和约束
    
    override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
        let attributes = super.preferredLayoutAttributesFitting(layoutAttributes)
        
        // 获取自定义布局中的固定列宽
        if let trelloLayout = collectionView?.collectionViewLayout as? TrelloStyleLayout {
            attributes.size.width = trelloLayout.columnWidth
        }
        
        // 基于固定宽度计算高度：水平方向优先级设为required，垂直方向用fittingSizeLevel让内容撑出高度
        let targetSize = CGSize(width: attributes.size.width, height: UIView.layoutFittingCompressedSize.height)
        attributes.size = contentView.systemLayoutSizeFitting(targetSize,
                                                              withHorizontalFittingPriority: .required,
                                                              verticalFittingPriority: .fittingSizeLevel)
        
        return attributes
    }
}

5. 触发布局更新的时机 #

当Cell的内容发生变化时，记得调用collectionView?.performBatchUpdates(nil, completion: nil)或者collectionView?.invalidateLayout()，这样系统才会重新调用布局方法，更新Cell的高度。

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