{ by david linsin }

January 18, 2010

Adding a UINavigationBar to a UITableView

A couple of days ago, I implemented a RSS-Reader feature for an app, I'm coding at work. There's a nice tutorial on this topic, which I can highly recommend to you, although it's a little outdated. I'm using a UITableView to implement the RSS-Reader feature and I wanted the header section to be a UINavigationBar. Somehow I couldn't find a proper tutorial on how to achieve this. At least there wasn't anything that explained it in a simple manner.

You will need a UINavigationController, in case you want to navigate through the hierarchy of UITableViews, but we put that thought on hold and I'm gonna show you how to add a custom UINavigationBar.

This is roughly what the final result should look like. You can see my company's logo at the top, inside of a UINavigationBar, which in return is inside of a UITableView. All the components are wrapped in a UITabBarController, which you can see at the bottom in the form of a tab bar.

My first approach was to tackle this kind of interface solely in Interface Builder. It's very straight forward, there's nothing fancy here and my first impression was, that it should work out of the box - the box being InterfaceBuilder. Well, I was able to design almost everything through Interface Builder, just the part with the UINavigationBar made me throw in the towel.

This is what the code looks like. It is implemented in the custom UITableViewController, which is assigned responsibility from the UITabBarController, as soon as its' tab is active.

First step is to initialize the UINavigationBar. In my case, I assign it to an instance variable, which is released in the dealloc method. You can see, that you also have to initialize and add the image yourself, which is usually a simple drag & drop in Interface Builder. That image is then added to the initialized UINavigationBar.

You can see that the solution is only a couple of lines of code, but note that it only works, if you don't want to navigate to a sub view. For that you'd need a UINavigationController.


Gene said...

To quote the UINavigationBar documentation, "Unlike other types of views, you do not add subviews to a navigation bar directly."

Anonymous said...

If try to use your code I obtain Nav Bar that is scrolling with the TableView, is there a way to show one "fixed"?

Michael said...

Just to note, even if you're not going to use navigation features, it's probably easier just to wrap your UITableViewController in a UINavigationController, unless you have a compelling reason not to. This provides a navigation bar and a toolbar, and it all comes out of the box.

If you don't, and you add the UINavigationBar directly to the UITableView, you'll get the undesirable and surprising effect of the nav bar scrolling with the tableview, as the anonymous commenter above mentioned.

It's quite simple to do in code:

UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:myTableViewController]];

The alternative is to use a standard UIViewController (not a UITableViewController), and setup the view hierarchy manually so that the tableview is a sibling of the navigation bar. But then, of course you don't get some of the automated things that UITableViewController give you.



  • mail(dlinsin@gmail.com)
  • jabber(dlinsin@gmail.com)
  • skype(dlinsin)