[英]Unwanted space between Collection View cells Compositional Layout
我正在为场景使用集合视图。 我创建了一个自定义组合布局,如下所示。 但是,在滚动时,单元格的第二部分之间存在不需要的空间。 它发生在不同的细胞类型中。 我检查了间距或插图,但我无法弄清楚原因。
组成布局部分:
struct UIHelper {
static func createLayouts(section: [SectionType], sectionIndex: Int) -> NSCollectionLayoutSection {
switch section[sectionIndex] {
case .sevenDaysWeather(_):
// MARK: - Item
let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(70), heightDimension: .absolute(124))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
// MARK: - Group
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(124))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
group.interItemSpacing = .fixed(12)
// MARK: - Section
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous
// MARK: - Header
let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(24))
let headerKind = UICollectionView.elementKindSectionHeader
let headerElement = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: headerKind, alignment: .top)
section.boundarySupplementaryItems = [headerElement]
section.contentInsets = NSDirectionalEdgeInsets(top: 12, leading: 16, bottom: 20, trailing: 0)
return section
}
}
集合视图部分:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let type = sections[indexPath.section]
switch type {
case .sevenDaysWeather(let viewModels):
guard let sevenDaysCell = collectionView.dequeueReusableCell(withReuseIdentifier: SevenDaysCollectionViewCell.identifer, for: indexPath) as? SevenDaysCollectionViewCell else { return UICollectionViewCell()}
sevenDaysCell.configure(with: viewModels[indexPath.row])
return sevenDaysCell
}
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: HeaderCollectionReusableView.identifier, for: indexPath) as! HeaderCollectionReusableView
header.configure(section: sections, indexPath: indexPath)
return header
}
}
编辑:通常我在集合视图中还有两个部分。 为了使示例更清晰,我修剪了这些部分。 但是逻辑与给定示例相同。
过了一会儿,我意识到问题与布局组的宽度大小有关。
在我发布的初始版本中,在组合布局组属性中,我在组大小中使用了fractionalWidth 。
像这样:
// MARK: - Group
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(124))
之后,我将组的宽度更改为绝对(宽度值)。 这修复了不需要的空间。
// MARK: - Group
let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(686), heightDimension: .absolute(120))
绝对和小数的解释可以在Apple 的文档中找到
注意:我这样计算总宽度值:
(numberOfCells * 单元格宽度) + ((numberOfCells - 1) * interSpacingValue)
我这样修复它,但我想知道是否有更清洁的方法:
private func makeHorizontalSection(environment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection {
// Calculations
let size = CGSize(width: 100, height: 120)
let insets: CGFloat = 23
let itemSpacing: CGFloat = 4
let availableWidth = environment.container.effectiveContentSize.width - 2 * insets
let itemAndSpaceWidth = size.width + itemSpacing
let numberOfColumns = floor(availableWidth / itemAndSpaceWidth)
let groupWidth: CGFloat = numberOfColumns * itemAndSpaceWidth
// Item
let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(size.width), heightDimension: .fractionalHeight(1))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
// Group
let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(groupWidth), heightDimension: .absolute(size.height))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
group.interItemSpacing = .fixed(itemSpacing)
// Section
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous
section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: insets, bottom: 0, trailing: insets)
return section
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.