集合视图单元格之间不需要的空间组合布局答案

【问题标题】：Unwanted space between Collection View cells Compositional Layout集合视图单元格之间不需要的空间组合布局
【发布时间】：2022-07-05 18:10:43
【问题描述】：

我正在为场景使用集合视图。我创建了一个自定义组合布局，如下所示。但是，在滚动时，单元格的第二部分之间有一个不需要的空间。它发生在不同的细胞类型中。我检查了间距或插图，但找不到原因。

构图部分：

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

想要的结果：

当前结果：初始状态滚动状态

编辑：通常我在集合视图中还有两个部分。为了使示例更清晰，我修剪了这些部分。但逻辑与给定示例相同。

【问题讨论】：

你有一个 LOT 在那里进行。尝试从更简单的开始，并尝试让 one 部分正常工作。如果可行，请尝试添加另一个部分。如果你不能让一个部分工作，最好的办法是创建一个minimal reproducible example。使用非常简单的单元格布局和非常简单的数据，这样我们就可以看看发生了什么。
谢谢@DonMag。我尝试按照您的建议变得更简单，但无法弄清楚原因。我尝试制作更简单的代码供您查看。基本上，我为每个部分使用自定义的组合布局。但他们所有人的想法都是一样的。
我也有同样的问题。我在 IOS 15 中注意到这一点，我运行 ios 14 的设备没有此错误。不确定是什么原因造成的。如果我发现有什么不好的消息更新你，我会更深入地挖掘自己。
嗨@SpencerShelton，感谢您的评论。我解决了我的问题并将其发布为答案。您可以检查一下，也许它也会对您有所帮助。

标签： ios swift uicollectionview uikit uicollectionviewcompositionallayout

【解决方案1】：

过了一会儿，我意识到问题与布局group的width size有关。

在我发布的初始版本中，在组合布局组属性中，我在组大小中使用了 fractionalWidth。

像这样：

// MARK: - Group

let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(124))

之后，我将组的宽度更改为绝对（widthValue）。这修复了不需要的空间。

// MARK: - Group

let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(686), heightDimension: .absolute(120))

结果：最初的

滚动

绝对和小数的解释可以在Apple's documentation找到

注意：我这样计算总宽度值：

(numberOfCells * 单元格宽度) + ((numberOfCells - 1) * interSpacingValue)

【讨论】：