Swift Images place in wrong cell and keep chaging in UICollectionview - swift

Question

I have searched but I was not successful to find the answer to my question, I am downloading images from internet and put them into collection view but when I scroll the places are changing even without scrolling they places on the wrong cell here is my code :
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
var Label = cell.viewWithTag(2) as! UILabel
Label.text = namesArray[indexPath.row]
var image = cell.viewWithTag(1) as! UIImageView
let URLString = imgLink[indexPath.row]
let imgUrl = URL(string: URLString)
image.downloadedFrom(url: imgUrl!, contentMode: UIViewContentMode.scaleAspectFit)
UIimg.insert(image.image!, at: indexPath.row)
return cell
}
public extension UIImageView {
func downloadedFrom(url: URL, contentMode mode: UIViewContentMode = .scaleAspectFit) {
contentMode = mode
URLSession.shared.dataTask(with: url) { (data, response, error) in
guard
let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
let data = data, error == nil,
let image = UIImage(data: data)
else { return }
DispatchQueue.main.async() { () -> Void in
self.image = image
}
}.resume()
}
func downloadedFrom(link: String, contentMode mode: UIViewContentMode = .scaleAspectFit) {
guard let url = URL(string: link) else { return }
downloadedFrom(url: url, contentMode: mode)
}
}
UPDATE:
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
var image1 = cell.viewWithTag(1) as! UIImageView
let URLString = imgLink[indexPath.row]
let imgUrl = URL(string: URLString)
var Label = cell.viewWithTag(2) as! UILabel
Label.text = namesArray[indexPath.row]
getImage(urlString: URLString) { (success:Bool, data:NSData?, errorDescription:String?) in
if success {
DispatchQueue.main.async() {
let image = UIImage(data: data! as Data)
image1.image = image
}
}
}
return cell
}
func getImage(urlString:String, completionHandler:#escaping (_ success:Bool, _ data:NSData?, _ errorDescription:String?) -> Void) -> Void {
let url = NSURL(string: urlString)
let request = NSMutableURLRequest(url: url! as URL)
let session = URLSession.shared
let task = session.dataTask(with: request as URLRequest) { (data, response, error) in
guard let data = data, error == nil else {
completionHandler(false,nil, error?.localizedDescription)
return
}
completionHandler(true, data as NSData?, nil)
}
task.resume()
}

Answer 1

This function is an asynchronous function which will take some time to complete
image.downloadedFrom(url: imgUrl!, contentMode: UIViewContentMode.scaleAspectFit)
So this line..
UIimg.insert(image.image!, at: indexPath.row)
Will run before the above function call has finished downloading the image. This will be causing your issue.
Your downloadedFrom function should use a completion handler to run some code after the image has downloaded for it to work properly.
I usually use a function like the one below for fetching images
func getImage(urlString:String, completionHandler:(success:Bool, data:NSData?, errorDescription:String?) -> Void) -> Void {
let url = NSURL(string: urlString)
let request = NSMutableURLRequest(URL: url!)
let task = session.dataTaskWithRequest(request) { (data, response, error) in
guard let data = data where error == nil else {
completionHandler(success: false,data: nil, errorDescription: error?.localizedDescription)
return
}
completionHandler(success: true, data: data, errorDescription: nil)
}
task.resume()
}
Which can be used in a tableCell/collectionCell like this:
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let photo = fetchedResultsController.objectAtIndexPath(indexPath) as! Photo
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! AlbumCell
cell.backgroundColor = UIColor.grayColor()
cell.imageView.image = UIImage(named: "placeholder")
if let image = photo.image {
cell.imageView.image = image
} else {
VTClient.sharedInstance().getImage(photo.url) { (success:Bool, data:NSData?, errorDescription:String?) in
if success {
dispatch_async(dispatch_get_main_queue()) {
let image = UIImage(data: data!)
cell.imageView.image = image
FlickrClient.Caches.imageCache.storeImage(image, withIdentifier: photo.id)
}
}
}
}
return cell
}
}
See my project here https://github.com/martinjkelly/virtual-tourist/blob/master/Virtual Tourist for more information on how this is used