UICollectionViewController reloads images on scroll - ios

Question

I am using the ParseFramework to get some images and display them in a collectionViewController. The thing is, if I scroll before all images are loaded, I experience duplication of images, so I find the same image in different cells. Here’s the code snippets that could be useful for you to be able to help me.
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
ExampleCell *cell = (ExampleCell*)[collectionView dequeueReusableCellWithReuseIdentifier:#"imageCell" forIndexPath:indexPath];
PFObject * imageObject = [self.imageFilesArray objectAtIndex:indexPath.row];
PFFile * imageFile=[imageObject objectForKey:#"image"];
[imageFile getDataInBackgroundWithBlock:^(NSData *data, NSError *error) {
if(!error){
cell.parseImage.image=[UIImage imageWithData:data];
}
}];
return cell;
}
And the method that’s performing the query:
-(void) queryParseMethod{
PFQuery *query = [PFQuery queryWithClassName:#"Allimages"];
[query findObjectsInBackgroundWithBlock:^(NSArray * objects, NSError *error) {
if(!error){
self.imageFilesArray = [[NSArray alloc] initWithArray:objects];
[self.collectionView reloadData];
}
}];
}
This is in ExampleCell.h
#property (weak, nonatomic) IBOutlet UIImageView *parseImage;
This is in ExampleCell.m
#synthesize parseImage;
In the storyboard I am setting the identifier of the cell to imageCell.
I considered the answer below so I modified my method:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
ExampleCell *cell = (ExampleCell*)[collectionView dequeueReusableCellWithReuseIdentifier:#"imageCell" forIndexPath:indexPath];
if(cell==nil) // no queued cell to dequeue
{
cell = (ExampleCell *)[[UICollectionViewCell alloc] initWithFrame:CGRectMake(0,0,50,50)];
}
// clear any previous image if necessary
cell.parseImage.image = nil;
PFObject * imageObject = [self.imageFilesArray objectAtIndex:indexPath.row];
PFFile * imageFile=[imageObject objectForKey:#"image"];
[imageFile getDataInBackgroundWithBlock:^(NSData *data, NSError *error)
{
if(!error)
cell.parseImage.image=[UIImage imageWithData:data];
}];
return cell;
}
But I still have the same issue. What did I do wrong?

Answer 1

I think you have duplication of images because some cells are reused.
When a cell is no more visible, it is put in a queue where it can be reused for new cell to be displayed. The cell still keep a reference to its image.
So when you dequeue a cell, you should start by clearing its previous image:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
ExampleCell *cell = (ExampleCell*)[collectionView dequeueReusableCellWithReuseIdentifier:#"imageCell" forIndexPath:indexPath];
if( !cell ) // no queued cell to dequeue
{
// create a new cell to use
}
// clear any previous image if necessary
cell.parseImage.image = nil;
PFObject * imageObject = [self.imageFilesArray objectAtIndex:indexPath.row];
PFFile * imageFile=[imageObject objectForKey:#"image"];
[imageFile getDataInBackgroundWithBlock:^(NSData *data, NSError *error)
{
if(!error)
cell.parseImage.image=[UIImage imageWithData:data];
}];
return cell;
}

Answer 2

So after a lot of investigation I found out the the problem resides in the getDataInBackground..So since getData was working fine for me in terms of not confusing the images with their indexes, I decided to use both getData and getDataInBackground to reach my purpose. I used getDataInBackground to bring the data from PFFile but without displaying it in the cell. When the data is available I will retrieve it using getData.
Here’s the code inside cellForItemAtIndexPath:
//PFCell is the same as ExampleCell previously but of type PFCollectionViewCell
PFCell * cell = (PFCell*) [collectionView dequeueReusableCellWithReuseIdentifier:#"imageCell" forIndexPath:indexPath];
PFObject * imageObject = [self.imageFilesArray objectAtIndex:indexPath.row];
PFFile * imageFile=[imageObject objectForKey:#"image"];
cell.parseImage.image=nil;
//Getting the data from the PFFile placing it in memory
[imageFile getDataInBackgroundWithBlock:^(NSData *data, NSError *error)
{}];
dispatch_async(dispatch_get_main_queue(), ^{
//If the data is now available in memory
if(imageFile.isDataAvailable){
cell.parseImage.image=[UIImage imageWithData:[imageFile getData]];
cell.activityIndicator.hidden=YES;
}
//I added an activity Indicator in case there’s no image yet
else{
[cell.activityIndicator startAnimating];
cell.activityIndicator.hidden=NO;
}
});
return cell;
Now sure there’s a drawback for this. The images will not load unless the user is scrolling so the method will be called again and so the getData.
so I had to add a timer in ViewDidLoad:
[NSTimer scheduledTimerWithTimeInterval:5.0f
target:self selector:#selector(reloadData) userInfo:nil repeats:YES];
And the function:
-(void) reloadData{
NSArray * cellsToReload=[[NSArray alloc] init];
NSMutableArray * temp=[[NSMutableArray alloc] init];
for(int i=0;i<[[self.collectionView visibleCells] count];i++){
PFCell * cell=(PFCell*)[self.collectionView visibleCells][i];
if(cell.parseImage.image==nil){
[temp addObject:[self.collectionView indexPathForCell:cell]];
}
}
cellsToReload=[temp copy];
[self.collectionView reloadItemsAtIndexPaths:cellsToReload];
}
I had to do all this because a simple [self.collectionView reloadData] would flicker the view each 5 seconds.