具有集合视图组合布局的多列布局

Question

我正在将一些复杂的集合视图代码（带有嵌入式堆栈视图、集合视图、表视图等的滚动视图）转换为具有组合布局的单个集合视图。但在使用

count

参数时，我遇到了“两列”布局的问题。

为了进行实验，我下载了 Apple 的 Implementing Modern Collection Views 示例，查看了 Create a Column Layout 代码，其中包含以下示例：

extension TwoColumnViewController {
    /// - Tag: TwoColumn
    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, subitem: item, count: 2)
        let spacing = CGFloat(10)
        group.interItemSpacing = .fixed(spacing)

        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = spacing
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }
}

在他们的演示应用程序中，您可以通过导航到“组合布局”»“入门”»“双列网格”来到达那里。无论如何，这会产生：

好的，没关系。

但在 iOS 16 中，

horizontal(layoutSize:subitem:count:)

已被弃用：

如果将其替换为

horizontal(layoutSize:repeatingSubitem:count:)

，您将得到如下所示的布局（您甚至无法向右滚动以查看屏幕外的单元格）：

如何在 iOS 16 及更高版本中获得列式输出？

Answer 1

与

horizontal(layoutSize:subitem:count:)

不同，使用

horizontal(layoutSize:repeatingSubitem:count:)

您必须调整项目或组的宽度。例如：

extension TwoColumnViewController {
    /// - Tag: TwoColumn
    func createLayout() -> UICollectionViewLayout {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5),  // NB: 0.5, not 1.0
                                              heightDimension: .fractionalHeight(1))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                               heightDimension: .absolute(44))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, repeatingSubitem: item, count: 2)
        let spacing = CGFloat(10)
        group.interItemSpacing = .fixed(spacing)

        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = spacing
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }
}

正如新方法的文档所说：

您有责任确保小组的

layoutSize

能够适合该项目的

count

重复。

我发现我可以将项目或组的

widthDimension

的

NSCollectionLayoutItem

调整为

.fractionalWidth(0.5)

，它会呈现两列集合视图。

我希望上述内容可以帮助其他人在使用 Apple 的 组合布局示例时节省一点时间。