如何根据子图片的宽高比设置UICollectionViewCell的动态高度？

这个问题我之前帮朋友排查过，核心问题出在ScaledHeightImageView没有拿到cell的实际宽度就计算了内在高度，加上Compositional Layout对estimated高度的依赖逻辑，导致高度计算偏差。咱们一步步来解决：

1. 确保ImageView的约束完全贴合Cell #

首先检查你的ImageCell nib文件：

• 把ImageView的leading、trailing、top、bottom四个约束都和cell的contentView绑定，绝对不能给ImageView设置固定宽度或高度。
• 确保ImageView的contentMode设为scaleAspectFit或者scaleAspectFill（根据你的需求），关键是让ImageView的宽度完全跟随cell的宽度变化。

2. 修复ScaledHeightImageView的内在尺寸计算逻辑 #

你的ScaledHeightImageView目前是基于nib里的固定宽度计算高度，这是错误的。我们需要让它在宽度变化时重新计算内在高度：

class ScaledHeightImageView: UIImageView {
    override var image: UIImage? {
        didSet {
            invalidateIntrinsicContentSize()
        }
    }
    
    override var intrinsicContentSize: CGSize {
        guard let image = image else { return super.intrinsicContentSize }
        
        // 这里用当前ImageView的实际宽度，而不是nib里的固定值
        let width = bounds.width
        if width == 0 {
            // 宽度还未确定时，返回一个临时的预估高度（和图片宽高比匹配）
            let ratio = image.size.height / image.size.width
            return CGSize(width: 100, height: 100 * ratio)
        }
        
        let ratio = image.size.height / image.size.width
        let height = width * ratio
        return CGSize(width: width, height: height)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 宽度变化时，强制重新计算内在尺寸
        invalidateIntrinsicContentSize()
    }
}

3. 调整Compositional Layout的配置 #

你的布局代码里estimated(20)的数值太小，可能会让CollectionView的初始布局预估偏差过大，建议改成一个更接近实际场景的数值：

private func createImageSectionLayout() -> NSCollectionLayoutSection {
    let item = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .estimated(300) // 增大预估高度，减少布局跳动
    ))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .estimated(300)
    ), subitems: [item])
    let section = NSCollectionLayoutSection(group: group)
    section.interGroupSpacing = 16
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16)
    return section
}

4. 优化Cell的Setup方法 #

在cell的setup方法中，设置图片后要主动触发布局更新，确保ImageView能拿到正确的宽度：

class ImageCell: UICollectionViewCell {
    @IBOutlet weak var imageView: ScaledHeightImageView!
    
    func setup(with item: Item) {
        // 假设item包含要展示的UIImage
        imageView.image = item.image
        
        // 触发布局更新，让ImageView拿到实际宽度后重新计算高度
        setNeedsLayout()
        layoutIfNeeded()
    }
}

5. 处理异步加载图片的情况（如果适用） #

如果你的图片是异步加载的（比如从网络下载），在图片加载完成后，需要刷新对应cell的布局：

// 以SDWebImage为例，图片加载完成后更新布局
imageView.sd_setImage(with: item.imageURL) { [weak self] image, error, _, _ in
    guard let self = self else { return }
    self.invalidateIntrinsicContentSize()
    // 通知CollectionView更新当前cell的布局
    if let collectionView = self.superview as? UICollectionView {
        collectionView.performBatchUpdates(nil)
    }
}

为什么之前的方法无效？ #

• willDisplay里设置cell：此时cell的布局已经基本确定，ImageView的宽度可能还没完成最终布局，计算逻辑仍然出错。
• 重写layoutSubviews但没调用invalidateIntrinsicContentSize：只是刷新布局，但没让ImageView重新计算内在尺寸。
• 调用layoutIfNeeded时机不对：需要在图片设置完成后，确保ImageView的宽度已经更新再调用。

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