How do I verify the contents returned from a queue match the UITableView cell they were intended for?

Question

I'm new to iOS development and this is my first question on stackoverflow even though I come here a lot. Thanks for such a great resource!

I'm taking the Stanford CS193P course and having trouble with "assignment 5 extra credit 1".
I have a UITableView that displays title, subtitle, and a thumbnail. I queue up the thumbnail fetch but need to verify the table cell hasn't been recycled when the thumbnail image comes back.

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

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

    NSDictionary *imageDescription = [self.photoList objectAtIndex:indexPath.row];
    NSString *expectedPhotoID = [imageDescription objectForKey:FLICKR_PHOTO_ID];

    // Configure the cell...

    cell.imageView.image = [UIImage imageNamed:@"placeholder.png"];

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        UIImage *imageThumb = [self imageForCell:imageDescription];
        [NSThread sleepUntilDate:[NSDate dateWithTimeIntervalSinceNow:2]]; // simulate 2 sec latency

        dispatch_async(dispatch_get_main_queue(), ^{
            NSString *photoID = [imageDescription objectForKey:FLICKR_PHOTO_ID];
            if ([expectedPhotoID isEqualToString:photoID]) {
                cell.imageView.image = imageThumb;
            } else {
                NSLog(@"cellForRowAtIndexPath: Got image for recycled cell");
            }
        });
    });

  return cell;
}

In this code, photoID always matches expectedPhotoID. I'm assuming it's because the imageDescription pointer is used for both queues at the time they are created. I've tried using [self.photoList objectAtIndex:indexPath.row] directly (in place of imageDescription) but that didn't work either. It appears that too is resolved at the time the queues are created.

I'm missing some fundamental understanding here and appreciate your help.

Answer 1

A table view does not allocate table view cells for all rows. Instead, only cells for the visible rows (or a bit more) are allocated. If you scroll the table, some rows disappear and other appear. For the newly appearing rows, the table view tries to reuse the cells that are not needed anymore. (That is what dequeueReusableCellWithIdentifier: does.)

If you start an asynchronous task to retrieve the image for your cell, then the following can happen:

When the task has finished and your innermost block is executed, then the cell has been reused for a different row in the meantime! In that case, it would make no sense to assign the image to the cell.

Therefore, when you have your image, you must check that the cell is still at the same position as before. You could for example call [tableView indexPathForCell:cell] and compare the value with the original indexPath. If they are identical, the cell is still at the same position and you can assign the image. If not, you have to discard the image.

But that is only the most simple solution. A better solution would cache the images for all rows.

I can only recommend the WWDC 2012 Session 2011 "Building Concurrent User Interfaces on iOS". It covers this topic.