具有水平或正交的UICollectionViewCompositionalLayout在屏幕边缘附近具有不一致的项目间距

编程问答 2022-06-10

问题描述

我的构图布局有以下布局

func createLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewCompositionalLayout {
        (sectionIndex: Int,layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in

        let dayItemSize = NSCollectionLayoutSize(widthDimension: .absolute(74),heightDimension: .fractionalHeight(1))
        // 2. Setup media group
        let dayItem = NSCollectionLayoutItem(layoutSize: dayItemSize)
        let dayGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),heightDimension: .fractionalHeight(1.0))
        let dayGroup = NSCollectionLayoutGroup.horizontal(layoutSize: dayGroupSize,subitems: [dayItem])
        let interitemSpacing = CGFloat(10)
        dayGroup.interItemSpacing = .fixed(interitemSpacing)
        let section = NSCollectionLayoutSection(group: dayGroup)
        section.orthogonalScrollingBehavior = .continuous
        return section
    }
    return layout
}

然后我的collectionView中有30个“ day”项目。

  fileprivate func makeDataSource() -> DataSource {
        let dataSource = DataSource(
            collectionView: collectionView,cellProvider: { (collectionView,indexPath,YearMonthDay) ->
              UICollectionViewCell? in
                let cell = collectionView.dequeueReusableCell(withReuseIdentifier: TimelineDayCell.identifier,for: indexPath) as? TimelineDayCell
                cell?.configure(with: YearMonthDay)
                cell?.dayLabel.text = String(indexPath.section)+","+String(indexPath.row)
                return cell
            })
        return dataSource
    }
    func configureDataSource() {
        self.collectionView!.register(TimelineDayCell.nib,forCellWithReuseIdentifier: TimelineDayCell.identifier)
    }
    func applySnapshot(animatingDifferences: Bool = true) {
      // 2
      var snapshot = DataSourceSnapshot()
        snapshot.appendSections([.main])
        snapshot.appendItems(days) # 30 of these
      dataSource.apply(snapshot,animatingDifferences: animatingDifferences)
    }

我的UIcollectionViewController覆盖了屏幕的整个宽度。屏幕上的我的单元格看起来像这样：

enter image description here

enter image description here

enter image description here

enter image description here

单元格上的文本是它们的索引路径。您可以看到0-4、5-9之间的间距是均匀的，然后在边缘4-5和9-10上间距是不同的。我相信这是因为它是屏幕之间的“边缘”。但是我该怎么办？

我还尝试了不使用正交滚动行为，而只是设置布局配置的滚动方向

   let config = UICollectionViewCompositionalLayoutConfiguration()
   config.scrollDirection = .horizontal
   layout.configuration = config
   return layout

似乎实现了同一件事。这里有什么建议吗？

编辑：似乎此行为基于组的大小。例如，当我使用let dayGroup = NSCollectionLayoutGroup.horizo​​ntal（layoutSize：dayGroupSize，subitem：dayItem，count：30）时，它会使所有项目彼此相邻，就像这样：

enter image description here

现在有30个单独的项目。请注意，它是如何自动隔开它们之间的距离的，以便可以将30调整为1的屏幕宽度。因此，它仍然试图将1组中的所有项目强制进入一个屏幕，这是我不希望的行为。我希望该组是整个内容大小的宽度并且可滚动。

解决方法

好，我解决了。这与组大小有关。我有let dayGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),heightDimension: .fractionalHeight(1.0))

项目间的间距在组项目之间。组的大小就是我的窗口大小。因此，我需要将组大小设置为整个内容的大小（例如，比窗口大）。

diffabledatasourceiosiosuicollectionviewuicollectionviewuicollectionviewcompositionallayout