How to display custom footer view in table?

Question

I have created a UIview class Xib to display it in footer view of my table.

import UIKit

/// This class is to display footer view in a settings table view
class FooterView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

I'm displaying it as below:

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let view = FooterView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 140))
    return view
}

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 100
}

What's wrong with this? I'm not able to see the footer view and getting so much space between the tableview rows.

Answer 1

Using StoryBoard

In UITableView You can drag UIView , it will set as FooterView if you have more then 0 prototype cell. After Drag you can see it in tableview hierarchy as subview. Now, you can add UILabel UIButton or any component on that View, adjust the height, etc. You can also set IBAction into ViewController Class File.

Programmatically

let customView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
customView.backgroundColor = UIColor.red
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
button.setTitle("Submit", for: .normal)
customView.addSubview(button)

//Add that view in Table Footer View.
tableView.tableFooterView = customView // Here you can also use your xib View.

By using XIB

class MyClass: UIView {

    class func instanceFromNib() -> UIView {
        return UINib(nibName: "nib file name", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! UIView
    }
}

Initialise the view and use it like below

let FooterView = MyClass.instanceFromNib()
tableView.tableFooterView = FooterView

Output:

Answer 2

Explanation why your have empty spacing: it is caused by your heightForFooterInSection method that leaves 100 pixels for footerView. Unfortunately you haven't register the Nib of the FooterView for your tableView and it does not know what to retrieve in this place.

How to solve your issue: In your ViewController you need to register the Nib of the FooterView to be used by your tableView .

EG: (Note you need to set reuseIdentifier in for your footerView.

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.register("FooterView", forHeaderFooterViewReuseIdentifier: "FooterView")
}

After this you can dequeue the footerView in a similar fashion as a cell:

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "FooterView")
    return footerView
}

Answer 3

 func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {

     let myFooter =  Bundle.main.loadNibNamed("ReportFooterCell", owner: self, options: nil)?.first as! ReportFooterCell

    myFooter.toWorkHours?.text = toWorkHour.toString()
    myFooter.workedHours?.text = workedHour.toString()

     return myFooter
}

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 40
}