Custom UITableViewCells with Interface Builder in iPhone

Custom UITableViewCells with Interface Builder

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

http://www.youtube.com/watch?v=CGvs1XqTae0&feature=player_embedded

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:

1. Use the standard UITableViewCell and add the text labels as subviews which we layout in code
2. Create a subclass of UITableViewCell which we layout in code like any other view
3. 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:

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

3. In the implementation file synthesize the properties
4. Create a new view based nib - CustomCell.xib
5. Remove the default UIView and add a UITableViewCell
6. In the identity inspector change the type to my CustomCell
7. In the attribute inspector set the identifier to something. Say "CustomCell"
8. Add two labels and change their attributes as you like
9. 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



10. Now in cellForRowAtIndexPath request a cell using the new identifier
11. If it is not found load the nib we just created using NSBundle's loadNibNamed method and search through array for a UITableViewCell
12. 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.

Download Source Code click   

here