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.

inherit the [UITableViewHeaderFooterView](https://developer.apple.com/documentation/uikit/uitableviewheaderfooterview) when create your custom footer view. And init it with [dequeueReusableHeaderFooterViewWithIdentifier](https://developer.apple.com/documentation/uikit/uitableview/1614975-dequeuereusableheaderfootervieww) — Quoc Nguyen, Aug 31 '18 at 06:30
@NiravD I have not done any coding in Footerview class.. It's just xib. Class is inherited from UIView. Have added code in question. — Krutika Sonawala, Aug 31 '18 at 06:35
@QuocNguyen UITableViewHeaderFooterView not allowing to set class name in xib. — Krutika Sonawala, Aug 31 '18 at 06:36
@KrutikaSonawala, why you need to use xib let me know that for tableview, are you use viewController? — Nikunj Kumbhani, Aug 31 '18 at 06:46
I think the answer to this question may give you a hint on how to add the footer: https://stackoverflow.com/questions/50927391/modify-distance-of-tablefooterview-to-both-last-cell-of-tableview-and-tableview — regina_fallangi, Aug 31 '18 at 07:46

Nikunj Kumbhani · Accepted Answer · 2018-08-31T07:31:29.810

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:

wow! thank you so much! I have not used instanceFromNib. Is it necessary? is there any other way? — Krutika Sonawala, Aug 31 '18 at 08:35
@KrutikaSonawala Most welcome :) yes it's necessary when you use the xib same like as identifier. — Nikunj Kumbhani, Aug 31 '18 at 08:59

score 2 · Answer 2 · answered Aug 31 '18 at 07:10

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.

E.G.: (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
}

section footers are totally different from table footers – Fattie Jun 22 '23 at 18:36 — Fattie, Jun 22 '23 at 18:36

score -1 · Answer 3 · answered Oct 04 '19 at 13:08

 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
}

How to display custom footer view in table?

3 Answers3