CODEWITHSUNDEEP
swift
drekka
drekka

Reputation: 21893

UICollectionViewCompositionalLayout: How to expand cells to same height?

I'm trying out the UICollectionViewCompositionalLayout as a way to build a UI where there are both a vertical and horizontal arrangement of cells. ie. one section scrolls vertically and another scrolls horizontally. Something like this:

+-------+
|+-----+-----+-----+-----+ 
||  1  |  2  |  3  |  4  |
|+-----+-----+-----+-----+ 
||  A  ||
|+-----+|
||  B  ||
|+-----+|
+|  C  |+
 +-----+
 |  D  | 
 +-----+

I've built a layout for the horizontal section using this:

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(200.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8), heightDimension: .estimated(200.0))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous

This works perfectly except in one aspect. The cells 1, 2, 3 and 4 are all different heights. Which means the display looks more like this:

+-------+
|+-----+-----+-----+-----+ 
||  1  |  2  |  3  |  4  |
||     +-----+     +-----+ 
|+-----+     |     | 
|            +-----+ 
|+-----+|     
||  A  ||
|+-----+|
||  B  ||

The problem I have is that I want all the horizontal cells to have the same height. That height being the height of the largest cell.

Previously I'd done this by manually calculating the height of the tallest cell then setting a constraint on all the cells with that height.

But I'm hoping I don't have to try that here. Is there a way to handle disparate cell heights in a UICollectionViewCompositionalLayout that doesn't resort to manually calculating heights?

Upvotes: 1

Views: 1013

Answers (3)

Michał Kwiecień
Michał Kwiecień

Reputation: 2874

Apple has released solution for this in iOS 17. Just use .uniformAcrossSiblings height dimension for your item. You can read more in the documentation

For iOS <17 unfortunately we still need to use workarounds.

Upvotes: 4

ViTUu
ViTUu

Reputation: 1204

You can do that:

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8), heightDimension: .estimated(200.0))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous

When you set your item size as fractional height 1.0, you say to use the same height as the group size. So, if you put on the group size an estimate, it will try to use the estimated value but it will force the other items to use the same height as the highest item.

I hope it has helped you.

Upvotes: 0

drekka
drekka

Reputation: 21893

I have a working answer but I feel that it's not as good as it could be. Basically I'm manually calculating the height of the tallest cell in the row then setting that as the height of the group. It works, but I feel there should be an option to expand cell dimensions when there is orthogonal scrolling enabling.

Upvotes: 1

Related Questions