Overview
I'm trying to create a layout using the collection view UICollectionViewCompositionalLayout API.
This is the design I need to create:

Code
This is the code so far:
private func makeHelloLayoutSection() -> NSCollectionLayoutSection {
let itemSize = NSCollectionLayoutSize(
widthDimension: .absolute(100),
heightDimension: .absolute(200))
let groupSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(0.8),
heightDimension: .absolute(500))
let supplementarySize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1),
heightDimension: .absolute(50))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let group = NSCollectionLayoutGroup.horizontal(
layoutSize: groupSize,
subitems: [item])
let topInset = groupSize.heightDimension.dimension - itemSize.heightDimension.dimension
group.contentInsets.top = topInset
let section = NSCollectionLayoutSection(group: group)
section.contentInsets.leading = 16
section.orthogonalScrollingBehavior = .continuous
let sectionBackgroundDecoration = NSCollectionLayoutDecorationItem.background(
elementKind: sectionBackgroundDecorationElementKind)
section.decorationItems = [sectionBackgroundDecoration]
let sectionSupplementaryItem = NSCollectionLayoutBoundarySupplementaryItem(
layoutSize: supplementarySize,
elementKind: self.categoryHeaderID,
alignment: .topLeading)
section.boundarySupplementaryItems = [sectionSupplementaryItem]
return section
}
Problem
With the code above, it looks like this:
The problem is the text Hello. I can't position it to be on top of the blue items (cells) like in the design. I'm using a NSCollectionLayoutBoundarySupplementaryItem with .topLeading as the alignment.
Any thoughts on how to position the text correctly?
