iOS Tutorials: Customized TableViewCells

Customizing tableview cell is one of the most common technique used today by most of the developers. One of the many reasons is to implement more features on the cell and to beautify it to look more appealing to users.

Start by creating a new projects and you will see that you have ViewController.swift and View Controller Scene in Main.storyboard. We wont be needing any of these. So feel free to delete them.

Drag Table View Controller to the Main.storyboard and tick Is Initial View Controller so that when you run the simulator, you will see the TableView.

Then click File > New File > Cocoa Touch and name it TableViewController but make it is the subclass of UITableViewController

Once you are done creating TableViewController.swift and dragging Table View Controller onto the Main.storyboard. Make sure that both the Table View Controller and TableViewController.swift are connected to each other. You easily do that by clicking on the Table View Controller on Main.storyboard and write TableViewController on the Custom Class to connect them. 

Now, I’ve set up the cells by adding Image View, Labels and Buttons.

The layout on the Main.storyboard should look like below. The crucial step here is to write cell in Identifier.

Now we’ll have to connect all the Objects by creating a new TableViewCell class which is the subclass of UITableViewCell

Connect each of the objects to TableViewCell creating @IBOutlet

Now lets get into coding by creating several datasets here. There are several arrays created here where image contains the image of each properties, property contains the name of each area and developer contains the name of developer in charge of the area.

class TableViewController: UITableViewController {

    let image = [UIImage(named: "westholme"),UIImage(named: "sierra"),UIImage(named: "rexford"),UIImage(named: "sunset"),UIImage(named: "clark"),UIImage(named: "cashio")]
    let property = ["Westholme Ave","Sierra Mar Dr","Rexford Dr","Sunset Plaza","S Clark Dr","Cashio St"]
    let developer = ["Nostromo Corp","Auriga Corp","Blue Sun","Tyrell Corp","Auriga Corp","Blue Sun"]
    override func viewDidLoad() {


Because we chose to create a new class using the UITableViewController subclass, it automatically inputs all the function that we needs. Here, we only need several functions.

    // MARK: - Table view data source

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return property.count

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        cell.propertyImage.image = image[indexPath.row]
        cell.titleLabel?.text = property[indexPath.row]
        cell.descriptionLabel?.text = developer[indexPath.row]
        return cell
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 95

With everything done properly, the end result should look like below. 

If you would like to use the functionality of the buttons. Simply create an @IBAction in TableViewCell

Now, if you click on the phone, it will print out Call. You could potentially add your function there. The project is available in GitHub


  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

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