UICollectionView在滚动时重新加载错误的图像

Question

在下面的代码中,我从文本文件下载图像URL,将其存储在NSMutableArray中,然后从CellforItemAtIndexPath中的这些URL下载图像.但是,当我向上和向下滚动片刻时,错误的图像位于错误的位置.它纠正了一秒钟,但我想摆脱滚动问题.这是代码:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"Cell2";

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    AsyncImageView *recipeImageView = (AsyncImageView *)[cell viewWithTag:100];
    UILabel *titleView = (UILabel *)[cell viewWithTag:101];
    titleView.numberOfLines = 3;
    UIImageView *overlay = (UIImageView *)[cell viewWithTag:111];
    FXBlurView *blurView = (FXBlurView *)[cell viewWithTag:110];
    blurView.tintColor = [UIColor colorWithRed:51.0 green:51.0 blue:51.0 alpha:1];


    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
        hi = [self videoTitle];
        images = [self firstPhoto];
        // switch to a background thread and perform your expensive operation


        // switch back to the main thread to update your UI


        dispatch_async(dispatch_get_main_queue(), ^{
            NSString *imgSrc;

            NSString *url = images[indexPath.row];
            imgSrc = url;
            if (imgSrc != nil && [imgSrc length] != 0 ) {
                [recipeImageView setImageWithURL:[NSURL URLWithString:images[indexPath.row]] placeholderImage:[UIImage imageNamed:@"red.png"]];

            }
            else {
                NSLog(@"noimage");
                recipeImageView.image = [UIImage imageNamed:@"red.png"];
            }
            titleView.text = hi[indexPath.row];


        });
    });

    return cell;


    // recipeImageView.image = [UIImage imageNamed:[videoList objectAtIndex:indexPath.row]];

}

有任何想法吗？谢谢.

Answer 1

我不确定是什么AsyncImageView,所以首先让我回答你的问题,好像它是UIImageView:

在你的回调块中(当你回到主队列时),你指的是recipeImageView.但是,如果用户在下载期间滚动,则该cell对象已被重用.

一旦你在回调的时候,你必须假设所有引用到的意见(cell,recipeImageView,blurView,等等都指向了错误的事情.你需要找到使用你的数据模型的正确意见.

一种常见的方法是使用NSIndexPath查找单元格:

UICollectionViewCell *correctCell = [collectionView cellForItemAtIndexPath:indexPath]:
UIImageView *correctRecipeImageView = (UIImageView *)[correctCell viewWithTag:100];
/* Update your image now… */

请注意,这只有indexPath在始终保证指向相同内容的情况下才有效 - 如果用户可以插入/删除行,那么您也需要找出正确的indexPath,因为它也可能已更改:

NSIndexPath *correctIndexPath  = /* Use your data model to find the correct index path */
UICollectionViewCell *correctCell = [collectionView cellForItemAtIndexPath:correctIndexPath]:
UIImageView *correctRecipeImageView = (UIImageView *)[correctCell viewWithTag:100];
/* Update your image now… */

也就是说,如果AsyncImageView是其他一些应该为你处理所有这些的类,那么你可以调用setImageWithURL: placeholderImage:主线程,它应该代表你处理所有的异步加载.如果没有,我想推荐SDWebImage库,它可以:https://github.com/rs/SDWebImage

Answer 2

我注意到一堆没有评论的反对票，再次阅读我的答案后，我想原来接受的答案（线下）可能会更好。

此类问题的发生有以下几种情况。UITableView 仅创建足够的 UITableViewCells 来显示视图中的每个单元格以及将滚动到视图中的内容。其他单元格在滚动到视图之外后将被重新使用。

这意味着当您快速滚动时，单元格会多次设置以异步获取图像，然后显示它，因为获取图像的速度非常慢。图像加载后，它将显示在最初调用以获取它的单元格上，但该单元格可能已被重复使用。

现在我有一个 bufferedImage: UIImage? 我用作 UITableViewCells 数据的任何数据类的属性。这最初总是为零，所以我异步获取图像，当dispatch_async返回时，它将把它存储在那里，所以下次我需要显示这个单元格时，它已经准备好了，如果它仍然是同一个单元格，我也会在单元格中显示它。

所以正确的做法是：

• 开始使用您的数据对象配置单元格
• 将数据对象存储在单元格中，以便稍后引用
• 检查数据对象是否已经在 bufferedImage 中设置了图像，如果是，则显示它，仅此而已
• 如果还没有图像，请将当前图像重置为空或占位符，然后开始在后台下载图像
• 当异步调用返回时，将图像存储在 bufferedImage 属性中
• 检查当前单元格中存储的对象是否仍然是您为其获取图像的同一对象（这非常重要），如果不是，则不执行任何操作
• 如果您仍在同一个单元格中，则显示图像

因此，您可以在异步调用中传递一个对象，以便可以存储获取的图像。您可以将当前单元格中的另一个对象进行比较。通常，在获取图像之前单元格就已被重用，因此下载图像时这些对象会有所不同。

滚动和旋转 CollectionView 总是有点问题。我总是遇到同样的问题，图像出现在错误的单元格中。CollectionView 正在进行某种优化，该优化会影响图像但不会影响标签。对我来说这是一个错误，但在三个 iOS 版本发布后仍然没有解决。

您需要执行以下操作：

https://developer.apple.com/library/ios/documentation/uikit/reference/UICollectionViewLayout_class/Reference/Reference.html#//apple_ref/occ/instm/UICollectionViewLayout/shouldInvalidateLayoutForBoundsChange：

基本上应该始终返回 YES 以始终刷新它。如果这解决了您的问题，那么您可以考虑不要每次都执行整个重绘，因为这对性能不利。我个人花了很多时间来计算屏幕是否通过或线路是否通过等等，但它变得口吃，所以我最终只返回“是”。YMMV。