Swift - how to make custom header for UITableView?
IosObjective CSwiftUitableviewIos Problem Overview
I need to add custom header to my table
I try this
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 18))
let label = UILabel(frame: CGRect(x: 20, y: 20, width: 50, height: 50))
label.text = "TEST TEXT"
label.textColor = UIColor.whiteColor()
self.view.addSubview(view)
return view
}
but this doesn't work, I see nothing on table
What am I doing wrong ? Or maybe there is another ways ?
Ios Solutions
Solution 1 - Ios
The best working Solution of adding Custom header view in UITableView for section in swift 4 is --
#1 first Use method ViewForHeaderInSection as below -
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: tableView.frame.width, height: 50))
let label = UILabel()
label.frame = CGRect.init(x: 5, y: 5, width: headerView.frame.width-10, height: headerView.frame.height-10)
label.text = "Notification Times"
label.font = .systemFont(ofSize: 16)
label.textColor = .yellow
headerView.addSubview(label)
return headerView
}
#2 Also Don't forget to set Height of the header using heightForHeaderInSection UITableView method -
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 50
}
and you're all set 
Solution 2 - Ios
Did you set the section header height in the viewDidLoad?
self.tableView.sectionHeaderHeight = 70
Plus you should replace
self.view.addSubview(view)
by
view.addSubview(label)
Finally you have to check your frames
let view = UIView(frame: CGRect.zeroRect)
and eventually the desired text color as it seems to be currently white on white.
Solution 3 - Ios
If you are using custom cell as header, add the following.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView()
let headerCell = tableView.dequeueReusableCell(withIdentifier: "customTableCell") as! CustomTableCell
headerView.addSubview(headerCell)
return headerView
}
If you want to have simple view, add the following.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView:UIView = UIView()
return headerView
}
Solution 4 - Ios
This worked for me - Swift 3
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerCell = tableView.dequeueReusableCell(withIdentifier: "customTableCell") as! CustomTableCell
return headerCell
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 40
}
Solution 5 - Ios
If you are willing to use custom table header as table header, try the followings....
Updated for swift 3.0
Step 1
Create UITableViewHeaderFooterView for custom header..
import UIKit
class MapTableHeaderView: UITableViewHeaderFooterView {
@IBOutlet weak var testView: UIView!
}
Step 2
Add custom header to UITableView
override func viewDidLoad() {
super.viewDidLoad()
tableView.delegate = self
tableView.dataSource = self
//register the header view
let nibName = UINib(nibName: "CustomHeaderView", bundle: nil)
self.tableView.register(nibName, forHeaderFooterViewReuseIdentifier: "CustomHeaderView")
}
extension BranchViewController : UITableViewDelegate{
}
extension BranchViewController : UITableViewDataSource{
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 200
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = self.tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeaderView" ) as! MapTableHeaderView
return headerView
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section:
Int) -> Int {
// retuen no of rows in sections
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// retuen your custom cells
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
}
func numberOfSections(in tableView: UITableView) -> Int {
// retuen no of sections
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
// retuen height of row
}
}
Solution 6 - Ios
add label to subview of custom view, no need of self.view.addSubview(view), because viewForHeaderInSection return the UIView
view.addSubview(label)
Solution 7 - Ios
I have had some problems in Swift 5 with this. When using this function I had a wrong alignment with the header cell:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerCell = tableView.dequeueReusableCell(withIdentifier: "customTableCell") as! CustomTableCell
return headerCell
}
The cell view was shown with a bad alignment and the top part of the tableview was shown. So I had to make some tweak like this:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView.init(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 90))
let headerCell = tableView.dequeueReusableCell(withIdentifier: "YOUR_CELL_IDENTIFIER")
headerCell?.frame = headerView.bounds
headerView.addSubview(headerCell!)
return headerView
}
I am having this problem in Swift 5 and Xcode 12.0.1, I don't know if it is just a problem for me or it is a bug. Hope it helps ! I have lost a morning...