iOS：如何让Compositional Layout的图片Cell按比例自适应高度？

问题描述 #

我尝试在UICollectionView中使用Compositional Layout，每个Cell包含一张动态比例的图片，采用AutoLayout布局，但无法实现Cell高度的自动适配。目前图片本身显示尺寸正确，但Cell仅使用预估高度，不会根据图片动态调整。我知道用UICollectionViewFlowLayout实现相对简单，但希望掌握Compositional Layout的实现方法。

现有代码 #

布局代码 #

let layout = UICollectionViewCompositionalLayout { (sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? in

            let item = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(300)))
            
            let group = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(300)), subitem: item, count: 1)
            
            let section = NSCollectionLayoutSection(group: group)
            
            return section
}
collectionView.setCollectionViewLayout(layout, animated: false)

Cell代码 #

// 在cellForItemAt中调用
// cell.setImage(url: [API返回的url], size: [API返回的动态尺寸])

class ImageCell: UICollectionViewCell {
    
    static let ImageCellIdentifier = String(describing: ImageCell.self)
    
    var aspectRatioConstraint: NSLayoutConstraint?
    
    private let imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill
        return imageView
    }()
    
    func setImage(url: URL, size: CGSize) {
        
        let aspectRatio = size.width / size.height
        
        if let aspectRatioConstraint = aspectRatioConstraint {
            imageView.removeConstraint(aspectRatioConstraint)
        }
        
        // 根据图片比例设置高度约束，关联contentView.widthAnchor
        aspectRatioConstraint = imageView.heightAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: aspectRatio)
        
        NSLayoutConstraint.activate([
            aspectRatioConstraint!,
        ])
        
        imageView.sd_setImage(with: url)
        
        contentView.layoutIfNeeded()

    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        contentView.addSubview(imageView)
        
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            imageView.widthAnchor.constraint(equalTo: contentView.widthAnchor),
        ])
        
    }
}

解决方案 #

问题核心在于Cell缺少完整的垂直约束链，以及Compositional Layout的尺寸设置没有配合Cell的自动高度计算，以下是修正步骤：

1. 完善Cell的AutoLayout约束 #

给imageView添加底部约束，形成从top到bottom的完整约束链，让系统能通过图片比例计算出Cell的真实高度，同时修正比例计算逻辑：

class ImageCell: UICollectionViewCell {
    
    static let ImageCellIdentifier = String(describing: ImageCell.self)
    
    var aspectRatioConstraint: NSLayoutConstraint?
    
    private let imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true // 可选，防止图片超出Cell边界
        return imageView
    }()
    
    func setImage(url: URL, size: CGSize) {
        // 修正比例计算：用 图片高度/图片宽度，确保高度 = 宽度 × 比例
        let aspectRatio = size.height / size.width
        
        // 移除旧约束
        aspectRatioConstraint.map { imageView.removeConstraint($0) }
        
        // 创建新的比例约束，关联imageView自身的宽高
        aspectRatioConstraint = imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: aspectRatio)
        aspectRatioConstraint?.priority = .required
        
        NSLayoutConstraint.activate([
            aspectRatioConstraint!
        ])
        
        imageView.sd_setImage(with: url)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        contentView.addSubview(imageView)
        
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor), // 关键：添加底部约束，形成垂直约束链
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. 调整Compositional Layout的尺寸配置 #

让item高度完全跟随group，group使用极小的预估高度（让布局优先依赖Cell的约束计算真实高度）：

let layout = UICollectionViewCompositionalLayout { (sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? in
    // Item尺寸：宽度占满，高度随内容（跟随group）
    let item = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .fractionalHeight(1.0)
    ))
    
    // Group尺寸：宽度占满，高度仅做预估（实际由Cell约束决定）
    let group = NSCollectionLayoutGroup.vertical(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(1)
        ),
        subitem: item,
        count: 1
    )
    
    let section = NSCollectionLayoutSection(group: group)
    // 可选：添加section内边距优化显示
    section.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
    return section
}
collectionView.setCollectionViewLayout(layout, animated: false)

3. 辅助配置（可选） #

给CollectionView设置自动预估尺寸，辅助系统更准确计算高度：

collectionView.estimatedItemSize = UICollectionViewFlowLayout.automaticSize

为什么原代码失效？ #

• 原Cell未设置imageView的底部约束，垂直方向没有完整约束链，系统无法计算Cell的真实高度；
• 原布局中item和group使用了固定的estimated(300)高度，布局会优先采用该预估高度，忽略Cell的约束计算结果。

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