Collection view compositional layout issue

Viewed 220

Overview

I'm trying to create a layout using the collection view UICollectionViewCompositionalLayout API.

This is the design I need to create: enter image description here

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:

enter image description here

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?

0 Answers
Related