Collection View reusable cell issue while scrolling

Question

I am using the collection view to show the gif's on the list. Now facing the cell reusable issue while scrolling the cells up or down of collection view.

Like itemA is on first place in the list and itemB is on the second place in the list. but when I scroll the data in the collection view. the places of items got misplaced. like some time itemA gone on 5th place or sometimes anywhere in the list. i know i think this is the use with reusable cell, but don't know how to salve this. Plss help.

Collection view cellForItemAt

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "GifCell", for: indexPath as IndexPath) as? GifCell else {
        fatalError()
    }

    if gifArr.count > 0 {

        let urlString = self.gifArr[indexPath.row]
        let url = URL(string: urlString)!

        DispatchQueue.global().async {
            let imageData = try? Data(contentsOf: url)
            let imageData3 = FLAnimatedImage(animatedGIFData: imageData) // this is the 3rd pary library to show the gifs on UIimageview's
            DispatchQueue.main.async {
                cell.imageView.animatedImage = imageData3
                cell.textLabel.text = String(indexPath.row)
            }
        }
    }
    return cell
}

Does this answer your question? [UICollection Cells are mixed in swift](https://stackoverflow.com/questions/58184741/uicollection-cells-are-mixed-in-swift) — Rohan Bhale, Feb 10 '20 at 11:25

Ahmad F · Answer 1 · 2020-02-10T11:24:41.360

In GifCell you could implement prepareForReuse() method:

Performs any clean up necessary to prepare the view for use again.

override func prepareForReuse() {
    super.prepareForReuse()
    imageView.animatedImage = nil
    textLabel.text = ""
}

Note: at this point, each time cellForItemAt method gets called, the url will be reloaded, so later, you might want find a way to cache the images instead of keep reloading them.

Hamed · Answer 2 · 2020-02-10T20:06:23.177

First solution: You can cache data and every time check if there is, use your cache. you can use this link, but replace UIImage with gift type!

or try this, I did not test it

if let giftAny = UserDefaults.standard.value(forKey: "giftUrl") {
  //cast giftAny to Data
  // use cached gift
} else {
  // cache gift
  let giftData = try? Data(contentsOf: url)
  UserDefaults.standard.setValue(giftData, forKeyPath: "giftUrl")
  //use gift
}

Second Solution: Don't reuse cell

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = UICollectionViewCell(style: .default, reuseIdentifier:"Cell")
        return cell
    }

but in this case, if you have many cells, memory leak is unavoidable.

What is the type of `FLAnimatedImage(animatedGIFData: imageData)`? — Hamed, Feb 10 '20 at 19:53

Collection View reusable cell issue while scrolling

2 Answers2