UICollectionView CompositionalLayout中的节头zIndex - iOS 13

Question

由于某些原因，在新的集合视图组合布局中，部分头的zIndex属性不起作用。 我已经尝试了下面的代码来实现这种行为。

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
    }

- CrackIt

---

你是否面临相同的问题，找到了解决方案吗？ - PhM

no dear...!! @PhM - CrackIt

当您将orthogonalScrollingBehavior设置为除.none之外的其他值时，似乎会出现此问题。 - maxpower

Answer 1

你可以通过在你的UICollectionReusableView子类（和/或 UICollectionViewCell 子类）中添加以下片段来修复此行为：

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

- PhM

---

我会尝试。谢谢！ - CrackIt

我必须说，现在比以前好多了。它现在出现在前面，但当我向前滚动时，标题会突然消失在中间。当我向后滚动时，它才会重新出现。我的意思是，在此之前，第二个部分会在第一个部分之间粘在一起，导致标题消失。 - CrackIt

@CrackIt 我也注意到了同样的问题，真是太烦人了。我已经解决了zLayer的问题，但是即使将pinToVisibleBounds设置为true，标题仍然会消失。 - Adam

@Adam 没错，由于某些原因它没有固定。 - CrackIt

哇，这真的很有帮助——谢谢@PhM。这个解决了我在使用自定义可重用补充视图的组合布局中遇到的zIndex问题。 - thefaj

Answer 2

我在使用 iOS 13 和组合布局时遇到了相同的问题。我的集合视图中的单元格会覆盖在粘性标题上方。我通过在组合布局配置中设置标题的zIndex，然后在我的重用视图类和集合视图单元格类中覆盖 ApplyLayoutAttributes 方法来解决了这个问题。

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

我的组合布局代码的相关部分：

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

...      

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

      layoutSection.boundarySupplementaryItems = [layoutSectionHeader]
      
      return layoutSection
   }

- theogood

---

似乎从CollectionView单元格以及可重用视图覆盖属性就可以解决问题。需要测试一下，但我已经不再参与这个项目了。顺便说一句，感谢您的帮助，非常感激。 - CrackIt

没问题@CrackIt！如果您认为答案正确，请随意将其标记为“已接受” :) - theogood

好的，幸运的是我还有这个项目，但我尝试了你的解决方案，不幸的是它对我没有起作用。 - CrackIt

观察集合视图，似乎它会自动将固定标题属性的“zIndex”设置为UInt64.max，但有时它会将其带回到“NSCollectionLayoutBoundarySupplementaryItem”中的值（默认为1），因此会出现闪烁。在“NSCollectionLayoutBoundarySupplementaryItem”上将“zIndex”设置为更大的值对我有用。 - tompitt

这个可以工作，但你仍然可能会处于边界补充项显示在单元格上方且用户交互未启用的状态。 - PatPatchPatrick