Custom UITableViewCell - Asynchronous UIImage for UIImageView

I have created a custom UITableViewCell which is composed by 2 UILabels and a single UIImageView.

Data associated with cells is available with a NSObject class named CellInfo. CellInfo has 2 properties of NSString type and an UIImage property.

When I create a CellInfo instance, inside the initWithData method (CellInfo class), I do the following:

if(self = [super alloc])
  //initialize strings variables = aName;
  self.descritpion = aDescription;
  [self grabImage]    
return self;

where grabImage (within CellInfo class) using ASIHTTPrequest framework to grab images in asynchronous manner (in the following code NSURL is alaways the same but in reality it changes with data)

- (void)grabImage
   NSURL *url = [NSURL URLWithString:@""];
   __block ASIHTTPRequest *request = [ASIHTTPRequest requestWithURL:url];

   [request setCompletionBlock:^{               

      NSData *data = [request responseData];
      UIImage* img = [[UIImage alloc] initWithData:data];

      self.image = img;
      [img release];

      // Send a notification if image has been downloaded
      [[NSNotificationCenter defaultCenter] postNotificationName:@"imageupdated" object:self];
   [request setFailedBlock:^{
      NSError *error = [request error];
     // Set default image to self.image property of CellInfo class
   [request startAsynchronous];

I have also a UITableViewController that loads data into the custom cell like the following:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    // Do stuff here...

    // Configure the cell...
    ((CustomTableViewCell*)cell).nameOutlet.text = ((CellInfo*) [self.infoArray objectAtIndex:indexPath.row]).name;
    ((CustomTableViewCell*)cell).descriptionOutlet.text = ((CellInfo*) [self.infoArray objectAtIndex:indexPath.row]).descritpion;
    ((CustomTableViewCell*)cell).imageViewOutlet.image = ((CellInfo*) [self.infoArray objectAtIndex:indexPath.row]).image;

    return cell;

In addiction, this UITableViewController observes notification from the CellInfo class because, at start up, images for visible cells are not displayed. This is the method that is called when the notification is captured:

- (void)imageUpdated:(NSNotification *)notif {

    CellInfo * cInfo = [notif object];
    int row = [self.infoArray indexOfObject:cInfo];
    NSIndexPath * indexPath = [NSIndexPath indexPathForRow:row inSection:0];

    NSLog(@"Image for row %d updated!", row);

    [self.tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath]  withRowAnimation:UITableViewRowAnimationNone];

The code works well, but I would like to know if I'm doing right or there is a better way to do this. My doubt is the following: is it correct to save downloaded images within each CellInfo instance or is it possible to follow another way to cache images using, for example, cache policy provided by ASIHTTPRequest?

P.S. grabImage is not called if the image for a specific CellInfo instance has already been downloaded.


I believe that's pretty neat. Instead of that you might subclass UIImageView class and create an initializer like [AsyncUIImageView initWithURL:] and then put that ASIHttpRequest logic inside the view.

After it finishes loading the picture, there could be two ways:

  1. It can call [self setNeedsDisplay] (an UIView method) so image view is redrawn.

  2. You can pass UITableViewCell or UITableView as a delegate to AsyncUIImgeView so that it could tell table view to reload that cell.

Need Your Help

Sound not working in iPhone Simulator?

iphone objective-c cocoa-touch audio ios-simulator

Somehow my iPhone Simulator is unable to play sounds. First an app I'm working on using AudioServicesPlaySystemSound() stopped working.. I spent a while debugging this but sound is still working o...

R YaleToolkit: How to change the font size of tick labels on the sparklines?

r data-visualization r-grid sparklines tufte

I'm using this function for some quick and easy sparklines with R but I can't seem to work out how to change the font size to avoid ugly overlaps of the y-axis tick labels. Here's my code (see belo...