CustomCell with UITableViewController in Swift

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

(8) Add the images to Assets.xcassets

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

(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

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

(12) Add the following function too

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.

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

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

Leave a Reply

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