CustomCell with UITableViewController in Swift

October 10, 2017

In this tutorial I am going to show you how to create Custom Cell with UITableViewController in your iOS application.
Lets see how we can build the following UITableViewController application with Swift
In the following example I am going to create Custom Cell with Logo and the name of the company
If you are not familiar with UITableView please have a look at this tutorial

(1) First you create Single View application from XCODE editor
(2) Delete the View Controller in your storyboard and add UITableViewController to your storyboard

(3) Now make the newly added UITableViewController as the initial view controller in your application
This can be done by opening attribute inspector as shown in the below image

(4) Next I am going to change the name of file and class as shown in the following image
Change the ViewController.swift to TableViewController.swift
Change ViewController class to the TableViewController
Change UIViewController to UITableViewController

Set the name of the class as TableViewController under custom class in identity inspector window

(5) Next step is to create custom cell to hold logo and text
Go to File > New > File..
Then select the Cocoa Touch Class under iOS and click Next
Now you can type TableViewCell and select the Subclass of UITableViewCell and check on Also Create XIB file

(6) Open the TableViewCell.xib file and drag and drop the UIImageView and UILabel control

(7) Create two outlets for UIImageView and UILable

@IBOutlet weak var logo: UIImageView!
@IBOutlet weak var name: UILabel!

(8) Add the images to Assets.xcassets

(9) Now you can add the TableViewCell to TableViewController
In TableViewController.swift create the Struct

struct Company {
    let name: String
    let logo: UIImage!
}

(10) Now you can create array in TableViewController.swift to hold companies with image and text. Here I am using image literals with the assets created earlier

 var companies: [Company] = [Company(name :"Apple", logo : #imageLiteral(resourceName: "if_Apple_2613287")),
                                Company(name :"Paypal", logo : #imageLiteral(resourceName: "if_Paypal_2613302")),
                                Company(name :"Youtube", logo : #imageLiteral(resourceName: "if_YouTube_2613309")),
                                Company(name :"Skype", logo : #imageLiteral(resourceName: "if_Skype_2613270")),
                                Company(name :"Twitter", logo : #imageLiteral(resourceName: "if_Twitter_2613290"))]

(11) Create the following function to return number of rows in the array

   override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       return companies.count
    }

(12) Add the following function too

   override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell =  Bundle.main.loadNibNamed("TableViewCell", owner: self, options: nil)?.first as! TableViewCell
        cell.name.text=companies[indexPath.row].name
        cell.logo.image=companies[indexPath.row].logo
        
        return cell
        
    }

In this function, you are loading the TableViewCell object from the XIB file which we created and assign name and logo

(13) In this following method I am going to set the row height of the TableViewCell.

 override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 90
    }

(14) This is the completed code of the TableViewController.swift file

import UIKit

struct Company {
    let name: String
    let logo: UIImage!
}

class TableViewController: UITableViewController {
    var companies: [Company] = [Company(name :"Apple", logo : #imageLiteral(resourceName: "if_Apple_2613287")),
                                Company(name :"Paypal", logo : #imageLiteral(resourceName: "if_Paypal_2613302")),
                                Company(name :"Youtube", logo : #imageLiteral(resourceName: "if_YouTube_2613309")),
                                Company(name :"Skype", logo : #imageLiteral(resourceName: "if_Skype_2613270")),
                                Company(name :"Twitter", logo : #imageLiteral(resourceName: "if_Twitter_2613290"))]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       return companies.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell =  Bundle.main.loadNibNamed("TableViewCell", owner: self, options: nil)?.first as! TableViewCell
        cell.name.text=companies[indexPath.row].name
        cell.logo.image=companies[indexPath.row].logo
        
        return cell
        
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 90
    }
    


}

(15) Now you can run the application and see the following screen in your simulator