How do I add a Navigation Bar to a UITableViewController in Interface Builder?

Question

Interface builder does not let me click and drag a Navigation Bar onto a Table View Controller!!! It is super frustrating.

All I want is a table view with an edit button (done in interface-builder). If this is not possible, then how do I add a navbar progammatically?

I think the answers to this question only apply to iPhone. It should be re-asked for the iPad as there are several subtle differences that I have found -- and I don't have a working solution yet. — mobibob, Oct 14 '11 at 20:50

score 60 · Answer 1 · answered Sep 12 '14 at 18:07

60

From the outline view, make sure your Table View Controller is selected.

Then go to the Editor menu, and click on the Embed In submenu, and choose Navigation Controller and voila. You have your navigation controller pointing to your tableview controller with a relationship built in.

answered Sep 12 '14 at 18:07

Greeso

7,544
9
51
77

3

This should be the selected answer. – Nathan F. Oct 26 '17 at 21:23
1

but it is still not showing the back button in the destination view controller. Can you please guide how can we get the back button in destination view controller – Abhishek Dec 31 '18 at 09:31

score 19 · Answer 2 · edited Sep 15 '14 at 12:55

For a table view with an edit button at the top, use a UINavigationController, with a UITableView as the rootView. That means you're going to make a custom UITableView subclass for your table view, and use that as the rootView of your UINavigationController instance. (Programatically, it's set with UINavigationController's -(id)initWithRootViewController. It's also settable through IB.)

Then, in your UITableView subclass, uncomment the following line:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    self.navigationItem.rightBarButtonItem = self.editButtonItem;
}

and voilà, your UINavigationController's view shows up as a table view with an edit button on the right side of the navigation bar.

Since the controller is at the top of the stack, there's no "back" button on the left, so you can use self.navigationItem.leftBarButtonItem for whatever UIBarButtonItem you create.

jlehr · Answer 3 · 2011-02-21T22:50:59.603

I agree that it's difficult to figure out how to do things like this in Interface Builder, but luckily it is possible to add a Navigation Bar and Bar Button Item to a Table View this way. Here's how to do it:

Drag a blank View (an instance of UIView) from the Library to the area near the top of the Table View. As you drag near the target area, Interface Builder will highlight it in blue to show you where to drop the View. Let go, and the View will be added as a subview of the Table View's header view.
Drag a Navigation Bar from the Library and drop it on the blank View you just added.
Drag a Bar Button Item from the Library and drop it onto the Navigation Bar.

EDIT

The problem with the above approach is that, as Bogatyr points out, the Navigation Bar will then scroll along with the Table View. Apple recommends using a custom subclass of UIViewController that owns both the Navigation Bar and an instance of UITableView resized to fit. Unfortunately, that means you would have to implement the UITableViewController behavior needed by your UIViewController subclass yourself.

Another approach that seems to work well is to create a custom subclass of UIViewController that owns a blank background view containing the Navigation Bar as well as a blank content view (an instance of UIView) that fits under the Navigation Bar. Your custom subclass would have an outlet pointing to an instance of UITableViewController in the same nib file.

This has the advantage of allowing all the view components to be created and configured in Interface Builder, and doesn't require implementing UITableViewController methods from scratch. The only detail you'd need to take care of in the Table View Controller's parent would be to add Table View as a subview of the parent's content view in viewDidLoad.

The parent could implement the action methods for the Navigation Bar's button items, and implement the delegate pattern if necessary.

This doesn't set the "navigation bar" though, it creates a table header view that contains a navigation bar, which behaves very differently. For one thing, the header scrolls with the table. For another, if you do this in a "navigation based app" in the main root controller's .xib file you'll get a "double navigation bar" because the *real* navigation bar is specified in MainWindow.xib — Bogatyr, Feb 21 '11 at 20:20
If you're in a navigation-based app, then there'd be no reason to do this at all, since `UINavigationController` provides the nav bar automatically -- all you need to do is push the `UITableViewController` onto its stack. However +1 for your other point: the downside with adding it to the header view is that it scrolls with the table view. See my edit for a better (though more complicated) approach. — jlehr, Feb 21 '11 at 22:39
This is a good solution. Using UIViewController instead of UITableViewController isn't hard at all. The controller just needs to conform to UITableViewDelegate and UITableViewDataSource, then from IB the table view's delegate and dataSource need to be set. The rest of code is same as UITableViewController — vangoz, May 16 '12 at 07:32

score 9 · Answer 4 · answered May 07 '13 at 04:22

From iOS6 onwards, you can use container view. So what you have to do is take View controller, add the navigation bar to it, then add a Container View to same view controller. It will automatically, add the new view controller link to your container view. Now simply delete that, and your table view controller in the story board. Now embed the table view controller to container view by control drag. Hope it helps.

score 4 · Answer 5 · answered Feb 21 '11 at 16:51

4

First add a navigation controller and put the table view controller (as root view controller) onto the navigation controller. This is how it is done in Code because I don't use IB.

answered Feb 21 '11 at 16:51

dasdom

13,975
2
47
58

1

So I have to embed a UITableViewController in a UINavigationController, just to get a navbar at the top? – rustybeanstalk Feb 21 '11 at 16:55
I would do it that way. Why not? – dasdom Feb 21 '11 at 16:57
1

You could use ordinary UIView instead and add a UITableView to that view finally add a navigation bar. Just remember to implement the delegate protocol – picknick Feb 21 '11 at 16:58

score 3 · Answer 6 · answered Feb 21 '11 at 20:50

Why in the world you can't drag a navigationItem into a .xib file with File's Owner set to a subclass of UIViewController and hook the navigationItem up to the UIViewController's navigationItem outlet is beyond me. It seems like a real hole in IB / XCode integration. Because you can certainly drag an instance of ViewController to a xib file, and drag a navigationItem into the ViewController, and then set the title and barbuttonitems that way.

So if you want to define your UITableViewController subclass object's navigation bar in IB, you have to create your TableVC object in a xib file (not the one .xib file that contains the tableview for your UITableViewController, though!). You then either hook the TableVC object up to be an outlet of another object (like your application delegate), which works if you need just one instance of your TVC throughout the lifetime of your app, or if you want to dynamically create instances of your TableVC in code you load this extra .xib file manually via loadNibNamed:owner:options method of the NSBundle class.

score 1 · Answer 7 · edited Sep 07 '16 at 09:51

1

These steps worked for me in iOS 9:

Add a View Controller to the Storyboard. Make UITableViewController as base Class.
Add a Navigation Bar object onto view controller at the top.
Add a Table View below Navigation bar.
Add a Table View Cell into Table View.
Add constraints.

edited Sep 07 '16 at 09:51

Saranjith

11,242
5
69
122

answered Sep 01 '16 at 16:21

hansengj

11
2

score -4 · Answer 8 · answered Nov 24 '18 at 11:46

-4

This is the other easy way ;

Choose your TableViewController screen on storyboard.
Click Size Inspector symbol on the right menu and find Simulated Size
Change Fixed to Free Form

You can add navigation bar easily.

answered Nov 24 '18 at 11:46

Ahmet Şentürk

1
1

How do I add a Navigation Bar to a UITableViewController in Interface Builder?

8 Answers8

Linked