Swift Add Footer View In UITableView

Question

This is actually a tableview and tableview cell, and i wanted to add a Submit button after the end of the tableview cell, but how do i do it?

I tried to do it at the storyboard add the button manually, but its not working, the button is not showing. Is there any other way to do it?

I wanted to do like the screenshot below.

Solution 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 table view hierarchy as a subview. Now, you can add the label button on that View, you can also set IBAction into ViewController Class File.

Programmatically

Follow 3 Steps

1. Make one custom view with button,

Swift 3.X / Swift 4.X

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)
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
customView.addSubview(button)

Swift 2.X

let customView = UIView(frame: CGRectMake(0, 0, 200, 50))
customView.backgroundColor = UIColor.redColor()
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
button.setTitle("Submit", forState: .Normal)
button.addTarget(self, action: #selector(buttonAction), forControlEvents: .TouchUpInside)
customView.addSubview(button)

2. Add that view in Table Footer View.

Swift 2.X/Swift 3.X/Swift 4.X

myTblView.tableFooterView = customView

3. you can do action on that button in same class.

Swift 3.X/Swift 4.X

@objc func buttonAction(_ sender: UIButton!) {
    print("Button tapped")
}

Swift 2.X

func buttonAction(sender: UIButton!) {
  print("Button tapped")
}

Solution 2

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

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

Solution 3

Swift 3/4

1. If you want to add Table footer which is only visible at the end of TabelView

let customView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 150))
customView.backgroundColor = UIColor.clear
let titleLabel = UILabel(frame: CGRect(x:10,y: 5 ,width:customView.frame.width,height:150))
titleLabel.numberOfLines = 0;
titleLabel.lineBreakMode = .byWordWrapping
titleLabel.backgroundColor = UIColor.clear
titleLabel.textColor = PTConstants.colors.darkGray
titleLabel.font = UIFont(name: "Montserrat-Regular", size: 12)
titleLabel.text  = "Payment will be charged to your Apple ID account at the confirmation of purchase. Subscription automatically renews unless it is canceled at least 24 hours before the end of the current period. Your account will be charged for renewal within 24 hours prior to the end of the current period. You can manage and cancel your subscriptions by going to your account settings on the App Store after purchase."
customView.addSubview(titleLabel)
tableView.tableFooterView = customView

2. If you want to add section footer which is visible while scrolling through section.

Adopt UITableViewDelegate and implement following delegate method.

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let vw = UIView()
    vw.backgroundColor = UIColor.clear
    let titleLabel = UILabel(frame: CGRect(x:10,y: 5 ,width:350,height:150))
    titleLabel.numberOfLines = 0;
    titleLabel.lineBreakMode = .byWordWrapping
    titleLabel.backgroundColor = UIColor.clear
    titleLabel.font = UIFont(name: "Montserrat-Regular", size: 12)
    titleLabel.text  = "Footer text here"
    vw.addSubview(titleLabel)
    return vw
}

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

Solution 4

Add UILabel as UITableView.Footer in swift

    let footerView:UILabel = UILabel(frame: CGRect(x: 0, y: 0, width:320 , height: 500))
    footerView.text = "add description ro Timevc in order user will see the result of lesson time"
    footerView.numberOfLines = 0;
    footerView.sizeToFit()
    tableView.tableFooterView = footerView
    tableView.contentInset = (UIEdgeInsetsMake(0, 8, -footerView.frame.size.height, 8))

View more solutions