CollectionView Button/Image and not refreshing in time issue - ios

Question

I have a collectionView with UICollectionViewFlowLayout with some reusability:
- (CategoryCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CategoryCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"CategoryCell" forIndexPath:indexPath];
[cell.actIn startAnimating];
cell.cellElementRepresentation = [self.localCategoriesObjects objectAtIndex:indexPath.row];
[cell tryToShow]; //this is a important method to my problem
return cell;
}
I commented for you tryToShow method. Becouse i think this is a problem. When i scroll to the not visible element in the list I could see "old" elemnts first then new element. Why is that? My tryToShow method is basically download manager. I try to describe it in comment. Here is the code:
-(void)tryToShow {
NSString* imageFile = self.linkToImageFileSavedOnDisk //This is my local file saved in documentsDirectory.
if([[NSFileManager defaultManager] fileExistsAtPath:imageFile]) {
[self.overlayButton setBackgroundImage:[UIImage imageWithContentsOfFile:imageFile] forState:UIControlStateNormal];
[self disableActIn]; //Here i stop and remove activity indicator.
} else {
// Here i fire NSURLConnection and try to download. When NSURLConnection finished i put image to overlayButton.
}
}
Here is delegate method:
-(void)connectionDidFinishLoading:(NSURLConnection *)connection {
//Here do some stuff to convert Data into UIImage... not important.
[self.overlayButton setBackgroundImage:object forState:UIControlStateNormal];
}
The overlayButton is a button on the UICollectionViewCell. I have a custom class for it.
I can't figure it out. How it's possible to image from indexPath.row (for example 1) is visible after scroll ? The image is replaced by new one right after new is successfully download, but this is to late.

Answer 1

As the OP mention, the problem seems to be that you are setting the backgroundImage too late. So I would try this modifications:
First, clear your cell before setting the new values. Since you are reusing the cell, the old values (text and images) will still be present in the cell subviews. Setting those values to nil will clear your cell.
Implement a mechanism to validate or invalidate the result from the image request, since could get the result too late, maybe is no longer needed. Worst, you can set an image no longer correspondent with your data. You should check, before setting a downloaded image, that this image is consistent with the current shown data.
Wait a little before start the image request If you have a large number of cells, you should think that when the user quickly scroll the collection, you can start lots of requests for images that may never be displayed. I would avoid this behavior by waiting a little before start a new request, and checking if the cell has been reused again.
Use the NSURLRequest and configure the cachePolicy attribute as NSURLRequestReturnCacheDataElseLoad. This will store the responses for the images, there is no need to save the images explicitly save the image and check it's existence.

Answer 2

I think you need to set the background image of self.overlayButton to nil in the else clause where you start the web request.
[self.overlayButton setBackgroundImage:nil forState:UIControlStateNormal];
That way the cell won't appear to have an image loaded already when the user scrolls to it. Or, if it's not loading quickly enough (which it should), you could possibly set the background image to nil in the collectionView:didEndDisplayingCell:forItemAtIndexPath: delegate method instead.
But a problem I see is that you will be creating duplicate NSURLConnection objects every time tryToShow is called, i.e., the user scrolls down then revisits the cells at the top.
As #lucaslt89 suggested, you could create a dictionary of cells instead of using the default dequeuing. If you do it this way, make sure you have a property for the URL connection object on the cell, and you check for it before starting a new one.
Or, you may want to create a dictionary of any NSURLConnection objects you create in the view controller, and move the web request code into the view controller. If a web request is needed, the view controller would check if there was already a web request running in the dictionary first. When the request is finished, the request object would be removed from the dictionary. This would be the desirable method because the cell isn't responsible for creating its own data. In UICollectionView the cells have to quickly change roles and it's not wise to associate a particular cell with some data unless there are really few cells.
Either way, you'll avoid creating multiple URL requests for the same image.
Hope this helps!