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

October 20, 2017

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

  override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        tableView = UITableView(frame: view.bounds, style: .grouped)
        tableView?.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        tableView?.dataSource = self
        tableView?.delegate = self
        tableView?.autoresizingMask = [.flexibleWidth , .flexibleHeight]
        tableView?.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
        view.addSubview(tableView!)
    
    }

(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

   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell:UITableViewCell = self.tableView!.dequeueReusableCell(withIdentifier: "cell")!
        cell.textLabel?.text = "Cell \(indexPath.row)"
        return cell
    }

(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

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let label = UILabel()
        label.text = "Section 0 Header"
        label.backgroundColor =  UIColor.darkGray
        
        return label
    }

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

  func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 30
    }

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

   func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let label = UILabel()
        label.text = "Section 0 Footer"
         label.backgroundColor = UIColor.darkGray
        return label
    }

Now you can set the height of the footer row

 func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 30
    }

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