Images are saved when reloaded in the collection view cell in quick

Question

I am new to Swift and I wanted to upload Instagram images using the Instagram API. I succeeded, but when I scroll down in the simulator, the images continue to overload and change positions. What am I missing?

Here is my code:

PhotosViewController.swift:

 import UIKit
 import OAuthSwift

 class PhotosViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    //var array:[String] = []
    var photos:NSArray = []

    var accessToken:NSString!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        //array = ["Treehouse"]
        self.title = "InstaManage"

        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.itemSize = CGSizeMake(106.0, 106.0)
        layout.minimumInteritemSpacing = 1.0
        layout.minimumLineSpacing = 1.0

        collectionView?.collectionViewLayout = layout


        collectionView!.backgroundColor = UIColor.whiteColor()

        let userDefaults: NSUserDefaults = NSUserDefaults.standardUserDefaults()
        self.accessToken = userDefaults.stringForKey("accessToken")
        let oauthswift = OAuth2Swift(
            consumerKey:    "abcde",
            consumerSecret: "jafkaffjafkl",
            authorizeUrl:   "https://api.instagram.com/oauth/authorize",
            responseType:   "token"
        )

        if (self.accessToken == nil) {
            oauthswift.authorizeWithCallbackURL(NSURL(string: "authcheck://auth/instagram")!, scope: "public_content", state: "INSTAGRAM", success: { (credential, response, parameters) -> Void in

                print(credential.oauth_token)
                self.accessToken = credential.oauth_token
                userDefaults.setObject(self.accessToken, forKey: "accessToken")
                userDefaults.synchronize()
                },
                failure: { error in
                    print(error.localizedDescription)
                }

            )

        } else {
            self.downloader()
        }
}

func downloader() {
    let config:NSURLSessionConfiguration = NSURLSessionConfiguration.defaultSessionConfiguration()
    let session:NSURLSession = NSURLSession(configuration: config)
    let urlString: NSString = NSString(string: "https://api.instagram.com/v1/users/self/media/recent/?access_token=\(self.accessToken)")
    let url:NSURL = NSURL(string: urlString as String)!
    let request:NSURLRequest = NSURLRequest(URL: url)
    let task = session.downloadTaskWithRequest(request) { (location, response, error) -> Void in


        let data:NSData = NSData(contentsOfURL: location!)!
        do {

            let responseDictionary:NSDictionary = try NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers) as! NSDictionary
            //print(responseDictionary)
            self.photos = responseDictionary.valueForKeyPath("data") as! NSArray

            dispatch_async(dispatch_get_main_queue(), { () -> Void in
                self.collectionView?.reloadData()
            })

            //print(self.photos)
        } catch {
            print(error)
        }
    }


    task.resume()

}




    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


// MARK: UICollectionViewDataSource

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    // #warning Incomplete implementation, return the number of sections
    return 1
}


override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of items
    return self.photos.count
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! PhotosViewCell

    cell.backgroundColor = UIColor.brownColor()

    //cell.imageView!.image = UIImage(named: array[0])
    //let photo = photos[indexPath.row]
    //let url1 = photo.valueForKeyPath("images.standard_resolution.url") as! String
    //cell.url1 = url1

    cell.photo = self.photos[indexPath.row] as! NSDictionary
    cell.url1 = (cell.photo.valueForKeyPath("images.standard_resolution.url"))! as! String
    //print(cell.url1)
    // Configure the cell

    return cell
}

PhotosViewCell.swift:

 import UIKit

 class PhotosViewCell: UICollectionViewCell {

@IBOutlet weak var imageView: UIImageView!
var url1:String = "" {
    didSet {
        let url:NSURL = NSURL(string: url1)!
        //print(url)
        downloadFromUrl(url)
    }
}

var photo:NSDictionary = NSDictionary()

override func layoutSubviews() {
    self.imageView?.frame = self.contentView.bounds
}


func downloadFromUrl(url: NSURL) {
    let config:NSURLSessionConfiguration = NSURLSessionConfiguration.defaultSessionConfiguration()
    let session:NSURLSession = NSURLSession(configuration: config)
    let request:NSURLRequest = NSURLRequest(URL: url)
    let task = session.downloadTaskWithRequest(request) { (location, response, error) -> Void in


        let data:NSData = NSData(contentsOfURL: location!)!
        let image:UIImage = UIImage(data: data)!

        dispatch_async(dispatch_get_main_queue(), { () -> Void in
            self.imageView.image = image
        })
    }


    task.resume()


}

}

Answer 1

The problem is that each cell will appear on the screen, it will call a method downloadFromUrl, you should cache the downloaded images and not try to load them every time.

Answer 2

. , Collection View , , . , prepareForReuse . , URL, :

override func prepareForReuse() {
    super.prepareForReuse()
    imageView = nil
    photo = nil
}