Customizing Header and Footer of Table View in iOS8 with Swift

In a Table View you can customize the header and footer by replacing these with your own custom views. In this tutorial we are going to fill the table with some sample country names and use custom UIViews to create a header and a footer of our Table View. This tutorial is built in iOS 8.1 and Xcode 6.1

Open Xcode and create a new Single View Application. For product name, use IOS8SwiftHeaderFooterTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices. 

Remove the View Controller from the Storyboard and drag a Table View Controller to the empty canvas. Go to the Editor menu and select Embed In NavigationController. Double-click on the Navigation Bar in The Table View Controller and set the title to "Countries".  Select the Table View Cell and go to the Attributes Inspector. In the Table View Cell section set the Identifier  to "Cell".

Since we have deleted the View Controller from the Storyboard we can also delete the ViewController.swift file. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it TableViewController and make it a subclass of UITableViewController.

The TableViewController class needs to be linked to The Table View Controller object in the Storyboard. Select it and go the Identity Inspector. Change the custom class to TableViewController.

Go to TableViewController.swift and create the following properties

var countriesinEurope = ["France","Spain","Germany"]
var countriesinAsia = ["Japan","China","India"]
var countriesInSouthAmerica = ["Argentia","Brasil","Chile"]

Change the following delegate methods

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
      // 1
      // Return the number of sections.
      return 3

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
      // 2
      return 3

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
      let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! UITableViewCell
      // 3
      // Configure the cell...
      switch (indexPath.section) {
      case 0:
        cell.textLabel?.text = countriesinEurope[indexPath.row]
      case 1:
        cell.textLabel?.text = countriesinAsia[indexPath.row]
      case 2:
        cell.textLabel?.text = countriesInSouthAmerica[indexPath.row]
        //return sectionHeaderView
        cell.textLabel?.text = "Other"
      return cell

  1. Every continent is a sections so we have 3 sections in our Table View
  2. Each array contains 3 countries so the number of rows per section will also be 3
  3. For each section the names of the countries are assigned to the text label of the cell

Build and Run the project, the countries will be displayed in a Table View

We will add a header and a footer for each section in  our Table View. This can be done inside Interface Builder or by code. Let's first create the header with Interface Builder. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it CustomHeaderCell and make it a subclass of UITableViewCell.

Go to the Storyboard and Select the Table View. Go to the Attribute Inspector and change the number of Prototype Cell to 2.

A new Prototype Cell is displayed below the first one. Select the prototype Cell and go to the Identity Inspector. Change the custom class to CustomHeaderCell

Go to the Attribute Inspector and change the Cell Identifier to HeaderCell

Drag a Label from the Object Library to the Prototype Cell. Select it and center to horizontally and vertically using Auto Layout. Open The Assistant Editor and make sure the CustomHeaderCell.swift file is visible. Ctrl And Drag from the Label to the CustomHeaderCell class and create the following Outlet

Go to ViewController.swift and add the following method

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let  headerCell = tableView.dequeueReusableCellWithIdentifier("HeaderCell") as! CustomHeaderCell
    headerCell.backgroundColor = UIColor.cyanColor()
    switch (section) {
    case 0:
      headerCell.headerLabel.text = "Europe";
      //return sectionHeaderView
    case 1:
      headerCell.headerLabel.text = "Asia";
      //return sectionHeaderView
    case 2:
      headerCell.headerLabel.text = "South America";
      //return sectionHeaderView
      headerCell.headerLabel.text = "Other";
    return headerCell

We iterate through the CustomHeaderCells at each Section. The background is changed to cyan and the label's text is changed according to the section number. Let's also create a section  footer for our Table View. Create the following methods

override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerView = UIView(frame: CGRectMake(0, 0, tableView.frame.size.width, 40))
    footerView.backgroundColor = UIColor.blackColor()
    return footerView
  override func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 40.0

A View is created with a height of 40 and a black backgroundColor. The tableView:heightForFooterInSection method sets the actual height. Build and Run the project and the new Header and Footer section will be visible.

You can download the source code of the IOS8SwiftHeaderFooterTutorial at the ioscreator repository on Github