ios - Compositional Layout with dynamically sized images based on aspect ratio?

Question

I'm trying to use Compositional Layouts with UICollectionView where each cell contains an image with a dynamic aspect ratio. I'm using AutoLayout for the cells but I haven't been able to get the cells to auto-size correctly.

What's the right way to specify the cell's layout/constraints so that they have the correct height based on image aspect ratios?

In the code below, the images themselves get sized correctly, but their containing cells don't have the correct height (they just use their estimated height and don't adjust dynamically to the contained image). See screenshot.

(I know this is relatively straightforward using UICollectionViewFlowLayout, but I'm trying to learn compositional layouts and haven't been able to figure it out using this method)

Here's what I'm setting up in code:

For simplicity's sake of this post, I'm using a basic compositional layout with 1 group and 1 item using heightDimension: .estimated(300) as placeholder

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)

Here's my code for the cell:

// during cellForItemAt, I call 
// cell.setImage(url: [url from API], size: [dynamic value from 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)
        }
        
        // set the image height constraint based on its aspect ratio
        // anchor it to 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),
        ])
        
    }
}

Answer 1

Thanks to @DonMag in the comments, the answer is creating 1 section per item and specify the layout for each item-section accordingly:

Assuming images gets populated with a dynamic list of images (e.g. from an API)

func numberOfSections(in collectionView: UICollectionView) -> Int {
  return images.count
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
  return 1 // return more if you want to render additional kinds of cell for each item besides the image
}

Setting up the compositional layout now looks like this -- the important part is ... heightDimension: .fractionalWidth(aspectRatio)

let layout = UICollectionViewCompositionalLayout { (sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? in
    
    // use sectionIndex as an index into the list retrieved from API
        
    let image = images[sectionIndex]
    
    let aspectRatio = image.width / image.height
    
    let item = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalWidth(aspectRatio)))
    
    let group = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalWidth(aspectRatio)), subitem: item, count: 1)
    
    let section = NSCollectionLayoutSection(group: group)
    
    return section
}

collectionView.setCollectionViewLayout(layout, animated: false)

Thanks @DonMag!