UICollectionViewCompositionalLayout，但不是重复的模式

Question

这里是布局的预览。

正如您所看到的，这个布局有一个单元格模式0、1、2、0、1、2、0、1、2。我希望我的布局描述0，1，2，1，2，1，2，1，2，与大小相关的模式。换句话说，只有第一个单元格具有较大的大小，而其他单元格应该占用一个大小以适应2行。我当前的布局代码：

import UIKit

struct Layout {
    
    private struct LayoutConstants {
        static let largeGroupHeight: CGFloat = 406
        static let leadingInset: CGFloat = 8
        static let topInset: CGFloat = 10
        static let bottomInset: CGFloat = 15
        static let itemCount = 2
        static let fractionalConstant: CGFloat = 1.0
        static let fractionalWidthLeading: CGFloat = 0.67
        static let fractionalWidthTrailing: CGFloat = 1.0
        static let fractionalHeightTrailing: CGFloat = 0.3
        static let fractionalContainerWidth: CGFloat = 1.2
        static let groupFractionalHeight: CGFloat = 0.33
    }
    
    func layoutSection() -> NSCollectionLayoutSection {
        let leadingItem = NSCollectionLayoutItem(
            layoutSize: NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(LayoutConstants.fractionalWidthLeading),
                heightDimension: .fractionalHeight(LayoutConstants.fractionalConstant)))
        leadingItem.contentInsets = NSDirectionalEdgeInsets(top: LayoutConstants.topInset,
                                                            leading: LayoutConstants.topInset,
                                                            bottom: LayoutConstants.bottomInset,
                                                            trailing: LayoutConstants.leadingInset)
        
        let trailingItem = NSCollectionLayoutItem(
            layoutSize: NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(LayoutConstants.fractionalWidthTrailing),
                heightDimension: .fractionalHeight(LayoutConstants.fractionalHeightTrailing)))
        trailingItem.contentInsets = NSDirectionalEdgeInsets(top: LayoutConstants.topInset,
                                                             leading: LayoutConstants.leadingInset,
                                                             bottom: LayoutConstants.bottomInset,
                                                             trailing: LayoutConstants.leadingInset)

        let trailingGroup = NSCollectionLayoutGroup.vertical(
            layoutSize: NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(LayoutConstants.groupFractionalHeight),
                heightDimension: .fractionalHeight(LayoutConstants.fractionalConstant)),
            subitem: trailingItem,
            count: LayoutConstants.itemCount)
        
        var subitems: [NSCollectionLayoutItem] = []
        subitems.append(leadingItem)
        subitems.append(trailingGroup)
        
        let containerGroup = NSCollectionLayoutGroup.horizontal(
            layoutSize: NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(LayoutConstants.fractionalContainerWidth),
                heightDimension: .absolute(LayoutConstants.largeGroupHeight)),
            subitems: subitems)
        let section = NSCollectionLayoutSection(group: containerGroup)
        section.orthogonalScrollingBehavior = .continuous
        return section
    }
}

Answer 1

我发现了以下几种不同的方法：

1. 我要用两部分。 Section1对于第一个数字，它将持有一组一项。 Section2对于所有其他的东西，它将容纳一组两项(垂直堆叠)。
2. 我们需要将集合视图的滚动方向更改为水平。 通常所有的部分都是垂直堆叠的，所以这两个部分将垂直堆叠，不会给我们我们想要的东西。
3. 我们需要更改组和项的布局配置，这样它才能正确地工作在水平滚动方向。

就这样，现在是密码了。

建议：请尝试从您的解决方案逐步转移到我的解决方案，以了解我在测试过程中学到的不同问题，它将帮助您理解每一篇文章的原因。

注意到：我使用的是值而不是常量，所以它不会混淆您，因为现在需要更改/重命名常量以适应这种方法。

• Section1 (一组一项)

func createSection1() -> NSCollectionLayoutSection {
    let item = NSCollectionLayoutItem(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .fractionalHeight(1.0)
        )
    )
    item.contentInsets = NSDirectionalEdgeInsets(
        top: 10,
        leading: 10,
        bottom: 15,
        trailing: 8
    )
    
    let group = NSCollectionLayoutGroup.horizontal(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(0.67),
            heightDimension: .absolute(406)
        ),
        subitem: item,
        count: 1
    )
    
    return NSCollectionLayoutSection(group: group)
}

• Section2 (一组两项垂直堆叠)

func createSection2() -> NSCollectionLayoutSection {
    
    let item = NSCollectionLayoutItem(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .fractionalHeight(0.3)
        )
    )
    item.contentInsets = NSDirectionalEdgeInsets(
        top: 10,
        leading: 8,
        bottom: 15,
        trailing: 8
    )
    
    let group = NSCollectionLayoutGroup.vertical(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(0.33),
            heightDimension: .absolute(406)
        ),
        subitem: item,
        count: 2
    )
    
    let section = NSCollectionLayoutSection(group: group)
    return section
}

• 最终布局 请注意指示scrollDirection更改的行

func createLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewCompositionalLayout {
        [weak self] (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
        guard let self = self else { return nil }
        
        if sectionIndex == 0 {
            return self.createSection1()
        } else {
            return self.createSection2()
        }
    }
    
    // Changing scrollDirection
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .horizontal
    layout.configuration = config
    
    return layout
}

• 最后，作为对如何在数据源中处理它的建议。

func numberOfSections(in collectionView: UICollectionView) -> Int {
    2
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    data.isEmpty
        ? 0
        : section == 0 ? 1 : data.count - 1
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(
        withReuseIdentifier: String(describing: Cell.self),
        for: indexPath
    ) as! Cell
    
    if indexPath.section == 0 {
        cell.number = data[0]
        cell.color = colors[0]
    } else {
        cell.number = data[indexPath.row + 1]
        cell.color = colors[indexPath.row + 1]
    }
    
    return cell
}

• 演示

​

​

就这样，如果你有什么问题，请告诉我。

• 参考资料：在UICollectionViewCompositionalLayout中并排的部分？