How can I add a sticky footer to UITableViewController? - ios

Question

I’m coding a mock messaging application in Swift Playgrounds for iPad. So far, I have a UITableViewController with a custom cell, whose background color changes every other cell. Now, I’d like to add a sticky footer of some kind to the bottom of the screen that will have a text field and a send button so that the user can send messages. I’m not quite sure how to approach this. Any ideas? Here’s what I have so far:
import UIKit
import PlaygroundSupport
class ViewController: UITableViewController {
let textMessages = [
"Here's my very first message",
"I'm going to message another long message that will word wrap",
"I'm going to message another long message that will word wrap, I'm going to message another long message that will word wrap, I'm going to message another long message that will word wrap",
"Somejfjfidiskkejejsjsjsjdjjdj blah blah blah"
]
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.title = "Messages"
navigationController?.navigationBar.prefersLargeTitles = true
tableView.register(ChatMessageCell.self, forCellReuseIdentifier: "cell_1")
tableView.separatorStyle = .none
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return textMessages.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell_1", for: indexPath) as! ChatMessageCell
cell.selectionStyle = .none
if indexPath.row % 2 == 1{
cell.messageLabel.text = textMessages[indexPath.row]
//cell.setupConstraints(side: 1)
cell.bubbleBackgroundView.backgroundColor = UIColor(white: 0.9, alpha: 1)
return cell
}else{
cell.messageLabel.text = textMessages[indexPath.row]
//cell.setupConstraints(side: 0)
cell.bubbleBackgroundView.backgroundColor = .blue
return cell
}
}
//let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! ChatMessageCell
// cell.textLabel?.text = "We want to provide a longer string that is actually going to wrap onto the next line and maybe even a third line."
// cell.textLabel?.numberOfLines = 0
}
class ChatMessageCell: UITableViewCell {
let messageLabel = UILabel()
let bubbleBackgroundView = UIView()
var leadingAnchorConstant = CGFloat()
func setupConstraints(side: Int){
if side == 1{
leadingAnchorConstant = frame.size.width - 176
}else{
leadingAnchorConstant = 32
}
}
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
bubbleBackgroundView.backgroundColor = .yellow
let gradient = CAGradientLayer()
bubbleBackgroundView.layer.shadowOpacity = 0.35
bubbleBackgroundView.layer.shadowRadius = 6
bubbleBackgroundView.layer.shadowOffset = CGSize(width: 0, height: 0)
bubbleBackgroundView.layer.shadowColor = UIColor.black.cgColor
bubbleBackgroundView.layer.cornerRadius = 25
bubbleBackgroundView.translatesAutoresizingMaskIntoConstraints = false
addSubview(bubbleBackgroundView)
addSubview(messageLabel)
// messageLabel.backgroundColor = .green
messageLabel.text = "We want to provide a longer string that is actually going to wrap onto the next line and maybe even a third line."
messageLabel.numberOfLines = 0
messageLabel.translatesAutoresizingMaskIntoConstraints = false
// lets set up some constraints for our label
let constraints = [messageLabel.topAnchor.constraint(equalTo: topAnchor, constant: 32),
messageLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 32),
messageLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -32),
messageLabel.widthAnchor.constraint(equalToConstant: 250),
bubbleBackgroundView.topAnchor.constraint(equalTo: messageLabel.topAnchor, constant: -16),
bubbleBackgroundView.leadingAnchor.constraint(equalTo: messageLabel.leadingAnchor, constant: -16),
bubbleBackgroundView.bottomAnchor.constraint(equalTo: messageLabel.bottomAnchor, constant: 16),
bubbleBackgroundView.trailingAnchor.constraint(equalTo: messageLabel.trailingAnchor, constant: 16),
]
NSLayoutConstraint.activate(constraints)
// messageLabel.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
PlaygroundPage.current.liveView = ViewController()

Answer 1

I think you are looking for these tableview delegate methods to set up a custom footer:
override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
//let cell = tableView.dequeueReusableCell(withIdentifier: "footer_cell") as! FooterCell
// Set up cell
let cell = UITableViewCell()
cell.textLabel?.text = "Footer"
cell.backgroundColor = .white
return cell
}
override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 40.0 // Set height of footer
}
You can use custom tableview cells the same way you use them in cellForRow - I just set it up with simple default cells to produce a working sample - you can also create UIView() to return to this method
By default it will stick to bottom of screen above tableview - if this isn't the case or you want it to stick to bottom of table you can change this setting in attributes inspector if using storyboard:
Style - Plain -> Sticks to bottom of view on top of tableview
Style - Grouped -> Sticks to bottom of tableview no matter how tall
Although another option probably even better without the use of a footer is to use a UITableView on UIViewController - this will give you the space to add your TextView, Buttons and whatever else you need directly on the View Controller under the UITableView
Left is UITableViewController - Right is UIViewController with UITableView
Up to you how you want to play it but I'd recommend the second option to provide the most flexibility on a ViewController
Hope this helps!