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.

You want the button to be scrollable as a TableView's content or be always visible below the TableView ? — Arnaud Christ, Jul 04 '16 at 07:03

Ujesh · Accepted Answer · 2020-02-27T14:10:42.780

91

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

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)

Add that view in Table Footer View.

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

myTblView.tableFooterView = customView

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")
}

edited Feb 27 '20 at 14:10

answered Jul 04 '16 at 07:09

Ujesh

1,698
2
23
35

footer, not header – Siam Jul 04 '16 at 07:26
@mimi93 i update code, just give backgroundColor and update frame. Please Check – Ujesh Jul 04 '16 at 09:08
@Theorist its still not working, is it because of my custom tableview cell? – minimomo Jul 04 '16 at 09:24
can you please add the code for the headerView too just for completion.. – nyxee Jul 24 '17 at 11:14
@nyxee it's same code just change line myTblView.tableHeaderView = customView – Ujesh Jul 24 '17 at 13:39
thanks. I had done that. but, i tried to add the same view to the header and footer and saw nothing (for testing purposes), although i will just create another view and make it a footer. on another note, how can we make these views stick to the upper and lower edges. I already have a solution where I put the vies inside the view controller but outside the tableView. any hints... – nyxee Jul 24 '17 at 18:32
thanks. I had done that. but, i tried to add the same view to the header and footer and saw nothing (for testing purposes), although i will just create another view and make it a footer. on another note, how can we make these views stick to the upper and lower edges. I already have a solution where I put the vies inside the view controller but outside the tableView. any hints... – nyxee Jul 24 '17 at 18:32
yes, that's fine. outside table view is always sticky. and another way is table section header and footer view with is sticky only when section rows are visible. – Ujesh Jul 25 '17 at 08:46
For xibs: @Douglas say you need drag (view or cell) on top corner to work – iTSangar May 17 '18 at 20:01
@iTSangar Drag on the table view not on cell – Ujesh May 18 '18 at 06:24
@Ujesh: For iPhoneX, the custom footerView show bottom transparent space, have you found any solution for that? is there any way to manage iPhoneX bottom margin space? – Kampai Feb 05 '19 at 10:50

score 20 · Answer 2 · answered Apr 04 '19 at 10:11

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
}

The add Table footer which is only visible at the end of TabelView works perfectly. Thank you! — Simon McNeil, Jul 07 '20 at 13:37

score 18 · Answer 3 · answered Jun 20 '18 at 12:50

18

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
}

answered Jun 20 '18 at 12:50

K.Gowri Manohari

391
3
8

Can you provide more context to your code? There's an accepted answer with 35 upvotes, and by adding a new answer, you should tell us what your code solves better than the other – Nico Haase Jun 20 '18 at 13:09
1

Excellent answer. @NicoHaase the guy was trying to help, jeez. – Adam Jan 27 '19 at 02:21
10

Footer in section and tableview footer are 2 different things. The first one will be visible while scrolling the section but the later will be added at the end of tableview and visible only at end. – Abhijith Apr 04 '19 at 09:35

score 4 · Answer 4 · answered Nov 19 '18 at 10:18

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))

answered Nov 19 '18 at 10:18

Bary Levy

584
5
6

1

Width of UILabel is hardcoded. Please make it dynamic as per screen sizes – Hrishikesh Devhare May 29 '19 at 15:58

score 1 · Answer 5 · edited Jul 31 '22 at 03:13

// for Header and footer 


// for header

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let HeaderView = UIView(frame: CGRect(x: 0, y: 0, width: TableViews.frame.size.width, height: 10))
    HeaderView.backgroundColor = .green
    let HeaderTitle = UILabel(frame: CGRect(x: 10, y: 10, width: TableViews.frame.size.width, height: 20))
    HeaderTitle.text = "Hi You Welcome"
    HeaderView.addSubview(HeaderTitle)
    return HeaderView
}
    
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { 40 }
   
    // for footer 

    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footer = UIView()
    footer.backgroundColor = UIColor.green
    let titleLabel = UILabel(frame: CGRect(x: 10, y: 5, width: 350, height: 30))
    titleLabel.textColor = .blue
    titleLabel.text  = "Hi I am Muhammad Hassan"
    footer.addSubview(titleLabel)
    return footer
}

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

... this is the best function for the header and footer ...

score 0 · Answer 6 · answered Jun 30 '22 at 08:01

0

You can use

tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 16, right: 0)

answered Jun 30 '22 at 08:01

Artem Zaytsev

1,621
20
19

Swift Add Footer View In UITableView

6 Answers6

Linked