Flickering issue with UICollectionView while reloading

Question

I'm developing an application where the user clicks on a menu item and the tableView should scroll according to the selected item.

But the problem is collectionView flicks a little bit while reloading.

Here I'm getting the visible section.

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
if let firstVisibleIndexPath = self.tblRestaurantFeed.indexPathsForVisibleRows?[0]{
    self.tableViewVisibleSection = firstVisibleIndexPath.section
}}

When the variable is updating the I'm reloading the collectionview and using scroll to item

var tableViewVisibleSection:Int = 0{
didSet{
        UIView.animate(withDuration: 0.15, animations: {
            self.collectionView.reloadData()
        })
        let visibleIndexPaths = collectionView.indexPathsForVisibleItems
        let itemIndex = IndexPath(item: self.selectedTag, section: 0)
        if(!visibleIndexPaths.contains(itemIndex)){
            UIView.performWithoutAnimation {
                self.collectionView.scrollToItem(at: IndexPath(item: self.selectedTag, section: 0), at: .centeredHorizontally, animated: true)
            }
        }
}}

Any help will be appreciated.

The top grey colour background is collection view with blue colour selected item, and where the "Description" is showing this is the section header of tableview — Ranjan kumar Sahu, Jan 21 '21 at 16:07
did you check this [answer](https://stackoverflow.com/a/65833528/4061501)? — Lal Krishna, Jan 24 '21 at 07:24

Mircea Dragota · Answer 1 · 2021-01-21T13:58:37.567

1

I think the problem is that you are calling .reloadData() from an animation block. Please try the code below and let me know if it works.

var tableViewVisibleSection: Int = 0 {
didSet {
        let visibleIndexPaths = collectionView.indexPathsForVisibleItems
        let itemIndex = IndexPath(item: self.selectedTag, section: 0)
        if(!visibleIndexPaths.contains(itemIndex)){
                self.collectionView.scrollToItem(at: IndexPath(item: self.selectedTag, section: 0), at: .centeredHorizontally, animated: false)
        }
}}

edited Jan 21 '21 at 13:58

answered Jan 21 '21 at 13:42

Mircea Dragota

644
7
17

Facing same issue after removed the animation block. – Ranjan kumar Sahu Jan 21 '21 at 13:51
@RanjankumarSahu Try using didSelectItemAtIndexPath instead of willDisplay cell. – Mircea Dragota Jan 21 '21 at 13:56
@RanjankumarSahu try now without the **.reloadData()** call. Using the updated code. – Mircea Dragota Jan 21 '21 at 13:59
How to select the collection view item . here is the cellForItemAt indexPath: code `btnTag.isSelected = (indexPath.row == self.selectedTag) btnTag.layer.cornerRadius = btnTag.frame.height / 2 btnTag.backgroundColor = btnTag.isSelected ? .blue : .clear` – Ranjan kumar Sahu Jan 21 '21 at 16:18

score 0 · Answer 2 · answered Jan 21 '21 at 18:21

Try below one.

var currentMenu: Int = 0

override func viewDidLoad() {
        ...
        
        collectionView.selectItem(at: IndexPath(item: currentMenu, section: 0), animated: true, scrollPosition: [])
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        currentMenu = indexPath.row
        tableView.scrollToRow(at: IndexPath(item: 0, section: currentMenu), at: .top, animated: true)
        collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally)
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        guard let indexPath = tableView.indexPathsForVisibleRows?.first, abs(indexPath.section - currentMenu) == 1, scrollView.isDragging else { return }
        currentMenu = indexPath.section
        collectionView.selectItem(at: IndexPath(item: currentMenu, section: 0), animated: true, scrollPosition: .centeredHorizontally)
    }
}

Flickering issue with UICollectionView while reloading

2 Answers2