Section Header zIndex in UICollectionView CompositionalLayout - iOS 13

Question

For some reason in new collectionview compositional layout zIndex property for section header is not working. I have tried below code to achieve the behaviour.

func configureCategorySectionLayout() -> NSCollectionLayoutSection {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
        let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(80), heightDimension: .absolute(105))
        let groupItem = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [layoutItem])

        let sectionLayout = NSCollectionLayoutSection(group: groupItem)

        let sectionItem = createAddressSectionHeader()
        sectionItem.zIndex = 2
        sectionItem.pinToVisibleBounds = true
        sectionLayout.boundarySupplementaryItems = [sectionItem]
        sectionLayout.contentInsets = .init(top: 0, leading: 10, bottom: 0, trailing: 10)
        sectionLayout.orthogonalScrollingBehavior = .continuous
        return sectionLayout
    }

func createAddressSectionHeader() -> NSCollectionLayoutBoundarySupplementaryItem {
        let sectionHeaderSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(65))
        let sectionHeaderItem = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: sectionHeaderSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
        return sectionHeaderItem
    }

Answer 1

You can fix this behaviour by adding the following snippet to your UICollectionReusableView subclass (and/or UICollectionViewCell subclass):

public override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
     super.apply(layoutAttributes)
     self.layer.zPosition = CGFloat(layoutAttributes.zIndex)
}

Answer 2

I had the same issue using iOS 13 + Compositional Layout. The cells in my collectionview were going on top of the sticky headers. I solved it by setting the header's zIndex in the compositional layout config, and then overriding ApplyLayoutAttributes in my reusableView class AND my collectionviewCell class.

class FoodCategorySectionHeader: UICollectionReusableView {

...

override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
      super.apply(layoutAttributes)
      layer.zPosition = CGFloat(layoutAttributes.zIndex)
   }
}

class FoodCell: UICollectionViewCell {

...

override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
       super.apply(layoutAttributes)
      layer.zPosition = 0.0
   }
}

The relevant section from my compositional layout code:

func createFoodSection(using section: FoodCategory) -> NSCollectionLayoutSection {

...      

      let layoutSectionHeader = createSectionHeader()
      layoutSectionHeader.zIndex = 1000
      layoutSectionHeader.pinToVisibleBounds = true
      
...

      layoutSection.boundarySupplementaryItems = [layoutSectionHeader]
      
      return layoutSection
   }