UICollectionViewCompositionalLayout头不对齐

Question

我已经创建了一个基于UICollectionViewCompositionalLayout的自定义布局，它在面板或卡片中显示每个部分的项目.

​

​

...here蓝色区域是一个通过其decorationItems属性传递给该节的NSCollectionLayoutDecorationItem。这个背景项有它自己的内容嵌入，它从集合视图边界(灰色区域)嵌入它，并且该部分有自己的内容嵌入到面板中。紫色部分为3个全宽项(单元格)。

这一切都如预期的那样起作用。

但是，当我试图使用boundarySupplementaryItems向每个节添加一个标题时，标题(红色)似乎忽略了该节的内容嵌入，但该节本身的大小似乎是正确定位的.

​

​

...the标头将自己引脚到节的顶部，但是节高会随着标头的高度+嵌体的高度而增加。

这是我用来生成布局的代码..。

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)

let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44.0))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])

let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44.0))
let headerItem = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: "header", alignment: .top)

let panelBackgroundItem = NSCollectionLayoutDecorationItem.background(elementKind: "PanelBackground")
panelBackgroundItem.contentInsets = NSDirectionalEdgeInsets(top: 4.0, leading: 8.0, bottom: 4.0, trailing: 8.0)

let section = NSCollectionLayoutSection(group: group)
section.boundarySupplementaryItems = [headerItem]
section.contentInsets = NSDirectionalEdgeInsets(top: 11.0, leading: 15.0, bottom: 11.0, trailing: 15.0)
section.decorationItems = [panelBackgroundItem]

let configuration = UICollectionViewCompositionalLayoutConfiguration()
configuration.interSectionSpacing = 4.0

let layout = UICollectionViewCompositionalLayout(section: section, configuration: configuration)
layout.register(PanelBackgroundView.self, forDecorationViewOfKind: "PanelBackground")

有人能建议我如何使标题正确地定位--就在该部分的第一项之上，并尊重已经设置的内容内嵌？

Answer 1

解决问题的一种方法是将UICollectionViewCompositionalLayoutConfiguration.interSectionSpacing.设置为零并使用contentInset.top然后sectionHeader就在第一个单元格的上方，我们也可以配置各区段之间的间距。

剖面间距 使用配置

Answer 2

@Rafael，我在这里发布答案，因为评论不允许有足够的字符。这是取自WWDC 2019年的高级collectionView布局：

func createLayout() -> UICollectionViewLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(44))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
    
    let section = NSCollectionLayoutSection(group: group)

    
    let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44)), elementKind: SectionHeadersFootersViewController.sectionHeaderElementKind, alignment: .top)
    header.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 0, bottom: 20, trailing: 0)
    let footer = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44)), elementKind: SectionHeadersFootersViewController.sectionFooterElementKind, alignment: .bottom)
    section.boundarySupplementaryItems = [header,footer]
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)


    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.interSectionSpacing = 10
    
    let layout = UICollectionViewCompositionalLayout(section: section, configuration: config)
    return layout
}

结果