1 year ago

#209497

test-img

Mohammed Hussain

Collectionview inside collectionview cell causes flickering while scroll

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.

ios

swift

rx-swift

collectionview

nsdiffabledatasourcesnapshot

0 Answers

Your Answer

Accepted video resources