0

我正在尝试使用 UICollectionViewCompositionalLayout 来创建这个设计:

UICollectionViewCompositionalLayout 所需的布局

这里的目的是让集合视图水平滚动,当项目使用 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)
}()

结果是:

UICollectionViewCompositionalLayout 实际布局

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

4

1 回答 1

1

3 个月后,没有直接的解决方案(无论是在这里,也不是通过 Apple 的错误报告)。因此,为了获得设计,我是在我最终重新配置视图结构之后。

简而言之,为了在水平滚动的集合视图中获得带有固定标题的垂直滚动列,我在集合视图单元格中放置了一个表格视图,标题元素位于其上方,所有这些都在堆栈视图中。

我将 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)
}()
于 2020-07-15T20:26:09.653 回答