Make sure you have JSON Framework installed first.

This is a continuation of Click a Cell

So there has been some requests to do this. If you want to display a image in a custom cell it is pretty easy. It is about the same as doing the title and the URL to the image we did before. This will take over where click a cell left off. So you can grab the source code from there and start.

So we will be placing a UIImageView on the right part of the cell. To make it easy, we will still keep the title and the URL in the cell. So the first thing you want to do is open up ImageCell.h and we need to add the references to the new UIImageView we will use. I have commented the two lines I have added in this file

@interface ImageCell : UITableViewCell {
    UILabel *titleLabel;
    UILabel *urlLabel;
    NSInteger *itemID;
    UIImageView *imageView; // added this
}

// these are the functions we will create in the .m file

-(void)setData:(NSDictionary *)dict;
-(NSInteger)getID;

-(UILabel *)newLabelWithPrimaryColor:(UIColor *)primaryColor selectedColor:(UIColor *)selectedColor fontSize:(CGFloat)fontSize bold:(BOOL)bold;

@property (nonatomic, retain) UILabel *titleLabel;
@property (nonatomic, retain) UILabel *urlLabel;
@property (nonatomic, assign) NSInteger *itemID;
@property (nonatomic, retain) UIImageView *imageView;  // added this

@end

Now we want to create a temporary image. When doing a webservice application it is key to “die” gracefully. For example if the service is alive put the image is not there, we want to show a no picture image so something is displayed. So I am using the following image (nopic-small.png).

Save this image and then drag it into your project so Xcode knows you are using this image.

Ok now lets init the UIImageView, so open up ImageCell.m and we need to synethsize our new image object.

@synthesize imageView;

Now look for the initWithFrame method. You want to add in the following

UIImage *noPicImageSmall = [[UIImage imageNamed:@"nopic-small.png"] retain];

self.imageView = [[UIImageView alloc] initWithImage:noPicImageSmall];
[myContentView addSubview:self.imageView];
[self.imageView release];

So the above code we are creating a new UIImage that contains the our no-pic image. Then we init our image view with the contents of our no-pic UIImage. We then add it to the sub-view and release the image.

So if we click build and go right now we should get something that looks like this

You will see the no-pic images are placed in the upper left corner of the cell and way too big, so lets draw them in the correct place and the correct size.

So no look for the layoutSubviews method and add in the following right below where we drew the titleLabel and urlLabel.

self.imageView.frame = CGRectMake(boundsX + 200, 5, 30, 30);

The boundsX + 200 is the spacing on the left

The 5 is the spacing from the top

The first 30 is the width of the view

The second 30 is the height of the view

You will notice in the line above that I switched from 2 lines of code to 1. This is actually better coding practices then above if you just need the CGRectMake once.

So if you click build and go now you will get something that looks like this

Now we need to populate that UIImageView with our image in the URL for the cell. We will do that in the setData method. So that should now look like

-(void)setData:(NSDictionary *)dict {
    self.titleLabel.text = [dict objectForKey:@"title"];
    self.urlLabel.text = [dict objectForKey:@"img"];
    self.itemID = (NSInteger)[dict objectForKey:@"id"];

    // setting up the imageView now
    self.imageView.image = [UIImage imageWithData: [NSData dataWithContentsOfURL: [NSURL URLWithString: [dict objectForKey:@"img"]]]];
}

So you can see we added in the self.imageView.image = line. We are setting it to a new UIImage and loading it with data from the contents of a URL. You have to pass in a NSURL object to that, I don’t think it will accept a string. Pretty much you turn the string into a URL object and tell UIImage to grab that.

Don’t forget to dealloc the image view

- (void)dealloc {
    // make sure you free the memory
    [titleLabel dealloc];
    [urlLabel dealloc];
    [imageView dealloc];
    [super dealloc];
}

Now when you click build and go, you will see the following

You can grab the source here.