How to Create Custom Cells to Enhance a TableView in iOS
As you continue to build mobile applications you’ll notice that almost every application will need to use some form of a table to display data. Tables are a convenient and highly effective at presenting data to the user.
I’m going to give a brief introduction and demo into tables in iOS, and how to create custom TableView Cells.
In XCode open Main.storyboard. Next drag and drop a TableView Controller onto the screen, click on the TableView Controller and open the Attributes Selector menu. You’ll notice that just by adding a TableView Controller, a Dynamic prototype cell has been added for you. Next click on the actual TableView Cell and you should see that the style of that cell is set to Custom, expand the menu option and you’ll see a list of default styles that are available for a TableView Cell. There is Basic, Right Detail, Left Detail, and Subtitle. Try each style out to see what happens in the TableView Cell.
The default TableView Cell styles offer a quick way to get a table view up and running and displaying data. However, the defaults are extremely limiting when it comes to creativity and the ability to change the layout of the cell. It’s time to go ahead and create a custom cell model.
Make sure you still have the table view cell selected, next select Custom as the style. You now have an empty cell in the table view to create your own style.
We’re going to build a contact table. The table cell will display a persons profile picture, name, email, and phone number.
Step 1 — Create a Contact Model
In the projects directory add a new Swift File and name it ContactModel.
Once you’ve created that file, we’ll need some information to it that defines a persons contact information should entail. For now, we’ll go with a user image, first name, last name, and a phone number. Let’s create our model below!
We created a Contact model and initialized each element of a contact.
Step 2 — Create a Contact Cell File
Back in your projects directory let’s go ahead and create a new file → Select Cocoa Touch Class.
Name the file ContactCell and make sure (very important) that you select the correct subclass. Select UITableViewCell and press create.
Great! We’re starting to build a nice foundation for our table view.
Step 3 — Populate the ContactCell class
In the ContactCell file that you’ve just created we’re going to have to create some IBOutlets to populate the table cells with the contact information. We have a Contact icon, first name, last name and phone number so we’ll need to create four IBOutlets for those properties.
Next, we need to connect the ContactModel class to update the outlets that we just created. For this step we are going to create a new function in the ContactCell class. Let’s call it UpdateCellView and pass in a contact object as a parameter. Inside the function we have to use the contact objects elements to populate the outlets for the table view cell.
Great! We’re almost there.
Step 4 — Create some Contacts
Navigate to the ViewController.swift file and go ahead and create an array that uses the ContactModel struct. I went ahead and creating three contacts to start, you can add as many as you like.
A very important step when working with table views is to create an IBOutlet for the TableView. It’s an easy step to forget and one that can leave you scratching your head as to what is wrong with table, why is it not working. Make sure to add that at the top of the ViewController.swift file
Step 5 —Assign DataSource and Delegate to the TableView that has been created
Assigning data source and delegate to the table view is a very important step. Without these next two lines of code, the table would not load/show any data on startup and you would be sitting there thinking, umm that’s not what was supposed to happen. Let’s add data source and delegate to the table view.
Step 6 — Implement the UITableViewDelegate and UITableViewDataSource protocol functions
As you might be thinking, each of these steps is important for the table to function properly, without adding these next two functions the project would never successfully build. We have to implement numberOfRowsInSection and cellForRowAt. I went ahead and populated the functions using data we created earlier. Lets start with the first function — numberOfRowsInSection requires an Int as it’s return, it only makes sense that we take the number of contacts that are stored in the array we previously created and use that number as our count.
In the function — cellForRowAt we first have to create a cell in the form of the ContactCell and pass in an identifier to create a connection with the actual table view cell. Then we create a new variable extractedContact (you can name this anything you like) that gets assigned each contact from the contacts array and is then passed into the UpdateCellView. This is how the table view cell IBOutlets are populated.
Step 7 — Connect Everything to the Storyboard
First things first, navigate to the storyboard and select the table view cell. In the Identity Inspector, we have to add our custom ContactCell class as the class of this cell. Also, you need to add in an image view and three labels that will act as the foundation of the contact cell. You can create your own layout or use the one that I created like below.
Next while the table view cell is still selected, navigate to the Attributes Selector. Remember that contactCell identifier that we used when creating the cell in the table view protocol function? Yea that one. Well here is where we need to use it again. Add the same identifier to the Identifier property (case matters!).
Next in the View Controller Scene on the left, right click on the contactCell and you should see the four IBOutlets that we created for our custom cell. Click and drag the icon, first name, last name, phone number to the appropriate view controller elements.
Great! Everything looks to be connected and ready to go. Let’s give our custom table view cell a try.
You should see these results if you’ve followed along correctly.
Here is a Github link to the source code for this demo. Feel free to download it and test it out yourself.
Stay tuned for more iOS content!
