Swift Add Footer View In UITableView - ios

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.

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

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
}

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
}

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

// 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 ...

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

Related

Swift 5 - UIButtons Side by side in tableView footer with original separator line

I am trying to add two buttons programmatically side by side (on the bottom left) in the tableView footer.
The issue that I am having is that I have to manually draw the separator line when defining the tableView footer because the separator line disappears.
How can I simply add two buttons to the bottom left of the tableView footer without loosing the original separator line?
var terms_button = UIButton()
var policy_button = UIButton()
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
//terms button
terms_button = UIButton(frame: CGRect(x: 70, y: 0, width: 100, height: 50))
terms_button.setTitle("Terms", for: .normal)
terms_button.setTitleColor(UIColor.black, for: .normal)
terms_button.titleLabel?.font = UIFont.roboto(size: 12, weight: .medium)
terms_button.titleLabel?.alpha = 0.38
terms_button.addTarget(self,action: #selector(didTapTermsButton),for: .touchUpInside)
//policy button
policy_button = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
policy_button.setTitle("Privacy Policy", for: .normal)
policy_button.setTitleColor(UIColor.black, for: .normal)
policy_button.titleLabel?.font = UIFont.roboto(size: 12, weight: .medium)
policy_button.titleLabel?.alpha = 0.38
policy_button.addTarget(self,action: #selector(didTapPolicyButton),for: .touchUpInside)
let result = UIView()
// recreate insets from existing ones in the table view
let insets = tableView.separatorInset
let width = tableView.bounds.width - insets.left - insets.right
let sepFrame = CGRect(x: insets.left, y: -0.5, width: width, height: 0.5)
// create layer with separator, setting color
let sep = CALayer()
sep.frame = sepFrame
sep.backgroundColor = tableView.separatorColor?.cgColor
result.layer.addSublayer(sep)
result.addSubview(policy_button)
result.addSubview(terms_button)
return result
}
When you are returning your own let result = UIView() view instance from viewForFooterInSection, you are discarding the original built-in default view provided by the iOS.
What you can attempt is -
delete the viewForFooterInSection implementation
try to use default built-in view provided by iOS
try to customize default view's appearance like following
func tableView(_ tableView: UITableView, willDisplayFooterView view: UIView, forSection section: Int) {
guard let footerView = view as? UITableViewHeaderFooterView else { return }
let contentView = footerView.contentView
// Try adding your buttons to this `contentView`
}
This is the only way to try to keep using built-in view with possible customizations. If this doesn't work reliably across different iOS versions, you would need to go back to viewForFooterInSection custom view implementation.

Altering table cell header on action in swift

I have a header in my sectioned table view that contains a button that expands its cells when tapped, I have a right ward facing arrow in the header as well, and when the header is tapped I want to change that arrow image to a downward facing arrow, how can I alter the section's header? Specifically the arrowButton
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 50))
let button = UIButton(frame: CGRect(x: 0, y: 0, width: tableView.frame.width - 30, height: 50))
button.setTitle(tableDataSource[section][0].mod.modType!, for: .normal)
button.titleLabel?.font = UIFont(name: "Helvetica neue", size: 20)
button.addTarget(self, action: #selector(headerPressed(sender:)), for: .touchUpInside)
button.titleLabel?.textAlignment = .left
button.tag = section
let arrowButton = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
arrowButton.setImage(UIImage(systemName: "chevron.right", compatibleWith: nil), for: .normal)
header.addSubview(arrowButton)
header.addSubview(button)
header.backgroundColor = UIColor.green
return header
}
#objc func headerPressed(sender: UIButton){
if(tableDataSource[sender.tag][0].clicked == false){
tableDataSource[sender.tag][0].clicked = true
} else {
tableDataSource[sender.tag][0].clicked = false
}
let sections = IndexSet.init(integer: sender.tag)
tableView.reloadSections(sections, with: .fade)
}
You need to change this inside viewForHeaderInSection
let name = tableDataSource[section][0].clicked ? "chevron.right" : "chevron.left"
arrowButton.setImage(UIImage(systemName:name, compatibleWith: nil), for: .normal)
And calling this tableView.reloadSections(sections, with: .fade) will do the reload job

How to add two UIButtons in Tableview section header

I added custom tableview header with two buttons, but buttons are disabled , unable to make control events. i want to get layout like this. i'm new to development. any suggestions or solution
i tried to add view with buttons inside view in ViewforHeaderSection function
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let inviteSectionHeaderview = UIView.init(frame: CGRect(x:0, y:0, width: self.view.bounds.width, height: self.view.bounds.height))
let selectAllBtn = UIButton.init(frame:CGRect(x:16, y: inviteSectionHeaderview.bounds.height/2, width:130, height:20))
let sendButton = UIButton.init(frame:CGRect(x:inviteSectionHeaderview.bounds.width - 30, y: inviteSectionHeaderview.bounds.height/2, width:60, height:20))
selectAllBtn.setTitle("select all/Cancel", for: .normal)
selectAllBtn.backgroundColor = .black
sendButton.backgroundColor = .black
sendButton.setTitle("SEND", for: .normal)
self.contactsTable.addSubview(inviteSectionHeaderview)
inviteSectionHeaderview.addSubview(selectAllBtn)
inviteSectionHeaderview.addSubview(sendButton)
return inviteSectionHeaderview
}
You have two options:
Create your UIView in storyboard
Create programatically
Option 2
Create your UIView.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 30.0))
// Button1
let button1 = UIButton(frame: CGRect(x: 15.0, y: 0, width: 100, height: 28.0)
button1.setTitle("Button 1", for: .normal)
button1.addTarget(self, action: #selector(selectorButton1), for: .touchUpInside)
// Button2
let button2 = UIButton(frame: CGRect(x: tableView.frame.width-150, y: 0, width: 150, height: 30.0))
button2.setTitle("Button2", for: .normal)
button2.addTarget(self, action: #selector(selectorButton2), for: .touchUpInside)
button2.semanticContentAttribute = UIApplication.shared
.userInterfaceLayoutDirection == .rightToLeft ? .forceLeftToRight : .forceRightToLeft
headerView.addSubview(button1)
headerView.addSubview(button2)
return headerView
}
#objc func selectorButton1(_ sender : Any) {
}
#objc func selectorButton2(_ sender : Any) {
}
In this case, you must set correctely y and x positions when create UIView(frame: CGRect()) and UIButton(frame: CGRect())
EDIT
From your code, you just need add the targets:
selectAllBtn.addTarget(self, action: #selector(selectorAllBtn), for: .touchUpInside)
sendButton.addTarget(self, action: #selector(selectorSendButton), for: .touchUpInside)
#objc func selectorAllBtn(_ sender : Any) {
}
#objc func selectorSendButton(_ sender : Any) {
}
You can try this code.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
var headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "headerView")
if headerView == nil {
headerView = UITableViewHeaderFooterView(reuseIdentifier: "headerView")
let button1 = UIButton(frame: CGRect(x: 8, y: 8, width: 80, height: 40))
button1.setTitle("Select", for: .normal)
button1.addTarget(self, action: #selector(self.buttonAction), for: .touchUpInside)
headerView?.addSubview(button1)
}
return headerView
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 50 // set a height for header view
}
#objc func buttonAction(_ sender: UIButton) {
// write your code...
}

Programmatically adding constraints to a UITableView header

I have a header on my tableview, which has an image and a label. I want to center the UIImage and have the label pinned underneath it. This is my code currently:
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerLabel = UILabel()
let logoView = UIImageView()
headerLabel.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 21)
headerLabel.text = self.navigationItem.title
headerLabel.textColor = UIColor.white
headerLabel.backgroundColor = UIColor.clear
headerLabel.textAlignment = NSTextAlignment.center
logoView.frame = CGRect(x: 0, y: 0, width: 90, height: 90)
let logo: UIImage = UIImage(named: self.navigationItem.title!)!
logoView.image = logo
logoView.contentMode = .scaleAspectFill
view.addSubview(headerLabel)
view.addSubview(logoView)
return topView
}
This puts the label centered on the top of the header, and the logo in the top left corner. How can I add constraints (programmatically, no storyboard) to center the image and pink the label below it? I've been using programmatic constraints quite a bit (i.e. something.leftAnchor.constraint(equalTo....) but I'm not sure how to apply it in this situation as it's my first use of a header.
I want to center the UIImage and have the label pinned underneath it.
This can be achieved by making the framing logic of each subview dependent of the neighbouring views. Whilst doing this programmatically, one has to be extra careful about the geometric calculations involved.
This snippet should do it:
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let logoView = UIImageView()
logoView.frame = CGRect(x: tableView.center.x - 90/2, y: 0, width: 90, height: 90)
let logo: UIImage = UIImage(named: self.navigationItem.title!)!
logoView.image = logo
logoView.contentMode = .scaleAspectFill
view.addSubview(logoView)
let headerLabel = UILabel()
headerLabel.frame = CGRect(x: 0, y: logoView.frame.size.height, width: view.frame.width, height: 21)
headerLabel.text = self.navigationItem.title
headerLabel.textColor = UIColor.white
headerLabel.backgroundColor = UIColor.clear
headerLabel.textAlignment = NSTextAlignment.center
view.addSubview(headerLabel)
return topView
}
You can use that code to set default paddings.
if #available(iOS 15.0, *) { tableView.sectionHeaderTopPadding = 0 }

set button on bottom of static tableView

hello I want to set the programmatically created button at bottom of static tableView. The problem I am having is the botton stays at the bottom on smaller phones(5s) which is completely fine. But on 6s Plus it shows white area underneath the button. Meaning the button is slightly above from the ground or above from edge of the bottom.
This is how I am setting the button
func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView?
let footerView = UIView()
footerView.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 50)
footerView.backgroundColor = UIColor.redColor()
let buttonNext = UIButton(type: UIButtonType.System)
buttonNext.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 50)
buttonNext.translatesAutoresizingMaskIntoConstraints = false
buttonNext.setTitle("NEXT", forState: UIControlState.Normal)
buttonNext.backgroundColor = UIColor.blueColor()
footerView.addSubview(buttonNext)
footerView.layoutIfNeeded()
return footerView
}
func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 50
}
It sounds like you want a footer at the bottom of the table, rather than at the end of the section. In this case you should use the table's tableFooterView property. You could do this with the following code in viewDidLoad (or elsewhere):
let footerView = UIView()
footerView.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 50)
footerView.backgroundColor = UIColor.redColor()
let buttonNext = UIButton(type: UIButtonType.System)
buttonNext.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 50)
buttonNext.translatesAutoresizingMaskIntoConstraints = false
buttonNext.setTitle("NEXT", forState: UIControlState.Normal)
buttonNext.backgroundColor = UIColor.blueColor()
tableView.tableFooterView = footerView

Resources