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
}