Collectionview and diffable section with multiple cells - ios

Question

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

Answer 1

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)