Add button on top of UITableViewController (Swift)

Question

I am trying to add a button ontop of a uitableview controller table view. The view controller has a navigation controller and static cells, which is why it is a uitableviewcontr

Answer 1

I did something similar with UITableViewController and a static datasource. I added the button in the footerview of my tableview.

To make it align to the bottom of the screen i needed this code in my viewcontroller:

override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)

        // Make footerview so it fill up size of the screen
       // The button is aligned to bottom of the footerview 
       // using autolayout constraints
        self.tableView.tableFooterView = nil
        self.footerView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.tableView.frame.size.height - self.tableView.contentSize.height - self.footerView.frame.size.height)
        self.tableView.tableFooterView = self.footerView
    }

In short, I resize the footerview to take up all the remaining space after the contentsize of the table view is removed. Since the button is aligned to the bottom of the footerView with autolayout, it will stay in the bottom of the screen.

The Storyboard:

Here is the result:

Answer 2

there is a better solution for this. you can do this by disabling the Auto Layout(button.translatesAutoresizingMaskIntoConstraints = false) property of the corresponding Button or any UIView for floating button:

Swift 4

//create a button or any UIView and add to subview
let button=UIButton.init(type: .system)
button.setTitle("NEXT", for: .normal)
button.frame.size = CGSize(width: 100, height: 50)
self.view.addSubview(button)

//set constrains
button.translatesAutoresizingMaskIntoConstraints = false
if #available(iOS 11.0, *) {
     button.rightAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.rightAnchor, constant: -10).isActive = true
     button.bottomAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
} else {
     button.rightAnchor.constraint(equalTo: tableView.layoutMarginsGuide.rightAnchor, constant: 0).isActive = true
     button.bottomAnchor.constraint(equalTo: tableView.layoutMarginsGuide.bottomAnchor, constant: -10).isActive = true
}

Answer 3

The UITableViewController will take up the whole space, so you won't be able to add the button. Refactor your UITableViewController based code into UIViewController with UITableView manually added. This way you will be able to set the size of your table view and put the button to the bottom.

Answer 4

Step 1 :-

Drag and drop one uiview to UITable View Controller (Static) Automatically it sticks to the bottom.

If you need to, you can also add two buttons inside UIView... It depends on your requirements.

Step 2 :-

Connect the outlet for uiview (outletView)

Step 3 :-

Add this below code in View Will Appear.

override func viewWillAppear(_ animated: Bool) {

    outletViewBottom.backgroundColor = .red
    tableView.addSubview(outletViewBottom)

    // set position
    outletView.translatesAutoresizingMaskIntoConstraints = false
    outletView.leftAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.leftAnchor).isActive = true
    outletView.rightAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.rightAnchor).isActive = true
    outletView.bottomAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.bottomAnchor).isActive = true
    outletView.widthAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.widthAnchor).isActive = true
    outletView.heightAnchor.constraint(equalToConstant: 50).isActive = true // specify the height of the view

}

Step 4 :-

Now run the code... Happy coding.

Answer 5

all you need to do is to add your Top view whichever it is to the navigationController.view like so:

self.navigationController?.view.addSubview(YOUR_TOP_VIEW)

so if you need a sticky button/view etc... on top of TableViewController which does not scroll with tableView, use this approach.

Answer 6

I find Container Views very useful in this scenario! A clean solution and very easy to implement.

Just create a normal UIViewController, add your button and a ContainerView as subviews of this UIViewController (the middle one in the image below). Finally create Embed Segue from ContainerView to your UITableViewController (the one on the right).

This way you can use static cell prototypes, not being limited only to UITableView at the same time.

Result: