How to implement UICollectionViewDelegateFlowlayout's sizeForItemAtIndexPath with Async images? - ios

Question

I'm trying to implement UICollectionViewDelegateFlowlayout's sizeForItemAtIndexPath similar to this tutorial: http://www.raywenderlich.com/78550/beginning-ios-collection-views-swift-part-1
The problem I have is that my photos are downloaded via an async call on the web, so when sizeForItemAtItemPath is called, my images haven't loaded yet. In other words, the code below crashes on imageArray. How can I delay the method until my images are loaded? I've also tried using a hardcoded with and height value if no images are available, but then I only return those hardcoded values, i.e. sizeForItemAtIdexPath doesn't seem to get called again after the images are loaded.
func pinImageForIndexPath(indexPath: NSIndexPath) -> UIImage {
return imageArray[indexPath.row]
}
}
extension PinCollectionViewController : UICollectionViewDelegateFlowLayout {
//1
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let pinImage = pinImageForIndexPath(indexPath)
//2
if var size = pinImage.size as? CGSize {
size.width += 10
size.height += 10
return size
}
return CGSize(width: 100, height: 100)
}
//3
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAtIndex section: Int) -> UIEdgeInsets {
return sectionInsets
}
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! PinCollectionViewCell
cell.pinImage?.pin_updateWithProgress = true
cell.pinImage?.image = nil
var actInd: UIActivityIndicatorView = UIActivityIndicatorView()
actInd.frame = cell.pinImage.bounds
actInd.hidesWhenStopped = true
actInd.activityIndicatorViewStyle =
UIActivityIndicatorViewStyle.Gray
cell.addSubview(actInd)
actInd.startAnimating()
if let pinImageURL = self.pins[indexPath.row].largestImage().url {
cell.pinImage?.pin_setImageFromURL(pinImageURL, completion: ({ (result : PINRemoteImageManagerResult) -> Void in
actInd.stopAnimating()
if let image = result.image {
self.imageArray.append(image)
}
self.collectionView?.reloadItemsAtIndexPaths([indexPath])
}))
}
return cell
}

Answer 1

Indeed, you should return some hardcoded values until you haven't loaded image. Strictly saying, you should display some predefined placeholder for not yet loaded image.
When your image get loaded (when async download operation successfully completes), you should call -reloadItemsAtIndexPaths: on collection view with index path's of those cells, images for which are available.