Creating Custom UITableViewCell using Nib (.xib) files in XCode

The ‘proper’ way

This brief tutorial will demonstrate two things:

The simplest way to create a custom UITableViewCell: A lot of new iOS developers seem to struggle with this. Depending on where they look, they are shown a variety of possible ways of accomplishing this, some of which are pretty bad to say the least. This article aims to demonstrate a simple and direct way of creating a custom table cell with minimum code. The designing of the cell is done completely visually in Interface Builder, and stored in its own Nib file.

and

How to use the custom cell: When using custom cells, beginners generally run into this problem where their custom cells don’t seem to be updating, or seem to be randomly changing their content when the table is scrolled. The same cell seems to be appearing in a number of different locations in the table. This happens due to the fact that the content of the cell is not being set at the correct time because the programmer doesn’t completely grasp the cell reuse concept employed.

Note: If you just care to see the source code, here is the git repo with the project developed in this tutorial: https://github.com/musawirali/Tutorial-Custom-UITableViewCell

We start off with a simple view controller with a table that uses non-custom cell. Your code will probably look something like this: (code)

and your result would be something like this:

We’ll now design a custom cell. Start by adding an empty view to your project, and then drag a UITableViewCell onto it:

We now have an empty table cell that we can design as we like. We can throw in text labels, images, switches, progress bars, etc. I’ll just put a few text labels around to keep things simple. Here is what my custom cell looks like:

Now we add a custom class for our new cell, subclassed from UITableViewCell:

Once the files have been created, we wire up the cell in the Nib and the code. Start by setting the custom class for your new cell, and the Reuse Identifier:

Next, we will create outlets for the text labels in our cell so we can set their values:

All done! Our custom cell is ready to be used in our table. This is where the beginners get confused, and they often start wondering about what init method they need to use in order to instantiate their custom cell object. And here is the kicker: you don’t explicitly allocate/init the object. You simply register the Nib file for your custom cell and the rest will be managed for you! The code is surprisingly simple. We modify our tableView:cellForRowAtIndexPath: implementation as follows:

And there you have it:

Now, on to the second problem where the custom cell appears to ‘randomly change content’ when the table is scrolled. The reason why this happens is because the content of the cell is set in the tableView:cellForRowAtIndexPath: method, which is not the right place. In this method, the system expects only to obtain the cell object. Once a cell is displayed, the system will not ask for the cell object until it loses it (i.e. when the cell object is destroyed) and cannot find a replacement to reuse. If, however, a replacement is found, it is reused, and you will end up seeing the contents of that reused cell in place of the original cell. The solution is quite simple:

The content of the cell has to be set right before it is displayed. We don’t care which cell object is being used. All we care about is that it has the right stuff to display when it is passed on to the renderer. So, the right place to set the cell’s content is tableView:willDisplayCell:forRowAtIndexPath:

The code should look like this:

With this, your table and custom cell should behave as you’d expect them to.