时间戳

首页 > 解决方案 > 使用 UICollectionViewCompositionalLayout 水平滚动多个部分

ios - 使用 UICollectionViewCompositionalLayout 水平滚动多个部分

问题描述

是否可以用于UICollectionViewCompositionalLayout创建包含多个部分的水平滚动集合视图？

我正在寻找一个类似于表情符号键盘的布局，它有多个部分，每个部分都附加到前一个部分的末尾，在一个水平滚动的“组”中，每个部分都有一个标题。

在此处输入图像描述

使用以下布局，每个部分垂直堆叠，每个部分水平滚动：

    UICollectionViewCompositionalLayout {
        (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in

        let leadingItem = NSCollectionLayoutItem(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.7),
                                              heightDimension: .fractionalHeight(1.0)))
        leadingItem.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)

        let trailingItem = NSCollectionLayoutItem(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                              heightDimension: .fractionalHeight(0.3)))
        trailingItem.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
        let trailingGroup = NSCollectionLayoutGroup.vertical(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.3),
                                              heightDimension: .fractionalHeight(1.0)),
            subitem: trailingItem, count: 2)

        let containerGroup = NSCollectionLayoutGroup.horizontal(
            layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.85),
                                              heightDimension: .fractionalHeight(0.4)),
            subitems: [leadingItem, trailingGroup])
        let section = NSCollectionLayoutSection(group: containerGroup)
        section.orthogonalScrollingBehavior = .continuous

        return section

    }

标签： iosuicollectionviewios13

解决方案

您可以使用以下配置将 collectionViewLayout 的主要滚动方向设置为水平：

let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .horizontal

let sectionProvider = ...(your section provider here)

let cvLayout = UICollectionViewCompositionalLayout(sectionProvider: sectionProvider, configuration: config)

在 sectionProvider 中，您可以创建一个固定到每个部分顶部的标题，如下所示：

let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(40))
let headerSupplementary = NSCollectionLayoutBoundarySupplementaryItem(
            layoutSize: headerSize,
            elementKind: UICollectionView.elementKindSectionHeader,
            alignment: .topLeading)
section.boundarySupplementaryItems = [headerSupplementary]

此设置应实现您想要的滚动行为。在每个部分中，您可以使用以下组来实现与表情符号键盘相同的网格布局：

let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitem: item, count: 5)

推荐阅读