如何用UICollectionViewCompositionalLayout在UIKit中适配远程图片布局

要实现未知比例图片在UICollectionView中横向撑满屏幕、垂直方向保持正确比例的效果，核心是让Cell能在图片加载完成后正确报告自身尺寸，并触发CollectionView更新布局，具体步骤如下：

1. 修正ImageView的约束与配置 #

首先确保Cell中的ImageView能根据图片比例自动调整尺寸：

• 在XIB/Storyboard中，让ImageView的上下左右约束都与Cell的contentView对齐，确保ImageView填充整个Cell。
• 设置ImageView的contentMode为.scaleAspectFit（或.scaleAspectFill，根据需求选择），这样图片会保持原有比例。

2. 图片加载完成后触发布局更新 #

使用SDWebImage的回调，在图片加载完成后，通知CollectionView重新计算对应Cell的尺寸：

修改ImageCell代码：

import UIKit
import SDWebImage

class ImageCell: UICollectionViewCell {
    @IBOutlet weak var imageContentView: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // 设置图片显示模式，保持比例
        imageContentView.contentMode = .scaleAspectFit
        // 确保ImageView的约束生效（XIB中配置后可忽略此句）
        imageContentView.translatesAutoresizingMaskIntoConstraints = false
        
        // 加载图片并监听完成事件
        imageContentView.sd_setImage(with: URL(string: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")) { [weak self] image, error, _, _ in
            guard let self = self, image != nil else { return }
            
            // 通知Cell更新自身的固有尺寸
            self.invalidateIntrinsicContentSize()
            
            // 精准获取CollectionView并刷新当前Cell布局
            if let collectionView = self.superview as? UICollectionView,
               let indexPath = collectionView.indexPath(for: self) {
                collectionView.performBatchUpdates({
                    collectionView.reloadItems(at: [indexPath])
                }, completion: nil)
            }
        }
    }
    
    // 重写固有尺寸，根据ImageView的实际图片尺寸返回Cell的正确尺寸
    override var intrinsicContentSize: CGSize {
        imageContentView.intrinsicContentSize
    }
}

3. 确认CollectionView布局配置 #

原有布局的estimated(50)是正确的初始占位高度，Compositional Layout会根据Cell的intrinsicContentSize自动调整最终高度。如果需要，可确保布局配置允许动态调整：

func configLayout(){
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                         heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    // estimated高度为初始占位，最终会根据Cell的固有尺寸调整
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                           heightDimension:.estimated(50))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize:groupSize, subitems: [item])
    let spacing = CGFloat(10)
    group.interItemSpacing = .fixed(spacing)

    let section = NSCollectionLayoutSection(group: group)
    section.interGroupSpacing = spacing
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

    let layout = UICollectionViewCompositionalLayout(section: section)
    // 明确滚动方向（默认垂直，可省略）
    layout.configuration.scrollDirection = .vertical
    self.collectionView.collectionViewLayout = layout
}

关键原理 #

• estimated(50)仅作为布局的初始占位高度，当Cell的intrinsicContentSize变化时，Compositional Layout会自动适配调整Cell高度，但需要主动触发布局更新。
• 重写Cell的intrinsicContentSize，让Cell根据ImageView加载后的图片尺寸返回正确的自身尺寸。
• 图片加载完成后调用reloadItems(at:)，通知CollectionView重新计算对应Cell的布局，确保高度更新。

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