0

I have collectionview with multiple section and vertical scrolling. Each have only one item.

Screen flow is like below:

  • I call an api which provides me feedId and url for to fetch section data.

  • When user scrolls collectionview api gets called for section whichever section is currently visible on screen.

  • Inside each collectionview cell (or section) there is another collectionview with grid layout which renders grid image like below

enter image description here

Outer Collectionview

I am using Diffable datasource with compositional layout and while applying the snapshot the code is like below.

if #available(iOS 15.0, *) {
     updateSnapshot.reconfigureItems([item])
} else {
     updateSnapshot.reloadItems([item])
                // Fallback on earlier versions
}

if #available(iOS 15.0, *) {
    dataSource.applySnapshotUsingReloadData(updateSnapshot)
} else {
  dataSource.apply(updateSnapshot, animatingDifferences: false, completion: nil)
                // Fallback on earlier versions
}

Inner collectionview code is like below

var dataSource = RxCollectionViewSectionedReloadDataSource<SectionModel<String, GlobalGalleryViewModel>> {[] (ds, cv, indexPath, vm) -> UICollectionViewCell in
    let cell = cv.dequeueReusableCell(withReuseIdentifier: GlobalGalleryCell.className, for: indexPath) as! GlobalGalleryCell
    cell.configureCell(vm)
    return cell
}

Issue

When I scroll the outer collectionview there is lots of glitches and flickering when inner gallery renders on outer collectionview cell.

Layout code for Outer collectionview

  let parentItemSize = NSCollectionLayoutSize(
          widthDimension: .fractionalWidth(1.0),
          heightDimension:feedInterface.isHaveActualFeed ? .estimated(height) : .fractionalHeight(1)
        )
  let largeItem = NSCollectionLayoutItem(layoutSize: parentItemSize)         
  largeItem.contentInsets = NSDirectionalEdgeInsets(top: parentInset, leading: parentInset, bottom: parentInset, trailing: parentInset)
        
        // Outer Group
  let outerGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension:.estimated(height))
  let outerGroup = NSCollectionLayoutGroup.vertical(layoutSize: outerGroupSize, subitems: [largeItem])

Also added the cell prefetching like this

func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) {
    self.updateVisibleCellRemotely(indexPaths)
    
    if let lastIndexPath = indexPaths.last,
       lastIndexPath.section == (self.feeds.count - 1),
       self.feeds.count > 0 {
        self.viewModel.fetchBottomFeedData()
    }///load more vertical or main feed or parent feed
}

Any solution will be appreciated.

Mohammed Hussain
  • 176
  • 2
  • 13
  • I guess it means that your code is not fast enough to render smoothly. To me, multiple collection views inside another collection view sounds like an overkill. Have you tried flattening your hierarchy to have just one collection view and calculating each cell size and position individually, according to some algorithm that matches the expected outcome? Judging from the screenshot, it seems this approach might fit your needs: https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/layouts/customizing_collection_view_layouts – lazarevzubov Feb 22 '22 at 07:28
  • Additionally, if you use heavy image processing or stuff like that, you can consider cells prefetching techniques described here: https://developer.apple.com/documentation/uikit/uicollectionviewdatasourceprefetching/prefetching_collection_view_data – lazarevzubov Feb 22 '22 at 07:28
  • I have update my answer. @lazarevzubov there is not multiple collectionview inside cell only one collectionview with different layout. – Mohammed Hussain Feb 22 '22 at 07:50
  • My second comment, though, is still valid. Have you profiled your scrolling behavior? If it's just a performance problem, profiling will reveal you most heavy methods and you'll know what to optimize. – lazarevzubov Feb 22 '22 at 10:09
  • @lazarevzubov if i use stackview for image collage not uicollectionview inside cell will it work? – Mohammed Hussain Feb 23 '22 at 09:30
  • It's hard to say, if it will solve your problem, because we don't know yet, what slows down your layout code. I'd start with profiling it. But, if there's no other problems, stack views should work. – lazarevzubov Feb 23 '22 at 09:41

0 Answers0