iOS Programming 101: How To Hide Tab Bar in Navigation Interface

18 Flares 18 Flares ×

Appcoda started out with weekly tutorials to show you how to build an app. The weekly tutorials are very detailed with step by step procedures. So far the feedbacks about the tutorials and our free iOS development course are very positive. But some readers suggested us to take one step further and create mini tutorials to answer some common iOS development questions such as how to change the color of navigation bar or color of UIbutton. Thanks for the suggestions. From this week onwards, we’ll start a new series – iOS Programming 101. Every week, we’ll publish a short tutorial to answer a common question raised in the comment area or forum.

As a fresh start of the series, we’ll show you how to hide the tab bar in a navigation-based app. Several weeks ago, we developed the tab bar app. In that tutorial, we embed the navigation controller inside the tab bar controller. So when user taps on any of the recipes, the navigation controller pushes to the detail view.

Tab Bar App with Tab Bar in Detail View

Tab Bar App with Tab Bar in Detail View



Some said the tab bar takes up considerable screen estate when displaying the detail view. How can we hide it to free up more space for better reading?

If you’ve read the official API reference of UIViewController, you know the tab bar can be hidden using a line of code. There is a property named “hidesBottomBarWhenPushed” in UIViewController. It’s a Boolean value indicating whether the toolbar at the bottom of the screen is hidden. When it’s set to YES, the tab bar will be hidden when the view controller is pushed on to a navigation controller.

In our code of the Tab Bar app, we can simply add a line of code in “prepareForSegue:” method and set the “hidesBottomBarWhenPushed” properties of the RecipeDetailViewController to “YES”.

1
2
3
4
5
6
7
8
9
10
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([segue.identifier isEqualToString:@"showRecipeDetail"]) {
        NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
        RecipeDetailViewController *destViewController = segue.destinationViewController;
        destViewController.recipeName = [recipes objectAtIndex:indexPath.row];

        // Hide bottom tab bar in the detail view
        destViewController.hidesBottomBarWhenPushed = YES;
    }
}

Save the change and run the app. The tab bar should be hidden when the detail view is displayed.

Tab Bar App with Hidden Tab Bar in Detail View

Tab Bar App with Hidden Tab Bar in Detail View

What Do You Think?

What do you think about this mini tutorial? Does it help to solve the common iOS programming issue you encounter? Leave us comment to share your thought and let us know what else you’d like to see in the next mini tutorial.

You May Like These:

Get Free Chapters of Our AppCoda Book

Learn iOS 7 Programming from Scratch

The Learn iOS 7 Programming from Scratch is a 400-page eBook written for beginners with little or even no programming experience. It is based on the tutorials of our popular programming course. The book starts with the basics and walks you through the process to create iOS apps using iOS 7 SDK and Xcode 5. Want to learn more? Check it out here and get two free chapters.


Build Your Own Game and Monetize on the Side

Learn how to develop your first iOS game and make money on the side. The starter kit will come with full source code of a memory game for both iPhone and iPad, as well as, a complete guide to explain how the code works. Check out the starter kit to learn more.


18 Flares Twitter 6 Facebook 11 Google+ 1 LinkedIn 0 18 Flares ×