Lesson 014 – Intro to Custom TableView Cells, the Remix

Cell DiagramIn our last lesson, we created a custom cell for our table view. There was nothing inherently wrong with the steps we took to do it, but there are times when there are better ways. However, the fundamentals of what we learned in Lesson 013 are very important in order for us to move forward.

Take Two

In order to get started, I’m just going to copy the finished project from Lesson 013 over into a new folder and rename it for Lesson 014. You can make a copy if you’ve been following along, or you can head over to our GitHub repo and pull down the code for Lesson 013 and begin there.

What’s the Issue?

Last time, we defined our custom cell right within our UITableView, which was within a very specific storyboard, Main.storyboard.

Original Prototype Cell

The issue here is that if we want to ever use the custom cell in other UITableViews, we would have to make a new prototype cell on that other UITableView and have to design the cell again. Now, the code portion is safe for reuse. Remember, we defined that in a completely separate file called NinjaCell.swift. In order to make this custom cell completely reusable in other storyboards and even other projects, we need to set up the cell another way.

Remove the Old Prototype

For step one, we are going to select the UITableView on the screen and change the number of prototype cells from 1 to 0 as shown here.

Remove the Prototype Cell

Create the New Prototype

Now, we need to right click on our project folder in the Project Navigator and select New File. Choose iOS -> User Interface -> Empty and click Next.

New File

Name the file NinjaCell.xib and click Create.

Name New File

Now, go into the Object Library and drag a UITableViewCell onto the canvas.

Add Cell Object

Drag an ImageView and a Label onto the cell and lay it out like we did for the previous custom cell in Lesson 013. All of the next few steps should be identical to what I did to lay out the cell in Lesson 013. If you are having any trouble, go back and watch that video for more detailed instructions.

Design Cell

Select the ImageView and then add the correct constraints.

Add Image Constraints

Now select the Label and add its correct constraints.

Add Label Constraints

Next, make sure the UITableViewCell is selected and then set its custom class to NinjaCell.

Set Custom Class

Wire up the outlets.

Wire Up Outlets

The Sum Total of Code Changes

Go into the ViewController.swift file and add this code to the bottom of the viewDidLoad method, after the array populations.

That code just creates an instance of the nib we just created (I know the extension is .xib, it is some UIKit weirdness) and then it registers that nib with the tableview with the reuse identifier that we had previously declared on the storyboard. And that is all there is to it. Since we registered the custom cell and gave it the same reuse identifier, we literally don’t have to change any more code. And when we run the project, we can see that it is functional.

Complete and Working


Declaring your custom cells like we did in this lesson is a far more extensible and portable way than how we did in Lesson 013. However, if you are defining a cell that you will only ever use in one place, there is no problem with just declaring it alongside the UITableView right there in the storyboard. Remember that the code for these lessons is on GitHub and if you have any questions, please leave them in the comments below.

Add Comment

Required fields are marked *. Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.