The headers for my sections in my collection view and only showing up on every even (2,4,6,...) section and I have no idea why.

When I scroll up and down again, of course the words change (it's set up that way), but which headers have titles get changed around from time to time so that every odd (1,3,5,...) section header has a title and so on.

At this point, all I'm trying to do is display a random word for the header to test if it is working and no dice.

Any help would be most welcome.

Thanks,

Ryan

SCREENSHOTS:

https://imgur.com/a/tnRMzw4

CODE:

func configureCollectionView() {

        let collectionViewLayout = configureLayout()

        collectionView = UICollectionView(
            frame: view.bounds,
            collectionViewLayout: collectionViewLayout
        )
        //...
        collectionView.register(CollectionReusableView.self,
                                forSupplementaryViewOfKind: "header-supplementary-item",
                                withReuseIdentifier: "header-supplementary-item")

        view.addSubview(collectionView)

}

    func configureLayout() -> UICollectionViewLayout {

        let badgeAnchor = NSCollectionLayoutAnchor(
            edges: [.top, .trailing],
            fractionalOffset: CGPoint(
                x: 0.5,
                y: -0.5
            )
        )

        let badgeSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(0.14),
            heightDimension: .fractionalHeight(0.14)
        )

        let badge = NSCollectionLayoutSupplementaryItem(
            layoutSize: badgeSize,
            elementKind: "badge-element-kind",
            containerAnchor: badgeAnchor
        )

        let itemSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(0.5),
            heightDimension: .fractionalHeight(1.0)
        )

        let item = NSCollectionLayoutItem(
            layoutSize: itemSize,
            supplementaryItems: [badge]
        )
        item.contentInsets = NSDirectionalEdgeInsets(
            top: 5,
            leading: 5,
            bottom: 5,
            trailing: 5
        )

        let groupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1),
            heightDimension: .fractionalWidth(0.5)
        )

        let group = NSCollectionLayoutGroup.horizontal(
            layoutSize: groupSize,
            subitems: [item])

        group.contentInsets = NSDirectionalEdgeInsets(top: 7, leading: 0, bottom: 0, trailing: 0)

        let headerSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .fractionalWidth(0.1)
        )

        let header = NSCollectionLayoutBoundarySupplementaryItem(
            layoutSize: headerSize,
            elementKind: "header-supplementary-item",
            alignment: .topLeading
        )

        header.zIndex = -10

        let section = NSCollectionLayoutSection(
            group: group)

        section.contentInsets = NSDirectionalEdgeInsets(
            top: 2,
            leading: 2,
            bottom: 2,
            trailing: 2)

        section.boundarySupplementaryItems = [header]
        section.orthogonalScrollingBehavior = .groupPaging
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 30, trailing: 0)

        let layout = UICollectionViewCompositionalLayout(
            section: section
        )

        let config = UICollectionViewCompositionalLayoutConfiguration()
        config.contentInsetsReference = .readableContent

        layout.configuration = config

        return layout

    }

    func configureDataSource() {

        datasource = UICollectionViewDiffableDataSource<Section, AnimalResult>(
            collectionView: collectionView) { [weak self]
                (collectionView, indexPath, animal) -> UICollectionViewCell? in

                    //...

            }

        datasource.supplementaryViewProvider = { [weak self] 

                (collectionView: UICollectionView, 
                    kind: String, 
                    indexPath: IndexPath) -> UICollectionReusableView? in

            guard let self else { return nil }

            if kind == "badge-element-kind" {

                //...

            } else if kind == "header-supplementary-item" {

                let headerView = collectionView.dequeueReusableSupplementaryView(
                                                ofKind: "header-supplementary-item", 
                                                withReuseIdentifier: "header-supplementary-item", 
                                                for: indexPath) as! CollectionReusableView

                let sections = datasource.snapshot().sectionIdentifiers

                let section = sections[indexPath.section]

                let randomWords = ["apple", "bicycle", "candle", "dolphin", "elephant", 
                                                "flamingo", "giraffe", "harp", "island", "jigsaw", 
                                                "kangaroo", "lemon", "mango", "notebook", "ocean", 
                                                "parrot", "quasar", "radiator", "sunflower", "tornado", 
                                                "umbrella", "violin", "waterfall", "xylophone", "yogurt", 
                                                "zeppelin"]

                headerView.title.text = randomWords.randomElement()?.uppercased()
                headerView.backgroundColor = .systemGray2.withAlphaComponent(0.5)

                return headerView

            } else {

                return nil

            }

        }

        var snapshot = NSDiffableDataSourceSnapshot<Section, AnimalResult>()
        //...
        datasource.apply(snapshot, animatingDifferences: false)

    }