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
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]
}