如何实现UICollectionViewCell仅垂直方向自适应尺寸？传统流布局最佳实践

在传统流布局中，直接设置estimatedItemSize确实会出现宽度被内容撑开的问题——这是因为流布局的自动尺寸计算会优先参考内容的intrinsicContentSize，导致宽度无法固定为CollectionView的宽度。针对这种仅垂直方向自适应的需求，有以下几种成熟的实践方案：

方案一：重写UICollectionViewFlowLayout修正布局属性 #

自定义流布局子类，在布局阶段强制修正每个单元格的宽度：

class FixedWidthAutoHeightFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let originalAttributes = super.layoutAttributesForElements(in: rect),
              let collectionView = collectionView else {
            return super.layoutAttributesForElements(in: rect)
        }
        
        // 计算CollectionView的可用宽度（减去section左右内边距）
        let availableWidth = collectionView.bounds.width - sectionInset.left - sectionInset.right
        
        // 遍历修正所有单元格的宽度
        return originalAttributes.map { attr in
            let modifiedAttr = attr.copy() as! UICollectionViewLayoutAttributes
            modifiedAttr.frame.size.width = availableWidth
            return modifiedAttr
        }
    }
}

使用时直接给CollectionView绑定这个自定义布局即可，无需修改Cell代码，适合已有项目快速改造。

方案二：在自定义Cell内部固定宽度约束 #

在Cell内部给contentView添加宽度约束，绑定到CollectionView的可用宽度，让Auto Layout基于固定宽度计算自适应高度：

class AutoHeightCollectionViewCell: UICollectionViewCell {
    private var widthConstraint: NSLayoutConstraint?
    
    override func awakeFromNib() {
        super.awakeFromNib()
        setupFixedWidthConstraint()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupFixedWidthConstraint()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupFixedWidthConstraint()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 确保Cell加入CollectionView后再初始化约束
        if widthConstraint == nil {
            setupFixedWidthConstraint()
        }
    }
    
    private func setupFixedWidthConstraint() {
        guard let collectionView = superview as? UICollectionView,
              let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
            return
        }
        
        let availableWidth = collectionView.bounds.width - flowLayout.sectionInset.left - flowLayout.sectionInset.right
        widthConstraint = contentView.widthAnchor.constraint(equalToConstant: availableWidth)
        widthConstraint?.isActive = true
    }
}

这种方式把宽度约束逻辑内聚在Cell中，避免额外布局类代码，适合新开发的自定义Cell场景。

方案三：动态设置itemSize结合estimatedItemSize #

在ViewController的viewWillLayoutSubviews中，给流布局动态设置固定宽度的itemSize，同时保留estimatedItemSize驱动高度自适应：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    
    guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
        return
    }
    
    let availableWidth = collectionView.bounds.width - flowLayout.sectionInset.left - flowLayout.sectionInset.right
    // 设置固定宽度，高度用automaticSize触发自适应
    flowLayout.itemSize = CGSize(width: availableWidth, height: UICollectionViewFlowLayout.automaticSize.height)
    // 保留estimatedItemSize作为高度计算的初始参考值
    flowLayout.estimatedItemSize = CGSize(width: availableWidth, height: 140)
}

这是最简洁的方案，直接利用流布局现有API组合，无需自定义布局或Cell，适合简单场景快速实现。

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