ios - 如何防止我的部分标题在组合布局中重叠单元格

Question

我希望标题出现在我的组合布局中的每个部分上方，但我找不到让它们出现在内容上方而不是重叠的方法，这是我的布局代码：

func createLayout() -> UICollectionViewLayout {
    
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .horizontal
    config.interSectionSpacing = 16
    
    let layout = UICollectionViewCompositionalLayout(sectionProvider: {
        
        (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
        
        let leadingItem = NSCollectionLayoutItem(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                               heightDimension: .estimated(50)))
        
        let widthFraction: CGFloat = UIScreen.main.bounds.size.width > UIScreen.main.bounds.size.height ? 0.2 : 0.8
        let containerGroup = NSCollectionLayoutGroup.vertical(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(widthFraction),
                                               heightDimension: .estimated(50)),
            subitems: [leadingItem])
        
        let section = NSCollectionLayoutSection(group: containerGroup)
        section.boundarySupplementaryItems = [self.makeHeader()]
        section.orthogonalScrollingBehavior = .continuous
        section.interGroupSpacing = 16
        return section
        
    }, configuration: config)
    
    return layout
}

func makeHeader() -> NSCollectionLayoutBoundarySupplementaryItem {
    let widthFraction: CGFloat = UIScreen.main.bounds.size.width > UIScreen.main.bounds.size.height ? 0.2 : 0.8
    let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(widthFraction),
                                      heightDimension: .estimated(50))
    let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: size,
                                                                   elementKind: UICollectionView.elementKindSectionHeader,
                                                                    alignment: .top)
    return sectionHeader
}

这是正在发生的事情的屏幕截图，我需要上面显示“Column1”的文本，而不是与列单元格重叠：

标签： iosswiftuicollectionviewios14uicollectionviewcompositionallayout

Answer 1

这是我的解决方案，但它只允许在我的部分中使用固定高度的标题：

你需要设置

section.supplementariesFollowContentInsets = false

然后偏移该部分：

section.contentInsets = NSDirectionalEdgeInsets(top: 66, leading: 8, bottom: 0, trailing: 8)

func createLayout() -> UICollectionViewLayout {
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .horizontal
    let layout = UICollectionViewCompositionalLayout(sectionProvider: { (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in

        let leadingItem = NSCollectionLayoutItem(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                               heightDimension: .estimated(50)))

        let widthFraction: CGFloat = UIScreen.main.bounds.size.width > UIScreen.main.bounds.size.height ? 0.2 : 0.8
        let containerGroup = NSCollectionLayoutGroup.vertical(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(widthFraction),
                                               heightDimension: .estimated(50)),
            subitems: [leadingItem])

        let section = NSCollectionLayoutSection(group: containerGroup)
        section.boundarySupplementaryItems = [self.makeHeader()]
        section.supplementariesFollowContentInsets = false
        section.orthogonalScrollingBehavior = .continuous
        section.interGroupSpacing = 16
        section.contentInsets = NSDirectionalEdgeInsets(top: 66, leading: 8, bottom: 0, trailing: 8)
        return section

    }, configuration: config)
    return layout
}

func makeHeader() -> NSCollectionLayoutBoundarySupplementaryItem {
    let widthFraction: CGFloat = UIScreen.main.bounds.size.width > UIScreen.main.bounds.size.height ? 0.2 : 0.8
    let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(widthFraction),
                                      heightDimension: .absolute(50))
    let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: size, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
    return sectionHeader

}