iPhone SDK: UINavigationController, Hiding the Navigation Bar

Hide and Show the Navigation Bar to Maximize the View Area

The navigation bar hides while viewing images in Apple’s Photo app to provide a better view of the image. Hiding the navigation bar is easy. While not exactly the same as the Photo app this technique will hide and show the navigation bar, with an option to animate the transition.

Setup

The method that makes this easy is:

- (void)setNavigationBarHidden:(BOOL)hidden animated:(BOOL)animated

I demonstrate the method in this sample project. To keep it simple, the sample project consists of one view controller, and a single button that toggles the navigation bar between hidden and visible states. This defeats the purpose of a navigation controller, but multiple controllers aren’t required for this demonstration.

Getting Started

1. In xCode select File => New Project, click on Navigation-Based Application and click Choose.
2. Name the project and click Save. I named mine HideNavBar.

Next, simplify the Navigation-Based Application template. In most real world applications Apple’s template works well. But there are some situations where I would not want a UITableViewController as the RootViewController. Let’s use a UIViewController instead.

1. Delete the files RootViewController.h and RootViewController.m. The template added a UITableViewController, and I want to use a UIViewController.
2. Control click Classes and select Add => New File.
3. Select UIViewController subclass and click Next.
4. Name the file, I used RootViewController.m.
5. Click Finish.

Add an IBOutlet and an IBAction

Open RootViewController.h and add this code:

@interface RootViewController : UIViewController <UINavigationControllerDelegate> {
    IBOutlet UIButton *button;
}

- (IBAction)toggleNavigationBar:(id)sender;

@property (nonatomic, retain) UIButton *button;

@end

Adding an outlet for the button lets you alter the label later. I also added an action to call when the button is clicked. To prevent warnings about the controller not responding to the setNavigationBarHidden:animated: method, I made the controller a UINavigationControllerDelegate.

Change the UI in Interface Builder

The RootViewController is no longer a UITableViewController subclass. Let’s fix the RootViewController.xib file to handle this.

1. Open RootViewController.xib.
2. Delete the TableView.
3. Add a UIView by dragging it from the library.
4. Click on File’s Owner, and then click Command + i to bring up the inspector.
5. Delete the outlet for the TableView. You will see the button outlet, and the toggleNavigationBar action we added.
6. Double click the View icon to open the view.
7. Drag a UIButton from the library onto the view and position it.
8. Double click the button and enter Hide Navigation Bar.
9. Control click the File’s owner icon and connect the button outlet by dragging from the outlet to the button that was added. Repeat the process to connect the view outlet to the view.
10. Control click on the button and drag a connection from Touch Up Inside to the File’s Owner. Connect it to the toggleNavigationBar action.
11. Save and close the file.

Yikes, that seems like a lot of steps. Not to worry, it only takes a minute.

And Now to Make the Navigation Bar Disappear

With all that setup out of the way, let’s get to the interesting part of the show.

Open the HideNavBarAppDelegate.m file and add this to applicationDidFinishLaunching:

- (void)applicationDidFinishLaunching:(UIApplication *)application {

    //Set the navigation bar style to translucent if there is something that you want to show through.
    navigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent;

    // Configure and show the window
    [window addSubview:[navigationController view]];
    [window makeKeyAndVisible];
}

I added a line to set the barStyle to black translucent. If a picture is in the view below, this allows it to show through while the navigation bar is visible.

Open RootViewController.m and complete the implementation.

@synthesize button;

- (IBAction)toggleNavigationBar:(id)sender {
    //Check the current state of the navigation bar...
    BOOL navBarState = [self.navigationController isNavigationBarHidden];
    //Set the navigationBarHidden to the opposite of the current state.
    [self.navigationController setNavigationBarHidden:!navBarState animated:YES];
    //Change the label on the button.
    if (navBarState) {
        [button setTitle:@"Hide Navigation Bar" forState:UIControlStateNormal];
        [button setTitle:@"Hide Navigation Bar" forState:UIControlStateHighlighted];
    } else {
        [button setTitle:@"Show Navigation Bar" forState:UIControlStateNormal];
        [button setTitle:@"Show Navigation Bar" forState:UIControlStateHighlighted];
    }
}

I synthesized the button property and added the toggleNavigationBar method. In the first line I set a boolean to the value returned by the isNavigationBarHidden method. The next line calls the setNavigationBarHidden method using the opposite value of the navBarState variable. This allows the navigation bar to be toggled open or closed based on the state it is in. The last few lines of code change the label on the button.

The last thing I did was to give the controller a title.

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"Hide Me!";
}

Here’s my test project. HideNavBar.zip