UICollectionViewController 在滚动时重新加载图像

Question

我正在使用 ParseFramework 获取一些图像并将它们显示在 collectionViewController 中。问题是，如果我在加载所有图像之前滚动，我会遇到图像重复，所以我会在不同的单元格中找到相同的图像。以下是可能对您有所帮助的代码片段。

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

以及执行查询的方法：

-(void) queryParseMethod{

    PFQuery *query = [PFQuery queryWithClassName:@"Allimages"];
    [query findObjectsInBackgroundWithBlock:^(NSArray * objects, NSError *error) {
        if(!error){
            self.imageFilesArray = [[NSArray alloc] initWithArray:objects];
            [self.collectionView reloadData];
        }
    }];
}

这是在ExampleCell.h

 @property (weak, nonatomic) IBOutlet UIImageView *parseImage;

这是在ExampleCell.m

 @synthesize parseImage;

在故事板中，我将单元格的标识符设置为 imageCell。

我考虑了下面的答案，所以我修改了我的方法：

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

}

但我仍然遇到同样的问题。我做错了什么？

Answer 1

我认为你有重复的图像，因为一些单元格被重复使用了。

当一个单元格不再可见时，它会被放入一个队列中，可以重新使用它来显示新的单元格。该单元格仍然保留对其图像的引用。

所以当你出列一个单元格时，你应该从清除它之前的图像开始：

- (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

经过大量调查，我发现问题出在 getDataInBackground 中。因此，由于 getData 在不混淆图像及其索引方面对我来说工作正常，因此我决定同时使用 getData 和 getDataInBackground达到我的目的。我使用 getDataInBackground 从 PFFile 中获取数据，但没有在单元格中显示它。当数据可用时，我将使用 getData 检索它。

这是 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;

现在肯定有一个缺点。除非用户正在滚动，否则图像将不会加载，因此将再次调用该方法，因此 getData。

所以我不得不在 ViewDidLoad 中添加一个计时器：

  [NSTimer scheduledTimerWithTimeInterval:5.0f
                                 target:self selector:@selector(reloadData) userInfo:nil repeats:YES];

以及函数：

-(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];

}

我必须做所有这些，因为一个简单的 [self.collectionView reloadData] 会使视图每 5 秒闪烁一次。

UICollectionViewController 在滚动时重新加载图像

UICollectionViewController reloads images on scroll

ios

parse-platform

uicollectionview