How hide header on iOS 13 Collection View Compositional Layout

Question

I encounter a wonder point when deploy the iOS 13 Compositional Layout.

I want to hide collection view header and implement referenceSizeForHeaderInSection method, however the referenceSizeForHeaderInSection can not work on Compositional Layout

This my Compositional Layout:

lazy var collectionViewLayout: UICollectionViewLayout = {
    // item layout deploy
    let cellItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.2))
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.33), heightDimension: .fractionalHeight(1.0))
    let cellItem = NSCollectionLayoutItem(layoutSize: cellItemSize)
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    cellItem.contentInsets = NSDirectionalEdgeInsets(top: 4, leading: 4, bottom: 4, trailing: 4)
    item.contentInsets = NSDirectionalEdgeInsets(top: 4, leading: 4, bottom: 4, trailing: 4)

    // group layout deploy
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),  heightDimension: .fractionalHeight(0.2))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 3)
    let containerGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),  heightDimension: .absolute(215))
    let containerGroup = NSCollectionLayoutGroup.vertical(layoutSize: containerGroupSize, subitems: [cellItem, group, group, group, group])

    // section layout deploy
    let section = NSCollectionLayoutSection(group: containerGroup)
    section.contentInsets = NSDirectionalEdgeInsets(top: 4, leading: 0, bottom: 4, trailing: 0)

    // Headers layout deploy
    let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(18))
    let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: SupplementaryViewOfKind.Header.rawValue, alignment: .top)
    section.boundarySupplementaryItems = [header]

    let layout = UICollectionViewCompositionalLayout(section: section)

    return layout
}()

Implement viewForSupplementaryElementOfKind

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    guard
        kind == SupplementaryViewOfKind.Header.rawValue,
        let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: XXXHeader.identifier, for: indexPath) as? XXXHeader
        else { return UICollectionReusableView() }
    if isFullScreen {
        // customer header with titleLabel property
        header.titleLabel.text = segmentedControl.titleForSegment(at: indexPath.section)
    } else {
        header.titleLabel.text = nil
    }
}

Then I tried into referenceSizeForHeaderInSection but could't work

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    if isFullScreen {
        return CGSize(width: collectionView.frame.width, height: 18)
    } else {
        return CGSize.zero
    }
}

Is there any idea or new way to hide Compositional Layout header.

Answer 1

When you're generating layout, the index can be passed in

func generateLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewCompositionalLayout {(sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
        // do your layout stuff here. With sectionIndex, you can layout differently for each section
    }
    return layout
}