iPhone - 异步图像仅在滚动时显示

Question

我一直在这个问题上撞墙并四处寻找无济于事的解决方案：

我从网络上提取了大量数据，我正在使用 Loren Brichter 的 ABTableViewCell 通过在每个单元格的 contentView 内绘制所有内容来使其平稳运行，以避免 UILabel 和 UIImageViews 减慢滚动速度。

这非常适合显示文本，但我遇到了图像问题，因为下载它们需要时间。一旦下载了相应的图像，我似乎无法找到一种方法来强制显示的每个单元格的 contentView 重新绘制自身。我必须指出我不是在绘制标签和图像视图，而只是为了节省内存而绘制 contentView。

现在表格的行为如下：

• 加载：显示文本，无图像
• 向上或向下滚动：最终图像 一旦单元格移出屏幕就会显示

一个示例项目是here

代码：

ABTableViewCell.h

@interface ABTableViewCell : UITableViewCell
{
    UIView *contentView;
}

ABTableViewCell.m

- (void)setNeedsDisplay
{
    [contentView setNeedsDisplay];
    [super setNeedsDisplay];

}

- (void)drawContentView:(CGRect)r
{
    // subclasses implement this
}

TableCellLayout.h

#import "ABTableViewCell.h"

@interface TableCellLayout : ABTableViewCell {

}

@property (nonatomic, copy) UIImage *cellImage;
@property (nonatomic, copy) NSString *cellName;

TableCellLayout.m

#import "TableCellLayout.h"

@implementation TableCellLayout

@synthesize cellImage, cellName;

- (void)setCellName:(NSString *)s
{
    cellName = [s copy];
    [self setNeedsDisplay];
}

- (void)setCellImage:(UIImage *)s
{
    cellImage = [s copy];
    [self setNeedsDisplay];
}

- (void)drawContentView:(CGRect)r
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextFillRect(context, r);

    [cellImage drawAtPoint:p];
    [cellName drawAtPoint:p withFont:cellFont];
}

TableViewController.m

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    TableCellLayout *cell = (TableCellLayout *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(cell == nil)
    {
        cell = [[TableCellLayout alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    cell.cellName = [[array valueForKey:@"name"] objectAtIndex:indexPath.row];
    cell.cellImage = [UIImage imageNamed:@"placeholder.png"]; // add a placeholder    

    NSString *imageURL = [[array valueForKey:@"imageLink"] objectAtIndex:indexPath.row];
    NSURL *theURL = [NSURL URLWithString:imageURL];

    if (asynchronousImageLoader == nil){
        asynchronousImageLoader = [[AsynchronousImages alloc] init];
    }
       [asynchronousImageLoader loadImageFromURL:theURL];

        cell.cellImage = asynchronousImageLoader.image;

return cell;
}

这是图像准备好后 AsynchronousImageLoader 调用的最后一个方法：

- (void)setupImage:(UIImage*)thumbnail {
    self.image = thumbnail;
        [self setNeedsLayout];

}

我只需要正确的方法来告诉我的可见单元格在下载行的图像后重新绘制自己。我想我应该在最终方法（setupImage）中添加一些东西——但我似乎无法让它按应有的方式工作。想法？非常感谢！

最终编辑：解决方案

没错，正如所怀疑的那样，问题在于调用完成后，没有告知可见单元格重绘并更新为下载的图像。

我使用以下答案提供的帮助来制定一个适合我需求的解决方案：

在异步图片下载器调用的final方法中添加回调：

AsyncImageView.m

 - (void)setupImage:(UIImage*)thumbnail {

      self.cellImage = thumbnail;
[cell setNeedsDisplay];

}

注意：我还在图像下载器类的初始化中设置了一个本地占位符图像，只是为了美化一点。

然后在我的 cellForRowAtIndexPath 中：

NSURL *theURL = [NSURL URLWithString:imageURL];

AsyncImageView *aSync = [[AsyncImageView alloc] initWithFrame:CGRectMake(0, 0, 20, cell.bounds.size.height)];

[aSync loadImageFromURL:theURL];
cell.cellImageView = aSync;

return cell;

可能还有一两个其他调整，但这些是这里的主要问题。再次感谢 SO 社区！

Answer 1

确保您在主线程中更新单元格图像。 UI 更新仅在此处完成后才会显示，这就是为什么您只能在触摸和滚动时看到更新的原因。

if(cell) {

    dispatch_async(dispatch_get_main_queue(), ^{

        cell.cellImage = thumbnail;
        [cell setNeedsDisplay];

    });

}

[编辑]

您需要将单元格作为图像加载器的代理并拥有异步重绘机制。

......
    AsynchronousImages *asynchronousImageLoader = [[AsynchronousImages alloc] init];
    asynchronousImageLoader.delegate = cell;
    [asynchronousImageLoader loadImageFromURL:theURL];

    return cell;
}

并将委托回调代码放在单元实现中。

- (void)setupImage:(UIImage*)thumbnail {

      self.cellImage = thumbnail;

}

Answer 2

您可以使用 Apple TableView 延迟加载。他们有异步下载图像的示例代码。见下方链接

Apple LazyTableImages

在 AsynchronousImages 类中，您可以添加一个属性 NSIndexPath 并且 AsynchronousImages 上的委托应该更改。请看下面的代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    TableCellLayout *cell = (TableCellLayout *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(cell == nil)
    {
        cell = [[TableCellLayout alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    cell.cellName = [[array valueForKey:@"name"] objectAtIndex:indexPath.row];
    cell.cellImage = [UIImage imageNamed:@"placeholder.png"]; // add a placeholder    

    NSString *imageURL = [[array valueForKey:@"imageLink"] objectAtIndex:indexPath.row];
    NSURL *theURL = [NSURL URLWithString:imageURL];


    AsynchronousImages *asynchronousImageLoader = [[AsynchronousImages alloc] init];
    asynchronousImageLoader.indexPath = indexPath;
    [asynchronousImageLoader loadImageFromURL:theURL];
    return cell;
}

//Delegate should be
- (void)setupImage:(UIImage*)thumbnail index:(NSIndexPath*) indePath {
    TableCellLayout *cell = (TableCellLayout *) [tableView cellForRowAtIndexPath:indexPath];
    if(cell) {
      cell.cellImage = thumbnail;
      [cell setNeedsDisplay];
    }
}

Answer 3

验证 UIImage 的创建和 UIImageView 的图像属性的设置发生在主线程上。没有理由设置图像视图的图像不应该使其 rect 可见。

如果您正在重复使用单元格，请确认您的加载已正确取消。

Answer 4

使用AsyncImageView 代替uiimageview

Answer 5

您可以将您的 tableView 告诉 reloadData... 或者更精细的重新加载：

  [self.tableView reloadRowsAtIndexPaths:self.tableView.indexPathsForVisibleRows withRowAnimation:UITableViewRowAnimationNone];

编辑添加（查看 OP 的源代码后）：

我查看了您的项目，问题出在您的架构上。你在滥用AsyncImageView，因为你只是用它来异步加载你的图像——而它的设计目的是同时加载、和显示图像。这就是为什么它没有“回调”功能来让您知道何时检索到数据。

您最好将CellLayout 的图像属性替换为 UIImageView 属性。 （请注意，UIImageView 在绘图方面比image drawAtPoint 更有效）。

所以：

1. 将CellLayout 类更改为使用UIImageView 属性而不是UIImage
2. 更改您的 cellForRowAtIndexPath 以将 AsyncImageView 设置为直接在您的 Cell 上的属性。

如果您想支持占位符，则应将其添加到您的 AsyncImageView 类中 - 以便它知道在下载内容时要显示什么。

cellForRowAtIndexPath：

NSURL *theURL = [NSURL URLWithString:imageURL];

AsyncImageView *aSync = [[AsyncImageView alloc] initWithFrame:CGRectMake(0, 0, 20, cell.bounds.size.height)];

[aSync loadImageFromURL:theURL];
cell.cellImageView = aSync;

return cell;

CellLayout.h

@property (nonatomic, strong) UIImageView *cellImageView;

CellLayout.m

- (void)setCellImageView:(UIImageView *)s
{
    [cellImageView removeFromSuperview];
    cellImageView = s;
    [self addSubview:cellImageView];
}