水平 UICollectionViewCompositionalLayout 在项目单元格上显示部分 headers

Question

我正在尝试使用 UICollectionViewCompositionalLayout 来创建此设计：

此处的目的是让 collection 视图水平滚动，当使用 NSCollectionLayoutSection 的 orthogonalScrollingBehavior 属性.

溢出时，项目也会垂直滚动

这是我现在的布局：

private lazy var collectionViewLayout: UICollectionViewLayout = {
    let sectionWidth: CGFloat = 256.0

    let layoutItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(50.0))
    let layoutItem = NSCollectionLayoutItem(layoutSize: layoutItemSize)

    let layoutGroupSize = NSCollectionLayoutSize(widthDimension: .absolute(sectionWidth), heightDimension: .fractionalHeight(1.0))
    let layoutGroup = NSCollectionLayoutGroup.vertical(layoutSize: layoutGroupSize, subitems: [layoutItem])
    layoutGroup.interItemSpacing = .fixed(8.0)

    let layoutSectionHeaderItemSize = NSCollectionLayoutSize(widthDimension: .absolute(sectionWidth), heightDimension: .absolute(150.0))
    let layoutSectionHeaderItem = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: layoutSectionHeaderItemSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)

    let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
    layoutSection.contentInsets = NSDirectionalEdgeInsets(top: 24.0, leading: 24.0, bottom: 24.0, trailing: 24.0)
    layoutSection.boundarySupplementaryItems = [layoutSectionHeaderItem]
    layoutSection.interGroupSpacing = 8.0

    let layoutConfiguration = UICollectionViewCompositionalLayoutConfiguration()
    layoutConfiguration.scrollDirection = .horizontal
    layoutConfiguration.interSectionSpacing = 16.0

    return UICollectionViewCompositionalLayout(section: layoutSection, configuration: layoutConfiguration)
}()

结果是：

关于我哪里出错的任何想法？

Answer 1

3 个月后，没有直接解决这个问题（无论是在这里，还是通过 Apple 的错误报告）。所以为了得到我在重新配置视图结构之后的设计。

简而言之，为了在 horizontally-scrolling collection 视图中获得带有固定 header 的 vertically-scrolling 列，我在 collection 视图单元格，上面有 header 个元素，全部在堆栈视图中。

我在 collection 视图上保留了 UICollectionViewCompositionalLayout，这已被简化：

private lazy var collectionViewLayout: UICollectionViewLayout = {
    let layoutItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
    let layoutItem = NSCollectionLayoutItem(layoutSize: layoutItemSize)
    
    let fractionalWidth: CGFloat = (Device.current.isPad) ? 0.5 : 1.0
    let layoutGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(fractionalWidth), heightDimension: .fractionalHeight(1.0))
    let layoutGroup = NSCollectionLayoutGroup.vertical(layoutSize: layoutGroupSize, subitems: [layoutItem])
    let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
    
    let layoutConfiguration = UICollectionViewCompositionalLayoutConfiguration()
    layoutConfiguration.scrollDirection = .horizontal
    
    return UICollectionViewCompositionalLayout(section: layoutSection, configuration: layoutConfiguration)
}()

水平 UICollectionViewCompositionalLayout 在项目单元格上显示部分 headers

Horizontal UICollectionViewCompositionalLayout displaying section headers over item cells

ios

swift

uicollectionview

uicollectionviewcompositionallayout