[英]Collectionview and diffable section with multiple cells
I'm trying to create a custom layout with UICollectionViewLayout and UICollectionViewDiffableDataSource.我正在尝试使用 UICollectionViewLayout 和 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() { 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)
}
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.