Custom Section Header for UITableView

Recently two designs catch my attention as an iOS developer: Horizontal lists and custom section headers. Developers and designers make great effort on them since almost all the parts of an app are made up of table views. As horizontal lists is not the scope of this post I’m planning to focus only on making a custom section header.

To be honest making a custom section header does not require a big effort. We’re going to start with a TableViewController containing a TableViewCell. Based on your choice, you can start with either a TableViewController or by putting a TableView inside a ViewController. I have chosen the last one.

Next move will be to add a new xib file with its class. We’re going to design our section header in a different file. I love doing things part by part. I prefer using this methodology whether it’s easy or hard. In this case it’s a must. So add a Cocoa Touch class as a subclass of UITableViewHeaderFooterView. If you are used to create xib files with classes together you’re going to be surprised it’s not possible for this case. We should create an xib separately. You can do this from User Interface section. Choose View.

By the time you have added new xib you will realize that the view size is fixed. You should change the Size option from Inferred to Freeform in order to make the size of the view resizable. Now you are free to give shape to your section header. In this tutorial we’re going to add only two labels, one as a big title while the other one will be something like a subtitle. Put two labels on the view for this purpose after having a good shape.

We’re going fine. Needless to say, create the outlets of these labels inside your UITableViewHeaderFooterView subclass. I have given a name as CustomSectionHeader to this class. The outlets are named as titleLabel and subtitleLabel respectively. Now we’re done with these class and xib file. Nothing to do more. Only one work to do is that we should register this xib in our tableview. The last code you should add is as the following one:

When you run the final code you will see nothing 😅 We have some work to do. To see your custom section header of course you need to carry out the implementations which the table view require. You’ll find the whole project at the bottom of this post. The final view of the app should look like the one below:

The repository: https://github.com/onurtuna/custom-section-header