UICompositionalLayout 未按预期工作（垂直表格滚动 + 水平分页）

Posted 2023-02-23

【中文标题】UICompositionalLayout 未按预期工作（垂直表格滚动 + 水平分页）

【英文标题】：UICompositionalLayout not working as intended (vertical table scroll + horizontal paging)

【发布时间】：2020-03-03 15:54:13

【问题描述】：

我一直在研究 ios 13 中引入的“新”组合布局 api，希望找到一种解决方案来解决将 UITableView 嵌入到 UICollectionViewCell 中的人为方法。 我过去曾使用过这种令人头疼的解决方案，以便同时提供水平页面滚动和垂直表格滚动。这是一种非常繁琐的做事方式，自从宣布CompositionalLayout 以来，我一直渴望尝试重构它。

到目前为止，没有运气。我可以使水平滚动和垂直滚动工作，但无法超越每行以独立方式水平滚动的“App Store”行为。 有没有人幸运地实施了类似的解决方案？

这是我的CollectionViewLayout 代码：

func createOrthogonalScrollingLayout() -> UICollectionViewLayout 


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

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

    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .groupPagingCentered
    section.interGroupSpacing = 16
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)


    let layout = UICollectionViewCompositionalLayout(section: section)

    return layout

这会产生两个项目的垂直滚动和显示后续页面中剩余项目的水平滚动，但每页只有两个。我的目标是让“页面”除以一年中的天数，每个页面应该有 X 个可垂直滚动的项目。

谢谢

【问题讨论】：

我不明白目标是什么。能画个图吗？

已添加@matt 图。

我看不懂图表。这只是一个静态屏幕截图；我不明白它应该做什么。在我看来，这应该是一个水平滚动的日期集合视图，其中每个组都是垂直在那天发生的事情的滚动序列？

很抱歉。这是 Sketch 中的 UI 设计。但是，是的，这正是我们想要的。当您水平滚动时，您应该移动到第二天，当天的所有事件都会垂直滚动。

好吧，第一个问题是您忘记将其设为水平滚动布局。

【参考方案1】：

groupSize 高度应该是你的单元格的高度，例如，像这样：

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8), heightDimension: .absolute(250.0))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])