Custom header view from xib for UITableView
In this step by step tutorial we will create a custom header view to use in UITableView and it will be loaded from xib file.
Creating the UITableViewHeaderFooterView class and xib
1- First of all create a new Swift file and make it subclass of UITableViewHeaderFooterView and name it “DemoHeaderView”
2- Next create an empty xib file and give it the same name as the Swift file “DemoHeaderView”
3- Add a UIView to the xib file and from its “Attributes inspector” set its “Size” property to “Freeform”.
4- Go to “Size inspector” and adjust the “Height” to whatever you want, for example 100.
5- Go to “Identity inspector” and set “Class” property to the Swift class “DemoHeaderView”, your view now should look like this
6- Now add another UIView as subview to the main view then inside it add UILabel
7- Press “Show the Assistant editor” to display the Swift file side by side with the xib file then control+click and drag from your label to the Swift “DemoHeaderView” class to create IBOutlet for your label and name it “lblTitle”
8- Take some time customizing the look of your header view and at the end it should be something like that
Register and use UITableViewHeaderFooterView in UITableView
9- Now our custom header is ready but first we must register it with our table, add the following code to your view controller in viewDidLoad() function
let headerNib = UINib.init(nibName: "DemoHeaderView", bundle: Bundle.main)
tblItems.register(headerNib, forHeaderFooterViewReuseIdentifier: "DemoHeaderView")
10- Use your header view by adding the following function
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "DemoHeaderView") as! DemoHeaderView
headerView.lblTitle.text = "Grocery"
return headerView
}
11- Configure the header view height by adding this function
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 100
}
You are done, press run and you shall see your custom header on top of your table view
You can download the complete project from this link
mosa abuzaid -
really thank you, you saved my day
Phung -
really thank you, you saved my life!