具有多个单元格的 Collectionview 和 diffable 部分

Posted 2023-03-14

【中文标题】具有多个单元格的 Collectionview 和 diffable 部分

【英文标题】：Collectionview and diffable section with multiple cells

【发布时间】：2020-07-18 15:08:25

【问题描述】：

我正在尝试使用 UICollectionViewLayout 和 UICollectionViewDiffableDataSource 创建自定义布局。 我想要一个带有单元格的部分，两个单元格都需要同时水平滚动。 但是现在我只能显示顶部的单元格，请参见下图。

这是我迄今为止尝试过的：

创建布局

func createLayout() -> UICollectionViewLayout 
    
    let sectionProvider =  (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
        
        guard let sectionKind = Section(rawValue: sectionIndex) else  return nil 
        let section: NSCollectionLayoutSection
        
        // orthogonal scrolling section of images
        if sectionKind == .image 
            let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(self.view.frame.width), heightDimension: .fractionalHeight(0.5))
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
                            
            let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(self.view.frame.width), heightDimension: .absolute(self.view.frame.height))
            
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
            
            section = NSCollectionLayoutSection(group: group)
            section.orthogonalScrollingBehavior = .paging
            section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 10, trailing: 0)
            // info
         else if sectionKind == .info 
            section = NSCollectionLayoutSection.list(using: .init(appearance: .sidebar), layoutEnvironment: layoutEnvironment)
            section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
         else 
            fatalError("Unknown section!")
        
        
        return section
    
    return  UICollectionViewCompositionalLayout(sectionProvider: sectionProvider)

配置数据源

func configureDataSource() 
    // data source
    
    dataSource = UICollectionViewDiffableDataSource<Section, Art>(collectionView: collectionView) 
        (collectionView, indexPath, item) -> UICollectionViewCell? in
        guard let section = Section(rawValue: indexPath.section) else  fatalError("Unknown section") 
        switch section 
        case .image:
            return collectionView.dequeueConfiguredReusableCell(using: self.configuredGridCell(), for: indexPath, item: item)
        case .info:
            return collectionView.dequeueConfiguredReusableCell(using: self.configuredListCell(), for: indexPath, item: item)
        
    

应用初始快照

func applyInitialSnapshots()

    // set the order for our sections
    
    let sections = Section.allCases
    var snapshot = NSDiffableDataSourceSnapshot<Section, Art>()
    snapshot.appendSections(sections)
    dataSource.apply(snapshot, animatingDifferences: false)
    
    // recents (orthogonal scroller)
    
    var imageSnapshot = NSDiffableDataSourceSectionSnapshot<Art>()
    imageSnapshot.append(self.arts)
    
    dataSource.apply(imageSnapshot, to: .image, animatingDifferences: false)

    var allSnapshot = NSDiffableDataSourceSectionSnapshot<Art>()
    allSnapshot.append(self.arts)
    dataSource.apply(allSnapshot, to: .info, animatingDifferences: false)

【参考方案1】：

为了实现水平滚动，您可以将部分的属性设置为

section.orthogonalScrollingBehavior = .continuous

实现您期望的行为的最简单方法可以组合不同的组大小

    let item1 = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                                                          heightDimension: .fractionalHeight(1)))
    let item2 = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                                                          heightDimension: .fractionalHeight(0.2)))

    item1.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
    item2.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)


    let group1 = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                                                                     heightDimension: .fractionalHeight(0.5)),
                                                    subitems: [item1])

    let group2 = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                                                                     heightDimension: .fractionalHeight(0.5)),
                                                  subitems: [item2])
    let group3 = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                                                                     heightDimension: .fractionalHeight(1)),
                                                  subitems: [group1, group2])

    let section = NSCollectionLayoutSection(group: group3)
    section.orthogonalScrollingBehavior = .continuous
    return UICollectionViewCompositionalLayout(section: section)