Use a custom .xib as a tableHeaderView

Customization

Creating a custom TableView for your project can be a tricky thing sometimes.. Endless customization options are at your fingertips when it comes to Apple UI and its honestly very fun to work with! Today I will be explaining how to use a custom .xib file as a tableViewHeader .

Initialize your TableView

To initialize a table view declare the variable like so let yourTableView = UITableView() . Now we have a tableView to work with!

Create a .xib

Click File -> New -> File , then this window will appear. Select View then click next and name your .xib file!

Open the .xib file and customize

The .xib file you just created will have a preloaded view ready for you to work with.. In this case we want to delete that view and add our own UI element to the file. Click the + button on the top right corner and search for / add a tableViewCell in the .xib. Now its time to do what you want and customize the cell! I’ll leave the creativity part up to you! Now go make a beautiful header :)

Show me the code!

After your file is ready go set the header in your view controllers class file. First you need to instantiate the .xib file. This will get your .xib ready to go!

let yourTableViewHeader = (Bundle.main.loadNibNamed(“YourTableViewHeader”, owner: self, options: nil)![0] as? UIView)

After thats done, set the header yourTableViewHeader.tableHeaderView = yourTableViewHeader

Enjoy this tutorial on how to set a tableViewHeader the “old” way (pre SwiftUI) ! If this helped you please let us know!