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.

I don't know if I'm missing something here, but you're calling `[imageDescription objectForKey:FLICKR_PHOTO_ID]` both times. In what possible scenario would these NOT be equal? :) Add some more detail about what you're trying to do. — Dustin, Aug 14 '12 at 17:12
Dustin, you are correct in the code I pasted. In my notes I mentioned I also used [self.photoList objectAtIndex:indexPath.row] instead of imageDescription. I had hoped the indexPath:row would be derived in the UI thread. Obviously not, it seems to be resolved when the queue is created. So...how do I put something in the main queue thread that compares the cell before the call with that after the fetch is complete? — Dan, Aug 14 '12 at 21:35

score 1 · Accepted Answer · answered Aug 14 '12 at 18:04

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.

Martin, Thanks for the reply. The recycled cells are the issue I am trying to address. I don't understand how your solution could work 100% of the time. Since an indexPath is "An index path locating a row in tableView", isn't there a chance I get the same row but wrong content? For example, say the image was for row 5. No matter how I scroll, there will always be a row 5 and I'm going to plug in the wrong image. — Dan, Aug 14 '12 at 21:28
I did try Martin's suggestion and it does work. Now, I'd like to understand this better. First, it appears that tableView numbers all rows uniquely. IOW, if my table shows 90 rows, IndexPath will have 90 row numbers. I somehow assumed the row numbers would recycle with the cells. IOW, if only 10 rows fit on the display, row numbers would go from 0-19, not 0-89. The other thing I'd like to confirm is the reason this works. Is it because the TableView message in the main-queue is using the cell passed in at the time my cellForRowAtIndexPath was called and not the last one that was called. — Dan, Aug 14 '12 at 22:15
@Dan if the answer answered your question, accept it. If you have another question, ask it. — Dustin, Aug 15 '12 at 01:47

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

1 Answers1