Group Group Group Group Group Group Group Group Group

Help with Collectionview Compositional layout

Hi All, I’m re-writing some of my collection view flow layouts using compositional layouts, and I’m having a bit of trouble with achieving what I want.

Basically, I have a 2 column layout, consisting of self-sizing cells (the cell height is essentially dictated by the number of lines in a UILabel).

What I’m trying to achieve is to have the cells in each row be the height of the tallest cell in the row.

I’ve got a simple layout that works for 2 columns, and the “group” height seems good, however each cell only extends to its individual height. (as seen in this image, the left mock up)

We’ve achieved this in the past by extracting the cells on each row and calculating the max height when the flow layout delegate requests it, however I’m hoping to avoid that (wasn’t very accurate and had a ton of bounds / trait collection dependencies).

I’m thinking I possibly need to create better groups? Perhaps a horizontal group, embedded in a vertical group?

Any help is sincerely appreciated. Thanks!

The code for my layout:

private func createLayout() -> UICollectionViewLayout {
    let compositionalLayout = UICollectionViewCompositionalLayout { (_, layoutEnvironment) -> NSCollectionLayoutSection in
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(50))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(50))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 2)
        group.interItemSpacing = .fixed(30)

        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 0
        section.contentInsets = NSDirectionalEdgeInsets(top: 30, leading: 30, bottom: 0, trailing: 30)
        return section
    return compositionalLayout

@cnbciosdevs Do you still have issues with this?

Yes, still having issues. Unable to achieve this layout with any kind of flexible height sizing.

I can get it to “sort of” work with absolute heights, but that of course doesn’t allow rows to grow/shrink appropriately.