Asynchronous loading of image in UICollectionViewCell causes labels to disappear - ios

Question

I’m working on a photo gallery app that consists essentially of a navigation controller on to which is loaded instances of a collection view. Each of the collection view cells contains a UIImageView, and a label for the name of the image. The cells load the images in asynchronously.
This all works fine the first time each of the collection views are loaded, but if you step back to a previous collection view and forward again the labels disappear.
I think it must have something to do with loading the images asynchronously, as if I remove the image load the labels are fine, have the correct text and don’t disappear.
I’m not sure where I’m going wrong with the image loading...
The various components are:
Images are loaded using this extension method:
extension UIImageView {
public func imageFromServerURL(url: URL) {
if ImageData.realPhotoCache.keys.contains(url.absoluteString){
self.image = ImageData.realPhotoCache[url.absoluteString];
}else{
URLSession.shared.dataTask(with: url, completionHandler: { (data, response, error) -> Void in
if error != nil {
print(error)
return
}
DispatchQueue.main.async(execute: { () -> Void in
let image = UIImage(data: data!)
ImageData.realPhotoCache[url.absoluteString] = image;
self.image = image
})
}).resume()
}
}}
And the cells for the collection view are contucted like this:
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
var cell: UICollectionViewCell;
cell = collectionView.dequeueReusableCell(withReuseIdentifier: photoCellReuseIdentifier, for: indexPath);
let imageProvider = self.imageProviderForIndexPath(indexPath: indexPath);
(cell as! tsPhotoCollectionViewCell).photoView.imageFromServerURL(url: imageProvider.GetThumbImageUrl());
(cell as! tsPhotoCollectionViewCell).titleLabel.text = imageProvider.GetImageTitle()!;
return cell
}
with the collection view being reset when it is returned to like so:
func reset(){
photoProviders = [ImageDataProvider]();
self.collectionView?.reloadSections(IndexSet(integer: 0))
startLoad()
}
override func viewWillAppear(_ animated: Bool) {
if(hasNavigatedAway){
hasNavigatedAway = false;
self.reset();
}
}
The first load of a collection will generally be fine (cells in green, labels in red):
https://imgur.com/g3p03yF
but on naving away and coming back to a collection view, the labels are gone:
https://imgur.com/If2FQZS
The labels also seem to come and go with scrolling sometimes. I've tried everything I can think of, but haven't had any luck..

Answer 1

Judging by your screenshots, it seems like UILabels are getting their heights compressed to 0 by expanded UIImageViews. Try increasing UILabel's vertical content compression resistance priority, say, to 1000, so that it becomes non-compressible (and, in turn, makes auto layout engine compress either UIImageView or spacings - depends on your constraints).