This is part of an ELC Tech Network

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

picture-1

picture-2

picture-3

picture-4

picture-5

picture-6

picture-7

picture-8

picture-9

picture-10

picture-11

Building The App

Step 1

picture-12

This step shouldn’t require any extra information.

Step 2

picture-13

datasourceconnection

Step 3

picture-14

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

picture-15

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

picture-16

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

picture-17

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!

This entry was posted in Interface Builder, Uncategorized, iPhone Articles, iPhone Programming Tutorials, iphone, objective-c and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

77 Comments

  1. tnathos
    Posted October 27, 2009 at 8:30 pm | Permalink

    the link source code doesnt works…… pls any can post?

  2. tnathos
    Posted October 27, 2009 at 8:31 pm | Permalink

    the link source code doesnt works…… pls any can post again?

  3. Petchal
    Posted November 13, 2009 at 3:33 am | Permalink

    hi,
    i have the same problem as Frederick. any advice? thanks

  4. Posted November 13, 2009 at 9:37 am | Permalink

    @Frederick @Petchal

    You need to cast it. So make this line:

    CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    to

    CustomTableViewCell *cell = (CustomTableViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

  5. Posted November 16, 2009 at 1:05 pm | Permalink

    Excelente,, tutorial…good. Gracias..

  6. Saad
    Posted November 26, 2009 at 11:25 am | Permalink

    @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!

  7. Yev
    Posted November 30, 2009 at 1:15 pm | Permalink

    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 !!!

  8. Posted December 17, 2009 at 5:45 am | Permalink

    Hi Collin,

    The download link for this project source-code is broken now :(

  9. Posted February 6, 2010 at 11:47 am | Permalink

    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.

  10. ab
    Posted March 2, 2010 at 7:52 am | Permalink

    Unable to download. Link Broken.

  11. Posted March 25, 2010 at 12:18 pm | Permalink

    Trailer Axle and Trailer Parts
    Find all your trailer parts for Trailer repair and custom built trailer axles for replacement or repair

  12. Jonas
    Posted April 2, 2010 at 8:01 pm | Permalink

    Hi! How do I create a listener for every cell? I want to be able to press the cell and if I do so, I want another window to open with more information.. thanks for a great tutorial!

    keep up the good work!

  13. Posted May 24, 2010 at 10:50 pm | Permalink

    Great Tutorial!!
    After spending a considerable amount of time looking through other websites which led me to really complicated stuff, your tutorial made it really easy to follow. THANKS!!

  14. oisweb
    Posted May 26, 2010 at 10:51 pm | Permalink

    what ‘s up ? setText is deprecated
    i work in SDK 3.2

  15. jukus
    Posted July 6, 2010 at 2:40 am | Permalink

    I put in 3 cells…My cell rendering behaviour is very strange, it only renders 1 cell, however when i select it, it renders the second. If i scroll the list, the first two disappear and the third appears.

    At first i thought it was related to the row hight not set correctly on the UITableView as changing this shows a worse, but similar behaviour. However, the hight here matches the height of the custom cell

  16. jukus
    Posted July 6, 2010 at 2:47 am | Permalink

    ahh, just spotted Yew’s comment about view size = cell size.

    Great Tut btw, thanks!

  17. Rob
    Posted July 27, 2010 at 1:57 am | Permalink

    Thanks for the EXCELLENT tutorial! I’m pretty new to “real programming” (I’ve just done some web stuff), but all the code examples and slides made it easy to follow along. Putting the custom tableViewCell in a custom class got my noggin spinning, and had a good idea. I wrote some functions that call threads and timers INSIDE the customView class, and as far as I can tell, they are being dequeued/reused the same way the the viewCell is. Lightning fast and modular.

    I only have one stubborn warning, “Incompatible Objective-C types initializing ‘struct UITableViewCell *’,expected ‘struct customCell*’

    Any Ideas? everything still works, but I want the comforting green “Build Succeeded”.

    • Rob
      Posted July 27, 2010 at 2:08 am | Permalink

      never mind, brandontreb already posted a solution my problem:

      You need to cast it. So make this line:

      CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

      to

      CustomTableViewCell *cell = (CustomTableViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

  18. skander
    Posted July 29, 2010 at 3:57 am | Permalink

    Thanx very well, it’s a very excellent tutorial :) )

  19. Posted July 31, 2010 at 11:46 pm | Permalink

    Nice Tut, thanks.

  20. Posted August 18, 2010 at 5:35 pm | Permalink

    Perfect – exactly what I needed. Thanks!

  21. David
    Posted August 19, 2010 at 5:50 pm | Permalink

    The source link says the domain has expired. Is it available somewhere else?

  22. Qamar
    Posted August 23, 2010 at 4:42 am | Permalink

    You are dequeing the cell with indentifier but never assigning the identifier…please have a qlook

  23. Athma
    Posted August 26, 2010 at 8:33 am | Permalink

    Dude,

    You simply rock! I found your site just because of my good Karma. Appreciate what you do and the amount of effort you put in every article you write.

    God bless.

  24. Afflick
    Posted August 30, 2010 at 7:56 pm | Permalink

    I’m pretty much an SDK noob, when it says “synthesize in the main”, can someone show me the exact line that’s needed? I assume it goes in iCodeBlogCustomCell.h

    Cheers

  25. Afflick
    Posted August 30, 2010 at 10:14 pm | Permalink

    actually nevermind that, figured it out

    What mine’s doing now though, is not actually loading the program. The code compiles and the iPhone simulator starts up. But when I click on the icon, it starts, nothing happens, then it return to the home screen.

  26. Afflick
    Posted August 30, 2010 at 11:32 pm | Permalink

    2010-08-31 15:30:43.708 iCodeBlogTable[25635:207] *** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘UITableView dataSource must return a cell from tableView:cellForRowAtIndexPath:’

2 Trackbacks

  1. [...] iCodeBlog beschäftigt sich in seinem ersten Entwickler-Screencast mit dem Erstellen individueller “UITableViewCell“-Ansichten und zeigt  [...]

  2. [...] Custom UITableViewCell Using Interface Builder Custom UITableViewCell Using Interface Builder [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">