How can I download image in collection view and keep the image height in cell with Alamofireimage in Swift?

Question

I want to download images with Alamofire and refresh my collectionView to see the images with the correct height size. Something like the foursquare gallery:

My class is:

//
//  ViewController.swift
//  ImageList
//
//  Created by Dasoga on 4/7/16.
//  Copyright © 2016 Dasoga. All rights reserved.
//

import UIKit
import Alamofire
import AlamofireImage


class ViewController: UIViewController, UICollectionViewDelegate,     UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

@IBOutlet var myCollectionView: UICollectionView!

var images:[UIImage] = []
var imagesURL:[String] = ["http://www.apple.com/mx/ipod/home/images/social/og.jpg?201601060706", "http://images.apple.com/home/images/og.jpg?201604012321","http://www.impactony.com/wp-content/uploads/2014/08/Apple-logo1.jpg","http://store.storeimages.cdn-apple.com/4973/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6s/plus/iphone6s-plus-box-gray-2015_GEO_US?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=PS8m10"]
var ImageCache = [String:UIImage]()

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

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

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1
}

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return imagesURL.count
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = myCollectionView.dequeueReusableCellWithReuseIdentifier("myCell", forIndexPath: indexPath) as! ImageCollectionViewCell
    cell.backgroundColor = UIColor.blueColor()
    cell.imageViewCell.image = UIImage(named: "placeholderImage")
    cell.imageViewCell.contentMode = UIViewContentMode.ScaleToFill
    //Download image
    let dishName = imagesURL[indexPath.row]
    if let dishImage = ImageCache[dishName] {
        cell.imageViewCell.image = dishImage
    }
    else {
        let url = imagesURL[indexPath.row]
        Alamofire.request(.GET, url)
            .responseImage { response in
                //debugPrint(response)
                debugPrint(response.result)

                if let image = response.result.value {
                    print("image downloaded: \(image)")

                    // Store the commit date in to our cache
                    self.ImageCache[dishName] = image

                    // Update the cell
                    dispatch_async(dispatch_get_main_queue(), {
                        if let cellToUpdate = self.myCollectionView.cellForItemAtIndexPath(indexPath) as? ImageCollectionViewCell{
                            cellToUpdate.imageViewCell.image = image
                            self.images.append(image)
                        }
                    })

                }else{
                    print("error getting image at cell")
                }
        }
    }
    return cell
}

}

Example of foursquare:

I'm getting this:

Thanks!!

Edited:

I added this line:

  self.myCollectionView.collectionViewLayout.invalidateLayout()

After:

  // Update the cell
   dispatch_async(dispatch_get_main_queue(), {
                        if let cellToUpdate = self.myCollectionView.cellForItemAtIndexPath(indexPath) as? ImageCollectionViewCell{
                            cellToUpdate.imageViewCell.image = image
                            self.images.append(image)
                            self.myCollectionView.collectionViewLayout.invalidateLayout()
                        }
                    })

And call this method:

    func collectionView(collectionView: UICollectionView,layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize{
    let dishName = imagesURL[indexPath.row]
    if let dishImage = ImageCache[dishName] {
        print("found image")
        return CGSizeMake(dishImage.size.width,dishImage.size.height)
    }else{
        return CGSizeMake(200,200)
    }

}

Answer 1

Try to implement the UICollectionViewDelegateFlowLayout protocol, which is used to customize the size of the cells, and use this function:

func collectionView(collectionView: UICollectionView,layout collectionViewLayout: UICollectionViewLayout,
          sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize{
    let dishName = imagesURL[indexPath.row]
        if let dishImage = ImageCache[dishName] {
            return CGSizeMake(dishImage.frame.width,dishImage.frame.height)
        }

    }

This code will set both width and height of the cell as those of the image, if you want to use a different width you need to change the width in the CGSizeMake object.