Badge view behind the cell

Hi! I trying to configure a UICollectionView with compositional layout but I´ve found a problem. I added a badge view to the cells but it appears behind the cell. It happens only when I set section´s .orthogonalScrollingBehavior to any value but .none. I tried to set badge´s zIndex property to higher but it wouldn't work. Setting badge´s layer.zPosition to higher, kind of fixed the issue but in the in DebugViewHierarchy it still appears behind the cell and if the badge contains a button you can't press it. I would appreciate any help.

Thanks in advance!

Answered by wlixcc in 683384022

Change section.orthogonalScrollingBehavior to continuous or other behavior, It can cause this problem, I have report this bug to apple in feedback, but there is no response yet.

let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous 

We'll need some more information to try and suss out what could be going wrong here: could you post what your layout section/group looks like? Please also include which OS and version you're running this on.

Thank you for prompt response!

The layout code is following:

  private func createLayoutforBottomCollectionView() -> UICollectionViewLayout {

    let layout = UICollectionViewCompositionalLayout { section, enviroment in
      let badgeAnchor = NSCollectionLayoutAnchor(edges: [.top, .trailing], fractionalOffset: CGPoint(x: 0.3, y: -0.3))
      let badgeSize = NSCollectionLayoutSize(widthDimension: .absolute(20), heightDimension: .absolute(20))
      let badge = NSCollectionLayoutSupplementaryItem(layoutSize: badgeSize,  elementKind: ViewController.badgeElementKind, containerAnchor: badgeAnchor)
      let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
      let item = NSCollectionLayoutItem(layoutSize: itemSize, supplementaryItems: [badge])

      let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.21), heightDimension: .fractionalHeight(0.4))
      let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

      let section = NSCollectionLayoutSection(group: group)
      section.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5)
      section.interGroupSpacing = 10
      section.orthogonalScrollingBehavior = .continuous

      return section
    }
    return layout
  }

Actually is the same as in the sample app "ImplementingModernCollectionViews" but I just added .orthogonalScrollingBehavior. I´ve tested it in a separate app with two sections and this was the result:

My iOS is Big Sur 11.5.1

Accepted Answer

Change section.orthogonalScrollingBehavior to continuous or other behavior, It can cause this problem, I have report this bug to apple in feedback, but there is no response yet.

let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous 

I had the same issue.

Setting the zPosition property of the cell's layer to -100 solved it for me. (I'm using CellRegistration)

i.e.

let registration = UICollectionView.CellRegistration<UICollectionViewCell, Item> { cell, indexPath, item in
    cell.layer.zPosition = -100
    // do more configuration...
}
Badge view behind the cell
 
 
Q