iOS Custom UITableViewCells

Creating a Custom UITableViewCell

One thing I see quite often in iOS development is all the odd ways people try to manage their custom UITableview cells. As most of you probably already know, iOS ships with a few designs out of the box. Coincidentally, or maybe not so coincidentally, these are the same cells you see in the stock apps such as phone and contacts. If you are interested, you can see the default cell styles on Apple's Developer reference.

This works great for some situations, but I find more often than not, my clients want a little more control over their apps than this. For example, what if you want to have an image, an action button, 3 text fields and some sort of a rating field? Now, you're off into custom cell territory.

Fortunately, this isn't too difficult in iOS or in Android. This article will focus primarily on iOS, but I will write another, on Android later.

Unlike most blogs out there, I'm going assume you have already built an iOS app, or are in the process, and you are stuck at exactly this point, meaning if you need help creating the app from the beginning then this tutorial is probably not for you, at least not yet :)

Create the XIB file and Objective-C files

Without going into too much detail here, XIB files are pretty common in iOS development, create an empty XIB file and the Objective C source file you will need for your custom tableview cell. There really isn't anything too special here, other than make sure your new Objective-C source file is a subclass of UITableViewCell (important later) as seen in Figure 1.

screenshot of creating a new UITableViewCell subclass

Figure 1.Notice we selected UITableViewCell in the subclass of field. This allows us to connect it to the cell later

Connect the cell and code in Interface Builder

This is where people seem to go wrong when creating custom UITableViewCells. I've seen this done a million ways, but this works the best and is easiest to use in a UITableView. In your empty XIB file, drag a TableViewCell field into the editor. DO NOT use a normal UIView. This may seem like a good idea if you want to reuse the cell later, but I highly recommend against it. The reason is if the cell is not a real UITableViewCell, getting the cell to indent properly while editing is a real pain, and you will find you spend more time later working around reusing code than if you would have just done it with the right cells to start with. If you find yourself in a situation where you need to reuse the cell in normal views, think about creating a custom view and adding it to your tableview cell.

Once you have your XIB file, don't change file's owner to the custom cell. Instead, change UITableViewCell itself, as in Figure 2.

wiring custom cell to code

Figure 2. Note the selected TableviewCell on the left, not files owner. On the right, the dropdown shows our custom cell

The next thing you want to make sure you do, is add the reuse identifier in the xib file. With the cell still selected, look for the Reuse Identifier field in the right pane, in the Attribute Inspector (As of XCode 4.6, it's right below the Cell Style).

Add components to the cell

Now feel free to design your cell however you need, and wire all IBOutlets as you would normally

Using the Cell

Prior to iOS 4, you had to do much of this in the "tableView:cellForRowAtIndexPath:" method you had to dequeue the cell, then check to see if it was null, and if it was null, create it, usually from the XIB file. iOS 4 and later has a new class, UIXib that you can use to do much of this work.

To use it, in your viewDidLoad method, "register" your cell as follows:

 [self.tableView registerNib:[UINib nibWithNibName:@"MyCustomCell" bundle:nil] forCellReuseIdentifier:@"MyCustomCell"];

What this does, is allows the tableview to manage these cells automatically.

Now, in your cellForRowAtIndexpath method, use it with this:

  static NSString *CellIdentifier = @"MyCustomCell"

    MyCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {

        //I haven't seen it hit this method yet, even with 1000's of rows in the tableview cell! (your mileage may vary) 😛

    }

    //Do things to your cell here....

    return cell;

And that's it. you should be able to use your new cells over and over in a very efficient way.