CODEWITHSUNDEEP
iosparse-platformuicollectionview
Edgard Jammal
Edgard Jammal

Reputation: 31

UICollectionViewController reloads images on scroll

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?

Upvotes: 2

Views: 751

Answers (2)

Edgard Jammal
Edgard Jammal

Reputation: 31

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.

Upvotes: 0

Nicolas Buquet
Nicolas Buquet

Reputation: 3955

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;
}

Upvotes: 1

Related Questions