Creating a UIView that sticks to bottom of UITableView

Question

I have a grouped UITableView and I'd like to add a UIButton to the very bottom of my UITableView. I'm using Storyboard and a UITableViewController. I'm not quite sure where I need to add code or drag/drop UI Elements. I've tried adding a UIView as the footerview in Storyboard and then adding a button to that view, but this doesn't have the desired effect of always staying on the very bottom of the view, similar to a tabbar. Also, the button should always stay in the forefront, and the UITableView should scroll behind it.

// tried this but it didn't work:
self.tablview.tableFooterView = [[UIView alloc] initwithview...]

Answer 1

Yes it's possible in UITableViewConroller. Inside the viewDidLoad() function in your UITableViewController class add the following code:

    let bottomView = UIView()
    bottomView.backgroundColor = .red // or your color
    bottomView.frame = CGRect(x: 0, y: UIScreen.main.bounds.size.height - 78, width: tableView.frame.size.width, height: 78) // 78 or your size of view
    navigationController?.view.addSubview(bottomView)
    tableView.tableFooterView = UIView()

Answer 2

I'd like to provide another solution to the existing ones. You can use a normal ViewController for your main view where you want to have the sticky view in it. Then, add a container view to the ViewController to display the table and add another view which should become the sticky view.

It is now possible to point the container view to your TableViewController and add constraints to the sticky view to make it stay below the table.

As a result the table won't overlap with the sticky view and the sticky view always stays on the bottom of the screen. Furthermore, this concept does not required any changes in your existing TableViewController.

Answer 3

Actually, you can add UIButton to stick in bottom (or header) of the view, it doesn't matter if you're using UITableViewController or UIViewController

Swift 3

Create Button:

For X and Y I apply the entire view size, this will allow me to add margin with - the amount I like. Then, just set size and width.

let myButton: UIButton = UIButton(CGRect(x: self.view.bounds.size.width - 66, y: self.view.bounds.size.height - 66, width: 50, height: 50))

Note

See how the width and height are 66? Well, you need to add your margin to the height and width of the button. In this case, 50 + 16 = 66. Also, add you background color and other properties, that way your button is visible.

Add View to NavigationController

self.navigationController?.view.addSubview(myButton)

I'm sure you can figure out how to do this in Swift 2, 1 or Objective-C.

Answer 4

OK, If you want to add the toolbar straight to the UITableViewController, you could follow the instructions in this tutorial to create a "fake" footer view.

If you are interested in being quick and easy, follow the answer giver above by @CharlesA, but it would probably look nicer if you used a standard toolbar with a UIBarButtonItem instead of just a Round Rect Button.

If you are using a Navigation Controller, then you can just unhide you toolbar (because the Navigation Controller comes with one already), and add a button to do what you need. Coding would be like this:

[self.navigationController setToolbarHidden:NO];

UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc] initWithTitle: @"Button Name"
                                            style: UIBarButtonItemStyleBordered
                                           target: self
                                           action: @selector(yourMethod:)];

self.toolbarItems = [ NSArray arrayWithObjects: buttonItem, nil ];

IMO the way to do it is create a UIViewController instead of a UITableViewController. Add a TableView to the VC, raise the bottom of the TableView enough to fit a toolbar under there, drag and drop a toolbar, drag and drop a UIBarButtonItem onto it. Control-click from the UIBar button item and create your IBAction.

Quick, simple, pretty.

Answer 5

There is one way to add views to the bottom of UITableViewController without using a UIViewController subclass.

UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, footerY, footerWidth, footerHeight)];
[self.navigationController.view addSubview:footerView];

Hope this help!

Answer 6

I have achieved this with a TableViewController in swift 1.2 by doing the following (in case people come across this like I did while looking for swift solution).

Once you have your TableViewController on your storyboard drag a View onto the controller. Set it up as you desire and right-click(or ctrl-click) and drag into the source to create an IBOutlet. Then click and drag the view to the top bar . Change to the source for the TableViewController and you will need to derive UIScrollViewDelegate. You will need to set tableView.delegate = self and then you can do the following

self.tableView.contentInset = UIEdgeInsetsMake(0.0, 0.0, floatingView.frame.height, 0.0)
        self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(0.0, 0.0, floatingView.frame.height, 0.0)

        floatingView.frame.origin.y = self.tableView.bounds.origin.y + self.tableView.frame.height - floatingView.frame.height
        floatingView.autoresizingMask = UIViewAutoresizing.FlexibleTopMargin
        self.view.addSubview(floatingView)

And then

override func scrollViewDidScroll(scrollView: UIScrollView) {

        floatingView.frame = CGRectMake(self.floatingView.frame.origin.x, self.tableView.bounds.origin.y + self.tableView.frame.height - floatingView.frame.height, self.floatingView.frame.size.width, self.floatingView.frame.size.height)
    }

Answer 7

If you want your UIButton to be at the bottom of the screen regardless of the scroll position of the UITableView (i.e., not inside the UITableView) then you should probably not use a UITableViewController subclass. Instead, if you use a UIViewController subclass, you can simply add a UITableView to your root view property and add a UIButton or some other view (such as a UIToolbar, etc) with appropriate layout constraints to place it at the bottom of the screen - or wherever you want it. This is not really possible with a UITableViewController subclass, as the root view property is required to be a UITableView instance.