0

I have a horizontal scrolling collectionView that I need to modify from dequeuing 1 type of cell, to two types of cell with two different fixed widths (both have the same height but one has a greater width).

I've modified my dataSource to dequeue two types of cells based on a check for the value of a certain property in our model (isLongDuration). currently the BigCell class does not have a different size and only has a different background color (black) than the RegularCell class and I can see that the right cells are being dequeued in the right places.

Here is a screenshot with the current state of the collectionView, the black cells will eventually be the wider ones

(N.B. Although the screenShot shows the cells alternating at a regular interval, there is no pattern, the cell being dequeue is based solely on the value of IsLongDuration for that particular item in the array. Also, pay no attention to the vertical red line as it is simply a static view that defines the middle of the collectionView)

Current collectionView

In early testing I have observed that giving the BigCell a greater width breaks the collectionView.

I've yet to find any online resource that deals with adjusting a UICompositionalLayout based on which cell is being dequeued from the datasource.

Listed bellow is my dataSource and CompositionalLayout code

Does anyone have any experience with such an issue?? Thanks! :)

private func configureDataSource() {
    
    dataSource = UICollectionViewDiffableDataSource<Int, MediaItem>(
      collectionView: collectionView) { [unowned self] collectionView, indexPath, media in  
          guard !media.isLongDuration else {
          let cell = collectionView.dequeueReusableCell(
            withReuseIdentifier: String(describing: BigCell.self),
            for: indexPath
          ) as! BigCell
        }
        
        let cell = collectionView.dequeueReusableCell(
          withReuseIdentifier: String(describing: RegularCell.self),
          for: indexPath
        ) as! RegularCell
       
        return configuredCellInTimeline(
          collectionView,
          for: cell,
          at: indexPath,
          with: media
        )
      }
 
    var snapshot = NSDiffableDataSourceSnapshot<Int, MediaItem>()
    snapshot.appendSections([0])
    dataSource.apply(snapshot, animatingDifferences: false)
}
private lazy var collectionViewLayout: UICollectionViewLayout = {
    let configuration = UICollectionViewCompositionalLayoutConfiguration()
    configuration.scrollDirection = .horizontal
    
    let layout = UICollectionViewCompositionalLayout(
      sectionProvider: { sectionIndex, environment -> NSCollectionLayoutSection? in
        let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(95),
                                              heightDimension: .absolute(170))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(100),
                                               heightDimension: .absolute(100))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                       subitems: [item])
        
        let section = NSCollectionLayoutSection(group: group)
        
        return section
      },
      configuration: configuration
    )
    
    return layout
}()
burnsi
  • 6,194
  • 13
  • 17
  • 27
Shyne
  • 1
  • 2
  • No -- UICollectionViewCompositionalLayout is not ready for wide use, yet. You're better off sticking with UICollectionViewFlowLayout until Apple updates the SDK to fix this and some other issues affecting variable sized cells. –  Jan 24 '23 at 20:12
  • Yes, I ended up using a UICollectionViewFlowLayout and managed to get it working! thanks! – Shyne Feb 03 '23 at 20:52

0 Answers0