[SOLVED] Make UIButton stick on bottom of UITableView

Issue

I have an UITableView which consists of prototype cells. I want to put an UIButton inside the bottom of the UITableView using Interface Builder.

I added the UIButton in the footer of the UITableView:

I added a purple background for the Footer View and a green background colour for the UITableView. In the picture above it shows the Button at the bottom of the footer. However this isn’t equal to the bottom of the UITableView.

The GIF below displays that the button is placed bellow the cells but not inside the bottom of the UITableView. I want it to appear at the bottom in the UITableView. Not under the UITableView. The following GIF displays this problem:

My question is: How do I set an UIButton inside an UITableView at the bottom of the UITableView using Interface Builder?

This is what I want to achieve (From Apple’s ResearchKit):

Edit: The UIButton should be inside the UITableView. Suggestions where the UIButton is placed outside the TableView and pinned underneath don’t achieve my goal.

Solution

So I had to slightly swizzle it, but got it working by doing the below things:

1. Pull the UIButton out to the same level in the view heirarcy as
   the tableview.
2. Embed the tableview and the button inside a view
3. Embed the above view inside another view
4. Pin edges of view #3 (Pinned View) to superview
5. Pin top, left & right edges of view #2 (Resizing View) to view #3 edges. And set a constraint of equal height to view #3.
6. Set an outlet in the view controller for the equal height constraint

The view heirarcy in IB should look like this:

Now in the view controller code, you need to do the following things:

1. Create instance var for the keyboard offset value

   var keyboardOffset: CGFloat = 0
   

2. set notifications and observers for the keyboard willShow and
   willHide

   notificationCenter.addObserver(self, selector: #selector(keyboardWillShow(_:)), name:NSNotification.Name.UIKeyboardWillShow, object: nil)
   notificationCenter.addObserver(self, selector: #selector(keyboardWillHide(_:)), name:NSNotification.Name.UIKeyboardWillHide, object: nil)
   

3. In keyboardWillShow, cache the keyboard height value.

   if let keyboardSize = (notification.userInfo?[UIKeyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue {
   
       keyboardOffset = keyboardSize.height
   }
   

4. Create didSet method on the keyboardOffset var, and animate the height of the view by that value each time it is set

   var keyboardOffset: CGFloat = 0 {
       didSet {
           resizingViewHeight.constant = -keyboardOffset
   
           UIView.animate(withDuration: 0.2) { 
               self.view.layoutIfNeeded()
           }
       }
   }
   

5. Make sure you set the offset back to 0 in keyboardWillHide

   keyboardOffset = 0
   

Every time the keyboard now appears, the view that is containing the tableview will reduce in size and therefore pull the contents up with it, providing the shrinking tableview effect that you are hoepfully looking for!

Answered By – Harry Bloom

Answer Checked By – Willingham (BugsFixing Volunteer)