Design UITableView’s section header in Interface Builder

#Storyboard or XIB. Updated for 2020.

1. Same Storyboard:

    return tableView.dequeueReusableCell(withIdentifier: "header")
   

   

2. Separate XIB (Additional step: you must register that Nib first):

    tableView.register(UINib(nibName: "XIBSectionHeader", bundle:nil),
                       forCellReuseIdentifier: "xibheader")
   

To load from a Storyboard instead of a XIB, see this Stack Overflow answer.

---

#Using UITableViewCell to create Section Header in IB

Take advantage of the fact that a section header is a regular UIView, and that UITableViewCell is, too, a UIView. In Interface Builder, drag & drop a Table View Cell from the Object Library onto your Table View Prototype Content.

(2020) In modern Xcode, simply increase the “Dynamic Prototypes” number to drop in more cells:

Add an Identifier to the newly added Table View Cell, and customize its appearance to suit your needs. For this example, I used header.

Use dequeueReusableCell:withIdentifier to locate the cell, just like you would any table view cell.

Don’t forget it is just a normal cell: but you are going to use it as a header.

For 2020, simply add to ViewDidLoad the four lines of code:

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 70   // any reasonable value is fine
tableView.sectionHeaderHeight =  UITableView.automaticDimension
tableView.estimatedSectionHeaderHeight = 70 // any reasonable value is fine

{See for example this for a discussion.}

Your header cell heights are now completely dynamic. It’s fine to change the length of the texts, etc, in the headers.

(TiP: Purely regarding the storyboard: simply select…

…in storyboard, so that the storyboard will work correctly. This has absolutely no effect on the final build. Selecting that checkbox has absolutely no effect whatsoever on the final build. It purely exists to make the storyboard work correctly, if the height is dynamic.)

---

In older Xcode, or, if for some reason you do not wish to use dynamic heights:

simply supply heightForHeaderInSection, which is hardcoded as 44 for clarity in this example:

//MARK: UITableViewDelegate
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
{
    // This is where you would change section header content
    return tableView.dequeueReusableCell(withIdentifier: "header")
}

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

---

###Swift 2 & earlier:

return tableView.dequeueReusableCellWithIdentifier("header") as? UIView
self.tableView.registerNib(UINib(nibName: "XIBSectionHeader", bundle:nil),
    forCellReuseIdentifier: "xibheader")

---

► Find this solution on GitHub and additional details on Swift Recipes.