12

I am using UICollectionView Compositional Layout and want to have a header that is sticking to the top

this should be possible with

header.pinToVisibleBounds = true

however, during scrolling, the header gets strangely obscured, looking like a bug... moreover looks like only the cells, that were outside of the visible screen, when reloaded, obscure the header

swift

you can see it in this video https://www.dropbox.com/s/n5myzfceuiwzb39/stackoverflow-unsatable-header.mov?dl=0

thats how the whole layout is build

func buildLayout() -> UICollectionViewCompositionalLayout {

    // cells
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .absolute(90))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(90))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 2)
    group.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20)
    group.interItemSpacing = .fixed(10)

    let section = NSCollectionLayoutSection(group: group)
    section.interGroupSpacing = 10
    section.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 0, bottom: 20, trailing: 0)

    // header
    let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(200))
    let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
    header.pinToVisibleBounds = true
    header.zIndex = Int.max
    section.boundarySupplementaryItems = [header]

    let configuration = UICollectionViewCompositionalLayoutConfiguration()
    return UICollectionViewCompositionalLayout(section: section, configuration: configuration)
}

What is the workaround? or what other method to have a "floating" header?


NOTE 1:

looks like when the header is attached to configuration.boundarySupplementaryItems it behaves as expected... through this might be a solution to the current case, it doesn't fix the overall problem with section... (you must also set the zIndex to a very high number)

do {
    center.contentInsets.top = 0
    let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(200))
    let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
    header.pinToVisibleBounds = true
    header.zIndex = Int.max // !!! IMPORTANT
    //header.extendsBoundary = true
    configuration.boundarySupplementaryItems = [header]
}
Peter Lapisu
  • 19,915
  • 16
  • 123
  • 179
  • Been trying to implement a `.leading` sticky header, with vertical layout, and orthogonal scrolling would scroll over the header. Your workaround works for my issue too. I didn't even know the config has `boundarySupplementaryItems`, nice catch. – hidden-username Jul 31 '20 at 14:25

0 Answers0