Add Header and Footer to UITableView in Swift 3 (XCODE 8.3)

In this tutorial I am going to show you how to add Header and Footer to UITableView using Swift. So you can reuse this code when you develop the iOS applications

At the end of the tutorial you can build single view application like this

(1) First create a single view application from the XCODE editor

(2) In your ViewController.swift file, create variable for UITableView
var tableView: UITableView?

Inside the viewDidLoad() function
Create UITableView object. You can create the grouped table view by passing the parameters
tableView = UITableView(frame: view.bounds, style: .grouped) and also set the frame boundaries
Then register the UITableViewCell giving it identifier name
tableView?.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
Set the datasource and delegate properties
tableView?.dataSource = self
tableView?.delegate = self
You can add following code for resizing and setting the distance from top of the view controller
tableView?.autoresizingMask = [.flexibleWidth , .flexibleHeight]
tableView?.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
Finally you can add the tableView to view
view.addSubview(tableView!)

You can see the complete code below

(3) To work with UITableView you need two protocols UITableViewDelegate and UITableViewDataSource
So you can add UITableViewDelegate and UITableViewDataSource to following line of code
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

(4) Loading cell data to UITabelView
You can use following two methods to load cell data to the UITabelView

(5) Run your application now
Now you can run the application and see whether you get a screen like this

(6) Add the header row
You can use the following code to add header row to tableView. I am creating UILabel and setting the text and background property of it

Also you have to set the height of the header using following method.

(7) Add the footer row
This is same like the header function

Now you can set the height of the footer row

(8) Run your application now
Now you can run the application and see the screen

Leave a Reply

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