集合視圖單元格組合布局之間不需要的空間

Question

我正在為場景使用集合視圖。 我創建了一個自定義組合布局，如下所示。 但是，在滾動時，單元格的第二部分之間存在不需要的空間。 它發生在不同的細胞類型中。 我檢查了間距或插圖，但我無法弄清楚原因。

組成布局部分：

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

想要的結果：

當前結果：初始 state 滾動 state

編輯：通常我在集合視圖中還有兩個部分。 為了使示例更清晰，我修剪了這些部分。 但是邏輯與給定示例相同。

Answer 1

過了一會兒，我意識到問題與布局組的寬度大小有關。

在我發布的初始版本中，在組合布局組屬性中，我在組大小中使用了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)

Answer 2

我這樣修復它，但我想知道是否有更清潔的方法：

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
}