Swift — Create Custom TableView Cell with programmatically in iOS

5 min readApr 5, 2018

Let me explain something about me, I’m IOS Developer about 4 years. When i try to build my first app i use storyboards, xib after that I convert my self into create everything programmatically. I’m not say this is the best way or only way but i prefer to continue like this. When i create something programmatically I feel like free as possible as be. So this is my first Medium story and sorry if I do something wrong.

Ok Let’s start

If you want to customize and add additional features on your tableView cell you might need to create custom tableView cell class. I said might because current TableView cell has some default elements which are could customize your cell at some point. But if you want to customize more I’ll explain in this article. I’ll show you to everything step by step and I ‘ll use swift language.

Here is the cell what we are going to build:

STEP 1 Create Xcode Project and Fix Settings:

Create Xcode project with Single View App after that we need to modify some setting because we are not working with storyboards. So here is the things we should fix;

First Delete Main from Main Interface in Project Settings.

You can find image in the below with red highlighted.

Then we open AppDelegate.swift file so we need to tell editor which view controller is the root.We only modify didFinishLaunchingWithOptions function for this project.

AppDelegate.swift code should be like

After this process when you run the project you should see the white screen.

STEP 2 Create Product Model

We create Product model because i want to fetch data into TableView from this model. So Clicked File ->New-> File or Command + N after that you have to choose swift file and then clicked Next.

After this process write your file name “Product” and clicked Create.

Now you should see the Product.swift file on the Project Navigator. Clicked that file and let’s edit it.

This is simple model that contains some property we ‘ll use that properties in Custom TableView Cell.

STEP 3 Create TableViewController

When you create your project you can see the ViewController.swift it created by default so we ‘ll work on that file. First of all we need to change that Controller type to UITableViewController after that we’ll add necessary functions for the table view.

ViewController.swift file should be something in the below.

As you can see I created Product model array so we can easily to populate data into TableView. I also createProductArray for the add dummy data into my array. Because we are not using Storyboards we need to register our cell with

In here I user “UITableViewCell” this is the default TableView cell we’ll change it with our custom TableView cell later.

I also use 2 function for the TableView;

First is cellForRowAt function. In this function we create our TableView Cell and return it in TableView. As you can see i use “cell.textLabel.text” this is default property for UITableViewCell

Second is numberOfRowsInSection function. This is handle the how many cell will be shown on TableView.

I added 3 assets on my project which are images so you need to add you own images and append them into your products array.

Here is the complete code for this section so you can easily paste it.

When you do all of that and run the project, you’ll see ;

STEP 4 Create Custom TableView Cell Class and Set That into TableView

Before creating our Custom TableViewCell, I want to mention anchors and constraints. Again because we don’t use Storyboard, we need to add constraints programmatically, So I use some of the extensions that I learned from Brian Voong. He has a youtube channel and website which is called letsbuildthatapp.com I highly recommend him if you would like to learn much more about constraints and other topics. You‘ll see the extension screenshot and the whole code below.

So We need to create a new file which is an Extension. swift then paste that code. After that, we could able to anchor our elements to the views. The next step is we need to create another file which will be our Custom TableView Cell class. So create a new file with the name “Product Cell”. Here are the other steps we are taking.

1- Create Custom Elements in our Cell

We have 6 elements in our Cell which are 2 buttons, 1 imageView, and 3 labels. So let’s create them. In the below you can see the whole code of Product Cell in this code we create all elements and them into view after that we’ll assign the value of it. I‘ll add images too.

and let’s take a look ViewController.Swift.

As you can see we change the tableView.register cell name with “ProductCell.self” also we modify the cellForRowat function too we pass the Model instead of the property.

Finally, Here is the result so far

One step left you probably realize our button is not functional so we‘ll use a delegate to make it functional. Let’s take a look.

First, we create a protocol in Product Cell which is name ProductCellDelegate and we’ll add two functions for increasing and decreasing the number quantity.

Our protocol should be :

Also, we added 3 functions for the increase and decrease,

Finally, our Product Cell will be: