Không đồng bộ UITableViewCell Tải hình ảnh bằng cách sử dụng GCD

Question

Tôi hiện đang cố gắng tải danh sách UITableView của Flickr Photo (cs193p iOS Stanford, bài tập 5). Để tránh sự kiện chặn giao diện người dùng, tôi đã hoãn tải xuống hình thu nhỏ của từng ô thành một hàng đợi khác (nhưng hãy cập nhật giao diện người dùng trở lại trong hàng đợi chính). Mã này không tải không đồng bộ các hình ảnh, mặc dù không thêm hình thu nhỏ khi tôi nhấp vào hàng UITableViewCell. (xem ảnh chụp màn hình bên dưới). Bất kỳ ý tưởng những gì tôi đang làm sai?

PS: Tôi đã xem xét một số câu hỏi về Stackoverflow khác & Ví dụ về LazyTableImages của Apple, nhưng tôi vẫn tin rằng đây là cách sạch nhất để đạt được kết quả mong muốn.

Cảm ơn!

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"Photo List Cell"; 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 

    // Configure the cell 
    NSDictionary *photo = [self.photoList objectAtIndex:indexPath.row]; 


    if (photo != nil) { 
     if ([[photo objectForKey:@"title"] length] > 0) { 
      cell.textLabel.text = [photo objectForKey:@"title"]; 
     } else if ([[[photo objectForKey:@"description"] objectForKey:@"_content"] length] > 0) { 
      cell.textLabel.text = [[photo objectForKey:@"description"] objectForKey:@"_content"]; 
     } else { 
      cell.textLabel.text = @"Unknown"; 
     } 
    } 
    cell.imageView.image = [[UIImage alloc] initWithCIImage:nil]; 

    // Fetch using GCD 
    dispatch_queue_t downloadThumbnailQueue = dispatch_queue_create("Get Photo Thumbnail", NULL); 
    dispatch_async(downloadThumbnailQueue, ^{ 
     UIImage *image = [self getTopPlacePhotoThumbnail:photo]; 
     dispatch_async(dispatch_get_main_queue(), ^{ 
      if ([self.tableView.visibleCells containsObject:cell]) { 
       [cell.imageView setImage:image]; 
      } 
     }); 
    }); 
    dispatch_release(downloadThumbnailQueue); 

    return cell; 
} 

Trước khi nhấp chuột vào một hàng

Sau khi chọn hàng

UPDATE: Đối với những người quan tâm, đây là mã cuối cùng tôi đã sử dụng:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"Photo List Cell"; 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 

    // Configure the cell 
    NSDictionary *photo = [self.photoList objectAtIndex:indexPath.row]; 

    if (photo != nil) { 
    if ([[photo objectForKey:@"title"] length] > 0) { 
     cell.textLabel.text = [photo objectForKey:@"title"]; 
    } else if ([[[photo objectForKey:@"description"] objectForKey:@"_content"] length] > 0) { 
     cell.textLabel.text = [[photo objectForKey:@"description"] objectForKey:@"_content"]; 
    } else { 
     cell.textLabel.text = @"Unknown"; 
    } 
    } 
    cell.imageView.image = [[UIImage alloc] initWithCIImage:nil]; 

    // Fetch using GCD 
    dispatch_queue_t downloadThumbnailQueue = dispatch_queue_create("Get Photo Thumbnail", NULL); 
    dispatch_async(downloadThumbnailQueue, ^{ 
    UIImage *image = [self getTopPlacePhotoThumbnail:photo]; 
    dispatch_async(dispatch_get_main_queue(), ^{ 
     UITableViewCell *cellToUpdate = [self.tableView cellForRowAtIndexPath:indexPath]; // create a copy of the cell to avoid keeping a strong pointer to "cell" since that one may have been reused by the time the block is ready to update it. 
     if (cellToUpdate != nil) { 
      [cellToUpdate.imageView setImage:image]; 
      [cellToUpdate setNeedsLayout]; 
     } 
    }); 
    }); 
    dispatch_release(downloadThumbnailQueue); 

    return cell; 
} 

Answer 1

Bạn nên gọi setNeedsLayout trên ô sau khi đặt hình thu nhỏ.

Từ Doc Apple:.

"Gọi phương pháp này vào chủ đề chính của ứng dụng của bạn khi bạn muốn điều chỉnh cách bố trí của subviews của view Phương pháp này làm cho một lưu ý của các yêu cầu và trả về ngay lập tức Bởi vì phương pháp này không. không bắt buộc cập nhật ngay lập tức, nhưng thay vì chờ chu kỳ cập nhật tiếp theo, bạn có thể sử dụng nó để vô hiệu hóa bố cục của nhiều chế độ xem trước khi bất kỳ lượt xem nào được cập nhật. Hành vi này cho phép bạn hợp nhất tất cả các cập nhật bố cục của mình thành một chu kỳ cập nhật, thường tốt hơn cho hiệu suất. "

Answer 2

Một giải pháp khác (và giải pháp mà tôi đã sử dụng cho bài tập đó) là gọi setNeedsDisplay trên imageView của ô khi bạn đã gán UIImage cho imageView đó.

Vì vậy, về cơ bản, tôi đã tạo một lớp có tên là FlickrDownloader bao bọc chức năng của FlickrFetcher (cũng như mã bộ nhớ đệm của tôi). FlickrDownloader có phương pháp này:

(void)getImageForPhotoInfo:(NSDictionary *)photoInfo ofFormat:(FlickrPhotoFormat)format withCallback:(image_setter_callback_t)callback; 

này về cơ bản là một cuộc gọi đến các chức năng tương tự của FlickrFetcher, nhưng nó cho biết thêm một thats callback được gọi khi kết thúc tải bức ảnh. Trong trường hợp cập nhật imageView của UITableViewCell, hàm gọi lại trông giống như sau:

image_setter_callback_t setImage = ^(UIImage *image){ 
    cell.imageView.image = image; 
    [cell.imageView setNeedsDisplay]; 
};