We’re attempting to use UICollectionView
compositional layout to describe a section layout, but it’s giving us some trouble.
What we’d like to achieve:
- A total of 7 cells
- 3 cells stacked, each 30% height and 100% width, with orthogonal scrolling to see the next 3
- When the user reaches the last cell, it would be 100% height and 100% width of the container.
ASCII art and screenshots of the imperfect example are below.
Our starting point was Apple’s example code, specifically OrthogonalScrollingViewController
, but what we’ve found is if we expand the widths there, the height settings seem to longer be respected.
The most basic version of a layout that we tried is this:
func createLayout() -> UICollectionViewLayout {
let layout = UICollectionViewCompositionalLayout {
(sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
// Small items at roughly 30% of the container height.
let smallItem = NSCollectionLayoutItem(
layoutSize: NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .fractionalHeight(0.3)
)
)
// The large item should be 100% of the container width.
let largeItem = NSCollectionLayoutItem(
layoutSize: NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .fractionalHeight(1.0)
)
)
// We want 3 items to appear stacked with orthogonal scrolling.
let smallItemGroup = NSCollectionLayoutGroup.vertical(
layoutSize: NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .fractionalHeight(1.0)
),
subitem: smallItem,
count: 3
)
let containerGroup = NSCollectionLayoutGroup.horizontal(
layoutSize: NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1),
heightDimension: .fractionalHeight(0.5)
),
subitems: [smallItemGroup, largeItem]
)
let section = NSCollectionLayoutSection(group: containerGroup)
section.orthogonalScrollingBehavior = .paging
return section
}
return layout
}
We’ve tried many variations of nested groups and using the .vertical
and .horizontal
initializers, but each of them has the same result: The last cell is always the same size as all the others.
// +------------------------------+ These would be off-screen
// | +-------------------------+ | +-------------------------+ +-------------------------+
// | | 1 | | | 4 | | |
// | +-------------------------+ | +-------------------------+ | |
// | +-------------------------+ | +-------------------------+ | |
// | | 2 | | | 5 | | 7 |
// | +-------------------------+ | +-------------------------+ | |
// | +-------------------------+ | +-------------------------+ | |
// | | 3 | | | 6 | | |
// | +-------------------------+ | +-------------------------+ +-------------------------+
// | |
// | |
// | |
// | rest of the screen |
// | |
// | |
// | |
// | |
// +------------------------------+
The last cell in the third screenshot, (0,6), is the one we want 100% height of the section.
Is there a way to achieve this layout where the last cell is 100% of the section height?