UIImageView in a custom cell

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.

About mike
Currently works for OpenSky as a Senior Linux Admin. He has a wonderful wife Thanuja and 2 great dogs. His major side project is Photoblog.

Comments

17 Responses to “UIImageView in a custom cell”
  1. Turbolag says:

    Awesome tutorial, explains everything I wanted to know! I couldn’t find this anywhere else, and I’m too lazy to teach myself.

    I want to support your work, do you have any apps on the AppStore?

  2. mikezupan says:

    @Turbolag

    great that it helped.

    Right now I do not have anything in the appstore.. Nothing I am planning to make I will charge for.

    The app I am working on is for Photoblog (http://www.photoblog.com) which I do all the development for.

  3. Brook says:

    Hey,

    I just wanted to say THANK YOU! Great tutorial!

    I’m just dinking around with making an iphone app as more of a hobby than anything else and this is exactly the type of thing I’ve been looking for!

  4. jesse says:

    I’m not sure why you did this:

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

    Why not call release ? why dealloc directly ?

  5. akh says:

    Hi

    dealloc here make my program to crash, is this:

    [titleLabel release];
    [urlLabel release];
    [imageView release];

  6. moe says:

    I get this solution, but I am trying to use the image as a background image so that the label is in the foreground. Any ideas how to do this?

  7. moe says:

    Figured it out, here is the link to the site where I got my tip:
    http://markmail.org/message/pqfiytuo2yvjmj3p

  8. bob says:

    Great tutorial. 2 questions.

    1. What if you want to make the title label “dynamic” in height (for a longer title) and have it wrap to multiple lines? Then you want to make the URL label move accordingly as well.

    2. What if there is no image?

    It seems that with all of this code that it is not very flexible because it is in “chunks” and we are drawing a frame independently of known whether there is an image, and whether the title is rather large.

  9. idev says:

    Hi

    Am reviving an old post but I have been facing an issue and thought someone could help me. I have about 50 cells worth of data, each having some text and an image. Reusing cells makes it necessary that each image be loaded every time a cell is displayed. I want to have something like the Facebook app when an image is loaded only when the cell is visible and once loaded, it should not be reloaded even if the cells moves out of view and comes back in the view. Any tips? Thanks.

  10. mikezupan says:

    @idev

    You need to set a unique id for each row you create

    static NSString *MyIdentifier = @”MyIdentifier”;

    that needs to be unique.. append the row number to it or something.. that is what I have done

  11. idev says:

    Hi Mike

    This approach would defeat the purpose of using reusable tableview cells and shoot up the memory.

  12. anoop says:

    Nice tutorial…… I am experimenting on it….will ask u if I have any doubts :) ….please continue adding new tutorials…..

  13. Anthony Main says:

    Great selection of tutorials have been very useful during my development

    Just wondered. How can I apply a custom view to the non-populated cells?

    E.g I have a background image in my custom cell and therefore need it to be used in all the cells without data because they are currently all white

    Also how do you stop the selected cell being blue? I have used the setselected to change my background but cant tell if its working or not

    Thanks

  14. Justin says:

    Please help. Great post, but I am stuck on the string for the URL. If the string is dynamic, the data is not getting returned. But if I make it static, then it is able to get the image. Thoughts?

    Dynamic
    NSString *strGraphPath = [[NSString alloc] initWithFormat:@”http://example.com/graph%@.jpg”,info.sessionID];

    Static
    NSString *strGraphPath = [[NSString alloc] initWithFormat:@”http://example.com/graph1456″];

    Please advise. Thanks very much for your time.

Trackbacks

Check out what others are saying about this post...
  1. [...] can check out the following UIImageView in a custom cell | Iphone Noob There is also an entry to create a custom cell, but there is source there to look at. I am doing [...]

  2. [...] This is a continuation of UIImageView in a custom cell [...]

  3. [...] This is a continuation of UIImageView in a custom cell [...]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!