Custom UITableViewCell Using Interface Builder
Hey everyone, welcome to my first of many screencasts coming in the next few weeks. Today I am going to show you how to layout a UITableViewCell in Interface Builder and have a UITableView populate with those type of cells. I am adopting a new structure for my screencasts which will be 5 or so mintues of keynote slides giving background info followed by 20 – 25 mintues of step by step development. The entire video will be directly below this paragraph, but scrolling down you will see a text based step by step of the whole tutorial as well. Hope you guys enjoy.
Skill Level MEDIUM
Here is a link to the screencast to watch. We are working on getting an embedded version in, but I figure this is basically just as functional. Have fun!
Custom UITableViewCell Screencast Video
Source Code
Available Here
Background Information
Building The App
Step 1
This step shouldn’t require any extra information.
Step 2
Step 3
In CustomTableCellTutorialViewController.m you must define the two required UITableViewDataSource methods. These methods will fill up the table view with data. For now we will put in dummy data just to make sure all of our connections are working.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @”Cell”;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil){
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
Advertisement
}
[cell setText:[NSString stringWithFormat:@"I am cell %d", indexPath.row]];
return cell;
}
Step 4
Here you will need to be in xCode and go to File -> New File…
Select Objective C Class and make sure it is a UITableViewCell subclass, depending on your version of the SDK selecting this will differ. Look around and you will find it, call it iCodeBlogCustomCell. With this done enter these IBOutlets in the iCodeBlogCustomCell.h file enter the following IBOutlets:
IBOutlet UILabel *articleName;
IBOutlet UILabel *authorName;
IBOutlet UILabel *date;
IBOutlet UIImageView *imageView;
IBOutlet UIView *viewForBackground;
Add the @property and synthesize them in the main.
Step 5
This step does not require and code but does require a lot of work in Interface Builder. I highly recommend you watch the screencast to see the step by step procedure here. Essentially what I do is create a new View XIB file. Opening this, I delete the standard UIView in the XIB and drag a UITableViewCell from my library into my document window. I assign the UITableViewCell to be of type iCodeBlogCustomCell. With this done layout the interface with the proper elements and hook them up by right clicking on the UITableViewCell in the document window.
Step 6
This is where the real magic is. We are going to return to CustomTableCellTutorialViewController.m and edit the UITableViewDataSource methods we implemented earlier. The code I use has me putting in 4 separate PNG files that I add to my project. You can find your own to put inside the cells. Make sure the UIImageView inside the cell is set for Aspect Fit so you don’t have to worry about resizing the images. The functions should be changed to be:
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 100;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @”iCodeBlogCustomCell”;
iCodeBlogCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil){
NSLog(@”New Cell Made”);
NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@”iCodeBlogCustomCell” owner:nil options:nil];
for(id currentObject in topLevelObjects)
{
if([currentObject isKindOfClass:[iCodeBlogCustomCell class]])
{
cell = (iCodeBlogCustomCell *)currentObject;
break;
}
}
}
if(indexPath.row % 4 == 0)
{
[[cell authorName] setText:@”Collin Ruffenach”];
[[cell articleName] setText:@”Test Article 1″];
[[cell date] setText:@”May 5th, 2009″];
[[cell imageView] setImage:[UIImage imageNamed:@"1.png"]];
}
else if(indexPath.row % 4 == 1)
{
[[cell authorName] setText:@”Steve Jobs”];
[[cell articleName] setText:@”Why iPhone will rule the world”];
[[cell date] setText:@”May 5th, 2010″];
[[cell imageView] setImage:[UIImage imageNamed:@"2.png"]];
}
else if(indexPath.row % 4 == 2)
{
[[cell authorName] setText:@”The Woz”];
[[cell articleName] setText:@”Why I’m coming back to Apple”];
[[cell date] setText:@”May 5th, 2012″];
[[cell imageView] setImage:[UIImage imageNamed:@"3.png"]];
}
else if(indexPath.row % 4 == 3)
{
[[cell authorName] setText:@”Aaron Hillegass”];
[[cell articleName] setText:@”Cocoa: A Brief Introduction”];
[[cell date] setText:@”May 5th, 2004″];
[[cell imageView] setImage:[UIImage imageNamed:@"4.png"]];
}
return cell;
}
The End
So that is it for my first new post. I will be doing many more. Let me know your thoughts on this format in the comments. If you see anything organization wise that you think should be changed/add/removed let me know. Good Luck!
- Posted by Collin on 24 May 2009 in Interface Builder, Uncategorized, iPhone Articles, iPhone Programming Tutorials, iphone, objective-c
- Digg |
- Del.icio.us |
- Stumble |
- 61 Comments »
61 Responses
praveenm Says:
May 25th, 2009 at 3:49 am
Hi,
Please let me know why we need to create separate xib for iCodeBlogCustomCell.
Thanks
PalTeknoBlog Says:
May 25th, 2009 at 4:29 am
thanks man, great work,
i have a question here that i searched many days and can not find a good answer, if i used xml feed ” like youtube ” for example, i can get all things works fine using indexPath.row, but problem that i want to add thumbnail to my UITableViewCell , i can set local imaage by using if methode, but i want to get image from xml file, i hope that u can u help me.
RoberRM Says:
May 25th, 2009 at 5:25 am
I just wanted to thank you for taking your time to create such a great tutorial. You just made my life a little bit easier. 
Thank you! 
rakesh Says:
May 25th, 2009 at 6:33 am
Hi,
i tried doing same thing,but i am gettings following error.Can you tell me where i went wrong ??
Missing proxy for identifier IBFilesOwner
this class is not key value coding-compliant for the key
thanks
Fred Says:
May 25th, 2009 at 8:43 pm
Great screencast! Very professional! Thanks for all the hard work! Could you explain the rationale behind using the NSBunde/loadNibNamed to get a iCodeBlogCustomCell object? Would it be possible to create a -(id)initWithNibName initializer in the iCodeBlogCustomCell class and use something like cell = [[iCodeBlogCustomCell alloc] initWithNibName:iCodeBlogCustomCell]; ?
George Says:
May 26th, 2009 at 1:18 am
The line
NSArray* nibObjects = [[NSBundle mainBundle] loadNibNamed: @”iCodeBlogCustomCell” owner: self options: nil];
which changes the parameter “owner” from “nil” to “self” fixes the “Missing proxy for identifier IBFilesOwner” for me.
iFUN.de/iPhone :: Alles zum iPhone − UITableViewCell: Video-Tipps für iPhone-Entwickler Says:
May 26th, 2009 at 7:30 am
[...] iCodeBlog beschäftigt sich in seinem ersten Entwickler-Screencast mit dem Erstellen individueller “UITableViewCell“-Ansichten und zeigt [...]
SW Mirage Says:
May 27th, 2009 at 12:47 am
Cool tutorial. Thanks for this info. I like the new style of presentation.
Podcaster Says:
May 27th, 2009 at 10:25 pm
Will you be posting the sample project like the other tutorials? I hope so it helps me.
Collin Says:
May 27th, 2009 at 10:52 pm
Hey Podcaster. I will do that, I need to check with some people on how to get the CMS to hold that, I will get on it. Thanks for reading!
Collin Says:
May 29th, 2009 at 12:44 am
@FRED I have not tried that but I think that would work as well! I came across this handy piece of code and the “weight” of the processing was so minimal I didn’t think to try that. I will try to code that out and see if I can find any statistical performance differentials in Instruments. Thanks for reading!
Collin Says:
May 29th, 2009 at 12:46 am
@PalTeknoBlog That is a very good question. You can grab photos from URL provided by XML files. This involves using NSData. I will create a small tutorial on doing this for you very soon. Thanks for reading!
Collin Says:
May 29th, 2009 at 12:51 am
@praveenm I bet you could could just add a UITableViewCell to the document window of the MainWindow.xib. I simply chose not to. That is up to you, for organizational purposes I like to have mine separated. I don’t believe there is much of a performance sacrifice as a result of doing this. Thanks for reading!
HenrikB Says:
May 29th, 2009 at 2:21 am
Well needed and very professional tutorail! How to create table view cells in Interface Builder and then use them in your application isn’t exactly “over documented” by Apple 
In fact, I started writing a tutorial about this a few days ago and finished it a few minutes ago, so if you want to see an alternative way of doing this check out my blog and feel free to comment.
http://humblecoder.blogspot.com/2009/05/iphone-tutorial-creating-table-cells-in.html
Chintan Says:
May 29th, 2009 at 11:56 pm
Another great way of learning to make custom cells using IB is to read the book “Beginning iPhone Development”.
It contains the best explanation for OpenGL and Quartz also.
Matz Says:
May 30th, 2009 at 7:42 pm
Hi Colin,
Im fairly new to xcode and understand this is a medium level tutorial but was hoping that you might be able to help me anyway.
I get a warning in:
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewStylePlain reuseIdentifier:cellID] autorelease];
warning is: -initWithStyle method not found
and then the app crashes with:
Terminating due to uncaught exception
Any ideas?
Collin Says:
May 30th, 2009 at 9:47 pm
@Matz. I believe the method is ok but the parameter you are passing is wrong. I believe the line should read.
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
Let me know if that works out for you. Thanks for reading!
Matz Says:
May 30th, 2009 at 10:48 pm
Colin, using the the above i get a error rather than a warning:
error: UITableViewCellStyleDefault undeclared
Oddly, doing a esc on initWith returns a list of initWithCoder, initWithFrame and initWithFrame:reuse… no initWithStyle…. and subsequent esc on UITableViewStyle only returns Style, StyleGrouped and StylePlain
I just downloaded this sdk a couple of days ago so should be uptodate.
Dan VanWinkle Says:
May 30th, 2009 at 11:15 pm
Two words:
Switch
Case
Instead of all of those if-then-else-if’s, try this…
switch (indexPath.row % 4) {
case 0;
[[cell authorName] setText:@”Collin Ruffenach”];
[[cell articleName] setText:@”Test Article 1″];
[[cell date] setText:@”May 5th, 2009″];
[[cell imageView] setImage:[UIImage imageNamed:@"1.png"]];
break;
case 1;
[[cell authorName] setText:@”Steve Jobs”];
[[cell articleName] setText:@”Why iPhone will rule the world”];
[[cell date] setText:@”May 5th, 2010″];
[[cell imageView] setImage:[UIImage imageNamed:@"2.png"]];
break;
case 2:
[[cell authorName] setText:@”The Woz”];
[[cell articleName] setText:@”Why I’m coming back to Apple”];
[[cell date] setText:@”May 5th, 2012″];
[[cell imageView] setImage:[UIImage imageNamed:@"3.png"]];
break;
case 3:
[[cell authorName] setText:@”Aaron Hillegass”];
[[cell articleName] setText:@”Cocoa: A Brief Introduction”];
[[cell date] setText:@”May 5th, 2004″];
[[cell imageView] setImage:[UIImage imageNamed:@"4.png"]];
break;
}
Dan VanWinkle Says:
May 30th, 2009 at 11:23 pm
dang, just noticed the semi-colons for case 0: and case 1:…
Those should be : instead of ;
my bad
lil Says:
June 1st, 2009 at 8:32 am
Great screencast! Just what I needed. Looking forward to your next post.
Alex Says:
June 1st, 2009 at 4:38 pm
Thanks Colin,
extremely useful tutorial. there is a warning which Xcode highlights for code. Can you provide a bit more details about this when you have time pls:
[tableView dequeueReusableCellWithIdentifier:cellID];
and my “presonal” questions: I did absolutely the same steps in my real application but for some reason my custom cell show label value (i have just one for begin) only when I select the row. In other words only selected row has a value for label. Can you advise on which direction it is better to look to fix it
Thanks again
softprops Says:
June 8th, 2009 at 11:01 pm
I am having the same issue as @Matz
I get a crash with a warning
warning is: -initWithStyle method not found
I did a quick search in the docs and it appears this method is defined on UITableViewController not UITableViewCell
There are also some inconsistencies between the screencast and the code you posted here. For instance the constant UITableViewCellStyleDefault is undefined for UITableView. In the screencast you use the constant UITableViewStylePlain which is a valid UITableView constant.
I am wondering if there was some deprecations/changes in the SDK for us. It obviously worked in your screencast.
Collin Says:
June 9th, 2009 at 12:05 am
Hey guys,
Ok so I believe I have figured out the problem. I am running the 3.0 SDK. I didn’t believe any of this was 3.0 stuff but apparently these small details are. With 3.0 only days away I will not have time to update them. I am sorry for the confusion but next week try this code again. It should work. Sorry again. Thanks for reading!
HenrikB Says:
June 10th, 2009 at 6:43 am
When learning something, it’s often useful to read several author’s description of the same thing. So if anyone feels like reading more about custom UITableViewCell creation in Interface Builder, feel free to check out my blog!
http://humblecoder.blogspot.com/2009/05/iphone-tutorial-creating-table-cells-in.html
zxed Says:
June 13th, 2009 at 3:35 am
Mine crashes during the cellForRowAtInexPath…
Question… the return type is supposed to be UITableViewCell.. but cell in the function is iCodeBlogCustomCell., so its returning the type iCodeBlogCustomCell…
would that be causing the unexp app exception:?
zxed Says:
June 13th, 2009 at 3:48 am
hmm thats not it., just remember that iCodeBlogCustomCell is derived from UITableViewCell
Rushil Says:
June 14th, 2009 at 8:19 pm
Can you post the source code for this, because I am getting some errors andi don’t know why they are coming.
James Says:
June 19th, 2009 at 10:13 pm
Dude! You rock
Thank you for taking the time to do this tutorial. You explanation was simple and and exactly what I had been looking for.
Add me to you mailing list if you have one.
William Says:
June 20th, 2009 at 4:59 pm
Hi,
I tried to run the app in the simulator but I get a warning: Initialization from distinct Objective-C type.
Do you know how to solve this?
I noticed you get the similar warning in your screencast.
Thank you
William
Fernando Says:
June 22nd, 2009 at 1:12 pm
@William
I think that is just a warning to tell you that you’re using your own custom cell, rather than an actual error. Its fine here because we created the proper methods to support the table.
@Collin
One problem that I have with this is the images are blown way out of proportion and get re sized somehow. See
http://screencast.com/t/ph7MjFwb7t
But the project that I have is identical to yours.
See:
http://screencast.com/t/TNV867Jj
and when i select the image view associated with the image
http://screencast.com/t/p4Cqf5FQl
Any help would be appreciated.
Amy Says:
June 29th, 2009 at 8:11 pm
I loved the tutorial, especially how it is differentiated from other UITableView tutorials through the use of the images and sub-headings.
Could you possibly make a second step to this tutorial? I would love to see how you can click on each heading and learn how to drill down to further levels.
Fernando Says:
July 7th, 2009 at 11:18 am
I figured it out. When I had copied and pasted the code from the blog, it uses the following line to set the image:
[[cell imageView] setImage:[UIImage imageNamed:@"1.png"]];
but if you follow the steps on the tutorial it should be:
[[cell image] setImage:[UIImage imageNamed:@"1.png"]];
Anurag Says:
July 24th, 2009 at 12:26 am
Could you write a small tutorial explaining how to fill table cells with XML data that we retrieve from any website?
g Says:
August 16th, 2009 at 2:15 pm
Source Code link is not working. Can anybody please put a source code.
BeckzZ Says:
September 18th, 2009 at 7:18 am
Hey,
another great tutorial, thx fot that.
It helped me a lot!
But sourceCode-Link is still not working..would be fine if you’re able to fix that..cause I would like to use your images for this turoial..
thx
iPhoneMMS Says:
September 28th, 2009 at 2:16 pm
The source code and video links don’t work.
It makes my browser freezen.
Would you put them up?
Omzig Says:
October 9th, 2009 at 10:15 pm
Well, i am messed up, only 1 of my images will show on my itouch. If i load it in the simulator they will all be shown. but when i try to load it on my iTouch it doesnt work verson 3.1.2
Omzig Says:
October 9th, 2009 at 10:30 pm
AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH………
[[cell image] setImage:[UIImage imageNamed:@"icon1.png"]];
[[cell image] setImage:[UIImage imageNamed:@"Icon2.png"]];
Notice something? the darn @”icon1.png” is case sensitive. if you spell something wrong it will not show your image!!!!!!!!! Took me an hour to figure out that my images were not bad. The part that kicks my booty is that it works in the simulator and not the phone/touch. This REALLY burns. I learned something but please.
Good tutorial man.
Omzig Says:
October 9th, 2009 at 10:43 pm
Also found that if you rename the PNG’s that doesnt always work, there must be some kind of meta data in the image or something… Hates Me!
Frederick C. Lee Says:
October 15th, 2009 at 8:44 pm
Excellent tutorial: simple, visual and to-the-point. I only wished it was a bit higher resolution. I’m looking forward to other tutorials. This one looks like it came out in May. It’s about time for another, don’ you think?
Frederick C. Lee Says:
October 16th, 2009 at 1:34 pm
The tutorial looked straight forward, but I’m having trouble with the customized cell view.
I keep getting the warning: “Initializing with a Distinct Objective-C Type” at:
CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
Xcode/IB doesn’t appear to automatically instantiate the customized cell.
Any ideas/
Also, I notice that the IB’s File Owner wasn’t set/used. Shouldn’t the ‘File Owner’ icon bet set to the customized cell def?
tnathos Says:
October 27th, 2009 at 8:31 pm
the link source code doesnt works…… pls any can post again?
Petchal Says:
November 13th, 2009 at 3:33 am
hi,
i have the same problem as Frederick. any advice? thanks
brandontreb Says:
November 13th, 2009 at 9:37 am
@Frederick @Petchal
You need to cast it. So make this line:
CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
to
CustomTableViewCell *cell = (CustomTableViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
Saad Says:
November 26th, 2009 at 11:25 am
@COLIN
Great Tutorial. I need some help. I am creating an app with a Tab Bar which gives me 5 views. On the 5th view, I want this fancy table. It loads the view of that page from a seperate nib called newsTable and conforms to the class newsTableViewController.
I did exactly what you did but it keeps on crashes and tells me that it has gotten an uncaught something.
Do you think it has anything to do with this line: NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@”iCodeBlogCustomCell” owner:nil options:nil];
What is the owner? Should it be nil if I have a tab bar going on? I dont know what the problem is please help me!
Yev Says:
November 30th, 2009 at 1:15 pm
Collin, great stuff, helped me a lot !!!
One tidbit that I ran into, the View that you use for the background view needs to be sized the same as the cell, I didn’t do this initially and some of the cell data was covered by the view. After clicking I would see the data but it was very weird to me on why it was happening. Took me a couple of days to figure it out and a couple of looks over other tutorial.
Thanks, great work !!!
Custom UITableViewCell Using Interface Builder « thomas bittel Says:
December 9th, 2009 at 11:13 am
[...] Custom UITableViewCell Using Interface Builder Custom UITableViewCell Using Interface Builder [...]
Jeffery Fernandez Says:
December 17th, 2009 at 5:45 am
Hi Collin,
The download link for this project source-code is broken now 
bcl Says:
February 6th, 2010 at 11:47 am
Good job! Thanks for posting the slides and text. It would be a bit more readable if you used a source highlighting plugin, but I was able to follow it just fine and it works great for me.
Leave a Reply
Subscribe
Categories
Tutorials
Archives
