Create a CustomUITableViewCell in a UITableView

Tired cell?

Image for post
Image for post
Photo by Paweł Czerwiński on Unsplash

Difficulty: Beginner | Easy | Normal | Challenging

Creating a custom UITableViewCell can be a little bit tricky when done from the storyboard — but this article is here to help you out!

The Project

The idea is to have a UIViewController with a UITableView, and be able to move once the UITableViewCell is clicked move to a Detail UIViewController.

For fun, this is going to display a well-chosen list of animals (just the obvious animals here: Dogs, Cats and Galapagos Giant Tortoises are of course included). The DetailViewController will simply display the name of the animal in a UILabel.

Image for post
Image for post

The CustomTableViewCell class looks like the following

Image for post
Image for post
Click for Gist

Which is, as you might expect, a single line label when viewed in the storyboard

Image for post
Image for post

Which needs a storyboard identifier within the storyboard to be set — this will need to be set as cell if you follow along with the article.

Image for post
Image for post

The rest of the code for the ViewController is as follows:

Image for post
Image for post
Click for Gist

The date is an array of strings at the top, given the name data. We also have a tableView instance (sorry about the force-unwrapping, but we know that it will be instantiated in the viewDidLoad() function). Within the viewDidLoad() function the tableView is set up, and the cell is set up to be resused in tableView(_:cellForRowAt:). The UITableViewDataSource functions are fairly self-explanatory tableView(_:numberOfRowsInSection:) sets the rows with the same number as the data. Then tableView(_:cellForRowAt:) places the data into the UITableViewCell, that is assigning animalLabel. An alternative to this would be using an initialiser with the cell as CustomTableViewCell .

DetailViewController will use a new ViewController subclass which is then set as the class for a name for that second view controller.

Image for post
Image for post

ViewController will traverse to DetailViewController using a Segue. This is done through a drag + drop action from ViewController to the DetailViewController.

In this case the segue has been named as detail.

Image for post
Image for post

The DetailViewController has a property for dataString that we will use to be displayed on a table.

Image for post
Image for post
Click for Gist

Making sure that the DetailViewController on the storyboard is connected to the DetailViewController class.

ViewController will pass data to DetailViewController through the Segue.

This will (of course) only happen when we have clicked on the row, using tableView(_:didSelectRowAt:).

Image for post
Image for post
Click for Gist

Placed in an extension for the ViewController we make the segue, passing the data through the segue.

Image for post
Image for post
Click for Gist

Conclusion:

Using a segue is just one way to pass information around a project, but has been chosen here to amply demonstrate how a custom UITableViewCell can be implemented even going so far as pressing the cell to traverse to the next ViewController.

Certainly you can do more with UITableViewCell, but this is just a start. To what? You decide with your own App implementations. Good luck!

Want to view the whole project? Look at the Repo

Any questions? Get in touch with me on Twitter and I’ll help you out!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store