Collectionview and diffable section with multiple cells

user_5827900 0
Viewed 1254

I'm trying to create a custom layout with UICollectionViewLayout and UICollectionViewDiffableDataSource. I want 1 section with cells and both cells need to scroll horizontally simultaneously. But right now I can only get the top cell to show, see the picture below.

Here's what I've tried so far:

Create Layout

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)
}

Configure Datasource

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)
        }
    }
}

applyInitialSnapshots

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)
}

Image

uicollectionview swift ios
1 Answers

For achieving horizontal scroll you can set property for your section as

section.orthogonalScrollingBehavior = .continuous

The easiest way to achieve behaviour like you expect you can combine different group size

    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)
user_168301870
Related