UICollectionViewCompositionalLayout with horizontal or orthogonalScrollingBehavior has inconsistent item spacing near edge of screen

Question

I have the following layout for my compositional layout

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
}

Then there are 30 "day" items in my collectionView.

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

My UIcollectionViewController covers the entire width of the screen. My cells in the screen look like this:

The text on the cells is their index path. You can see that between 0-4, 5-9 the spacing is uniform, then on the edges 4-5 and 9-10, its different. I believe this is because its the "edge" between screens. But what can I do about it?

I've also tried using no orthogonal scroll behavior and just setting the layout config's scroll direction

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

It seems to achieve the same thing. Any suggestions here?

EDIT: It seems that this behavior is based on the sizing of the group. For instance when I use let dayGroup = NSCollectionLayoutGroup.horizontal(layoutSize: dayGroupSize, subitem: dayItem, count: 30), it makes all of the items lie next to each other like so:

Now there are 30 separate items. Notice how it has auto-spaced the distance between them so that it can fit 30 into 1 screen width. Thus it is still trying to force all of the items in 1 group into a single screen which is the behavior I don't want. I want the group to be the width of the entire content size and to be scrollable.

Answer 1

Ok I solved it. It has to do with the group sizing. I had let dayGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),heightDimension: .fractionalHeight(1.0))

The inter-item spacing is between the group items. And the group size was the size of my window. So I need to make the group size the size of the entire content (bigger than the window for instance.