why is my Collectionview cell.image is gone and messed up? - ios

Question

so In my collection view cell I have text and image: This is my code in CollectionViewLayout.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if let content = HomeCollectionViewController.posts[indexPath.item].content {
let spaceForPostContentLabel = NSString(string: content).boundingRect(with: CGSize(width: view.frame.width - 32, height: 120), options: NSStringDrawingOptions.usesFontLeading.union(NSStringDrawingOptions.usesLineFragmentOrigin), attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 15)], context: nil)
if HomeCollectionViewController.posts[indexPath.item].imageURL != nil {
return CGSize(width: view.frame.width, height: spaceForPostContentLabel.height + postImageViewOriginHeight + 168.0)
} else {
return CGSize(width: view.frame.width, height: spaceForPostContentLabel.height + 152.5)
}
} else {
return CGSize(width: view.frame.width, height: 408.5)
}
}
Everything is fine, when it first loaded. But when I scrolled down and scrolled up again, everything is messed up, image is gone and there is a huge blank space where the image should have been existed. Does this have to do with dequeReusableIdentifier?
Note: This error only happen for the first cell, other cell that has image works fine

Answer 1

That's probably happening due to how dequeue works. Even if you have 100 cells, there is a limit for cells loaded at the same time, so after this limit, you start reusing old cells as you scroll.
I already faced the same problem sometimes mainly when using images and the best approach that I found, was to use a cache to the images.
Below I'm posting an example using AlamofireImage to create the cache (but you can use the cache that you prefer, even the builtin cache provided by Swift's library.
import AlamofireImage
let imageCache = AutoPurgingImageCache()
class CustomImageView: UIImageView {
var imageUrlString: String?
func loadImageFromURL(_ urlString: String){
imageUrlString = urlString
let url = URL(string: urlString)
image = nil
if let imageFromCache = imageCache.image(withIdentifier: urlString) {
self.image = imageFromCache
return
}
URLSession.shared.dataTask(with: url!, completionHandler: { (data, response, error) in
if error != nil {
print(error)
return
}
DispatchQueue.main.async(execute: {
let imageToCache = UIImage(data: data!)
if self.imageUrlString == urlString {
self.image = imageToCache
}
imageCache.add(imageToCache!, withIdentifier: urlString)
})
}).resume()
}
}
Basically I'm creating a subclass of UIImageView and adding the image URL as the key to the image that I'm going to keep in the cache. Everytime that I try to load the image from the internet, I check if the image isn't already in the cache, if it is, I set the image to the image in the cache, if not, I load it from the internet asynchronously.