Place UIToolbar at the bottom of the screen above a UITableViewController

Question

I don't want to use the toolbar of the UINavigationController. I want to use a separate UIToolbar instead.

Requirements:

• Always visible on screen
• Should stay on it's position at the bottom of the UIView (like the toolbar of the UINavigationController)
• should adapts it's width (e.g. after rotation)
• no IB/Storyboard solution
• Additionally: Don't hide the content of the UITableView

I want to use Auto Layout for this. Despite my code is in C#, you can always provide your solution for Objective-C.

This works in viewDidLoad on a UIViewController, but not in viewDidLoad on a UITableViewController:

UIView toolbar = new UIView ();
toolbar.BackgroundColor = UIColor.Red;
toolbar.TranslatesAutoresizingMaskIntoConstraints = false;

View.AddSubview (toolbar);

NSLayoutConstraint toolbarBottom = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, BottomLayoutGuide, NSLayoutAttribute.Top, 1, 0);
NSLayoutConstraint toolbarLeft = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Left, NSLayoutRelation.Equal, View, NSLayoutAttribute.Left, 1, 0);
NSLayoutConstraint toolbarRight = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Right, NSLayoutRelation.Equal, View, NSLayoutAttribute.Right, 1, 0);
NSLayoutConstraint toolbarHeight = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 40);

this.View.AddConstraints (new NSLayoutConstraint[] { toolbarBottom, toolbarLeft, toolbarRight, toolbarHeight });

For test reasons I used an UIView instead of a UIToolbar. The results are very similar. On an UIViewController the red view is shown. On an UITableViewController it doesn't appear at all.

I made another test without using Auto Layout:

RectangleF toolbarFrame = new RectangleF (0, this.View.Bounds.Height - 44,  this.View.Bounds.Width, 44);
UIView toolbar = new UIView (toolbarFrame);
toolbar.BackgroundColor = UIColor.Red;
View.AddSubview (toolbar);

Here the UIView is shown but it is on a fixed position in the table view and the separator line shines through. Not that what I want, but it seems possible to place an UIToolbar on an UITableView ...

Answer 1

I used a container view. The main space is the table view and under it is the toolbar. This works.

These are some of my constraints:

documentListTop = NSLayoutConstraint.Create (documentListController.View, NSLayoutAttribute.Top, NSLayoutRelation.Equal, TopLayoutGuide, NSLayoutAttribute.Bottom, 1, 0);
//documentListBottom = NSLayoutConstraint.Create (documentListController.View, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, BottomLayoutGuide, NSLayoutAttribute.Top, 1, 0);
ocumentListBottomToolbar = NSLayoutConstraint.Create (documentListController.View, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, toolbar, NSLayoutAttribute.Top, 1, 0);
documentListLeft = NSLayoutConstraint.Create (documentListController.View, NSLayoutAttribute.Left, NSLayoutRelation.Equal, View, NSLayoutAttribute.Left, 1, 0);
documentListRight = NSLayoutConstraint.Create (documentListController.View, NSLayoutAttribute.Right, NSLayoutRelation.Equal, View, NSLayoutAttribute.Right, 1, 0);
toolbarBottom = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, BottomLayoutGuide, NSLayoutAttribute.Top, 1, 0);
toolbarTop = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Top, NSLayoutRelation.Equal, documentListController.View, NSLayoutAttribute.Bottom, 1, 0);
toolbarLeft = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Left, NSLayoutRelation.Equal, View, NSLayoutAttribute.Left, 1, 0);
toolbarRight = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Right, NSLayoutRelation.Equal, View, NSLayoutAttribute.Right, 1, 0);
toolbarHeight = NSLayoutConstraint.Create (toolbar, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 44);

The toolbar is now always visible and doesn't hide the table view. One disadvantage is the more complex handling (e.g. when in popover, when passing data, ...). Perhaps there is a better way with springs and struts ...