Custom UITableViewCells with Interface Builder

Submitted by Julio on Mon, 01/26/2009 - 21:44

A lot of people have questions about creating custom UITableViewCells and after showing this technique to a friend of mine, Ian, he asked me to write it up so that he and others could refer to it. First let me say this is technique is based on an approach another friend of mine showed me last year. Thanks Kendall.

This article accompanies this youtube video

First let me point out that the default UITableCellView has space for an image on the left, a text string in the middle and a disclosure indicator on the right.

We sometimes want to create a custom cell with more information and in this tutorial we are going to create a very simple cell with two strings We'll only show the state name and capital but this technique can be extended to create as fancy a cell as you like.

Inside our table view controller, I'll create and initialize two NSArray instance variables for the states and capitals. Then in cellForRowAtIndexPath I can set the cells text to our formatted string.

And our application now looks like this:

Now supposed we want to change the layout a bit and have the capital names over the state name. There are three common approaches to doing that:

Use the standard UITableViewCell and add the text labels as subviews which we layout in code
Create a subclass of UITableViewCell which we layout in code like any other view
Create a subclass of UITableViewCell which we layout in Interface Builder

For the first approach, we need only create the UILabels, add them as subviews and give them a tag so we can find them later.

If we want more control, we can create a subclass of UITableView and manage the views in a similar way in code. This second method is very similar to the way you create other custom views for custom drawing.

The third approach lets us use Interface Builder to layout the cell by following the steps below:

Create a new subclass of UITableViewCell lets say its called CustomCell
In the interface file add two instance variables and properties

In the implementation file synthesize the properties
Create a new view based nib - CustomCell.xib
Remove the default UIView and add a UITableViewCell
In the identity inspector change the type to my CustomCell
In the attribute inspector set the identifier to something. Say "CustomCell"
Add two labels and change their attributes as you like
Now the trick is to wire up the labels to the custom state table cell. Note, we pretty much ignore the file's owner which would normally be a UIViewController

Now in cellForRowAtIndexPath request a cell using the new identifier
If it is not found load the nib we just created using NSBundle's loadNibNamed method and search through array for a UITableViewCell
Now we have our custom cell and it can be set the value of the text label

And of course the cell could be enhanced to include population or other state related information or to have different display attributes. I know that can be a little tricky but hopefully you'll be able to follow the steps and the video.

Thanks for sticking with me. I hope I have been able to show you something new. Let me know if you have any comments or questions.

Attachment:

CustomTableCell-States-Code_0.zip

Comments

Jeff Geerling (not verified)

Mon, 02/14/2011 - 18:54

Search form

Main menu

You are here

Get Email Updates

Training

Popular Posts

Custom UITableViewCells with Interface Builder

Comments

Add new comment

Filtered HTML

Plain text