Loading images from web and displaying it in a collectionview - ios

Question

I am using UICollectionView to display a set of images. The images are loaded from web. I get the image URLs from an online JSON file. The images are in different sizes and i use a flowlayout to put the images together. The challenge here is that you won't know the exact size of the images until they are loaded. I use SDWebImage to download and cache the images. I use a boolean value to check which images are loaded. After each image is loaded, i tell the collectionview to reload the image at its corresponding indexpath. Now the problem is that the images do load properly but the cells are all messed up when i scroll the collectionview. Here is some code:
This is where i calculate the size of each cell:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(NHBalancedFlowLayout *)collectionViewLayout preferredSizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
if (didLoadImage == YES) {
return [loadedImage size];
}
else
{
return CGSizeMake(300, 140);
}
}
And here is where the images are loaded and set:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
GalleryCell *customCell = [collectionView
dequeueReusableCellWithReuseIdentifier:#"cell"
forIndexPath:indexPath];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:[galleryLargeLinks objectAtIndex:indexPath.row]]];
customCell.backgroundColor = [UIColor blackColor];
[customCell.imageView setImageWithURLRequest:request placeholderImage:[UIImage imageNamed:#"placeholder"] success:^(NSURLRequest *request, NSHTTPURLResponse *response,UIImage *image)
{
loadedImage = image;
didLoadImage = YES;
[customCell.imageView setImage:image];
[collectionView reloadItemsAtIndexPaths:[NSArray arrayWithObject:indexPath]];
} failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error)
{
NSLog(#"fail");
[activityIndicator stopAnimating];
}];
return customCell;
}

Answer 1

UICollectionViewCell's are reused whenever they are scrolled off screen. And so since you are using an asynchronous block to load them, the cell may likely be assigned to another indexPath by the time it is ready to go. You can continue using the setImageWithURLRequest: if you'd like, however, you should add another check to see if the indexPath is still what you expect by the time it loads. Something like this:
[customCell setIndexPath:indexPath];
__weak GalleryCell *weakCell = cell;
__weak CollectionView *weakCollectionView = collectionView;
[customCell.imageView setImageWithURLRequest:request placeholderImage:[UIImage imageNamed:#"placeholder"] success:^(NSURLRequest *request, NSHTTPURLResponse *response,UIImage *image)
{
if([weakCell.indexpath isEqual:indexPath]){
[weakCell.imageView setImage:image];
[weakCollectionView reloadItemsAtIndexPaths:[NSArray arrayWithObject:indexPath]];
}
} failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error)
{
[activityIndicator stopAnimating];
}];
As for the collectionView:layout:preferredSizeForItemAtIndexPath:, you need to go about that check completely differently. One option could be to make your cached images key off your datasource, so you can just check the value in the datasource array and see if it's in the cache. If it is, grab the image, otherwise return a default value. That's too much code to write out, but basically you should be checking your datasource/cache and not just two random BOOL and UIImage variables that can change at anytime.