iOS Programming 101: How To Hide Tab Bar in Navigation Interface
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
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
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.
Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Follow me at Facebook, Twitter and Google+.