Don’t Miss These Navigation Bar Interactions in iOS8

Have you noticed how nicely the mobile Safari navigation bar condenses on scroll, and how the tab bar disappears?

In iOS8, Apple has made this type of interaction (and more!) very easily available to us all – well, almost… While Apple demoed the condensing navigation bar at WWDC, they have since changed it to hiding the navigation instead, and the tab bar is not included (I’m guessing they’ll add separate tab bar hiding properties later on…).

Here are the cool new navigation bar interactions in iOS8 that will allow the user to see more of your content:

Hide Bar on Scroll

If you have a table view, just set the navigation controller’s hidesBarsOnSwipe property to true, and you’re all set to go!

class QuotesTableViewController: UITableViewController {

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        
        navigationController?.hidesBarsOnSwipe = true
    }
}

Note that this navigation bar behavior will extend to all the view controllers on your navigation stack, so you might want to put it in viewDidAppear if you need one view controller’s navigation bar to not hide on scroll.

Hide Bar on Tap

If you have a view that doesn’t scroll like the one above, just set the navigation controller’s hidesBarsOnTap property to true:

class QuoteImageViewController: UIViewController {

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        
        // setting the hidesBarsOnSwift property to false
        // since it doesn't make sense in this case, 
        // but is was set to true in the last VC
        navigationController?.hidesBarsOnSwipe = false
        
        // setting hidesBarsOnTap to true
        navigationController?.hidesBarsOnTap = true
    }

}

Note that if you’ve set hidesBarOnSwipe in a previous view controller on the navigation stack, you will have to set it to false if you don’t want that behavior for this particular view controller. Likewise, you will have to set navigationController?.hidesBarsOnTap to false in the previous view controller if you don’t want that behavior in the table view!

Hide Bar When Keyboard Appears

As seen above, you can also hide the navigation bar when the keyboard appears with the navigation controller’s new hidesBarsWhenKeyboardAppears property:

class CreateQuoteTableViewController: UITableViewController {

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        
        navigationController?.hidesBarsOnSwipe = false
        
        // in this case, it's good to combine hidesBarsOnTap with hidesBarsWhenKeyboardAppears
        // so the user can get back to the navigation bar to save
        navigationController?.hidesBarsOnTap = true
        
        navigationController?.hidesBarsWhenKeyboardAppears = true
    }
}

To make it easy for the user to get the navigation bar back, make sure to set navigation controller’s hidesBarsOnTap or hidesBarsOnSwipe properties to true as needed.

Other Properties

I’m not going to demo the other new navigation controller properties, but make sure to take a look!

class UINavigationController : UIViewController {

    //... truncated
    
    /// When the keyboard appears, the navigation controller's navigationBar toolbar will be hidden. The bars will remain hidden when the keyboard dismisses, but a tap in the content area will show them.
    @availability(iOS, introduced=8.0)
    var hidesBarsWhenKeyboardAppears: Bool
    /// When the user swipes, the navigation controller's navigationBar & toolbar will be hidden (on a swipe up) or shown (on a swipe down). The toolbar only participates if it has items.
    @availability(iOS, introduced=8.0)
    var hidesBarsOnSwipe: Bool
    /// The gesture recognizer that triggers if the bars will hide or show due to a swipe. Do not change the delegate or attempt to replace this gesture by overriding this method.
    @availability(iOS, introduced=8.0)
    var barHideOnSwipeGestureRecognizer: UIPanGestureRecognizer { get }
    /// When the UINavigationController's vertical size class is compact, hide the UINavigationBar and UIToolbar. Unhandled taps in the regions that would normally be occupied by these bars will reveal the bars.
    @availability(iOS, introduced=8.0)
    var hidesBarsWhenVerticallyCompact: Bool
    /// When the user taps, the navigation controller's navigationBar & toolbar will be hidden or shown, depending on the hidden state of the navigationBar. The toolbar will only be shown if it has items to display.
    @availability(iOS, introduced=8.0)
    var hidesBarsOnTap: Bool
    /// The gesture recognizer used to recognize if the bars will hide or show due to a tap in content. Do not change the delegate or attempt to replace this gesture by overriding this method.
    @availability(iOS, introduced=8.0)
    unowned(unsafe) var barHideOnTapGestureRecognizer: UITapGestureRecognizer { get }
}

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.

  • Pingback: Michael Tsai - Blog - Navigation Bar Interactions in iOS 8()

  • Michał Ciuba

    When I use hidesBarsOnSwipe, my table view contents show through the status bar, which is ugly. Is there any way to change this behaviour, either by making the status bar opaque or hiding it along with the navigation bar?

    • Don’t think you can do anything about the status bar with this interaction unfortunately. Of course you can always just hide it in general or make it lighter color in general, but you’d have to do it manually if you want the status bar to hide when the navigation bar hides… Maybe they’ll change it in the future?

      • One way to solve this is to call [self setNeedsStatusBarAppearanceUpdate] at the same time, and in preferredStatusBarStyle return YES.

        • jmcastel

          @Jordan, could you explain where to put those lines ?

  • WildCat

    Is there any way to shrink navigation bar to a line just like Safari?

    • even

      No, you can’t shrink navigation bar by using a simple property. However It is mentioned in WWDC 2014 session 214: view controller advancements in iOS 8. By using condensesBarsOnSwipe property you can get what you want , but for some reason this property didn’t show in iOS 8 release SDK.

  • mtcup

    After setting hidesBarsOnTap to true, tapping on the view causes the navigation bar to hide as expected. However, the whole view moves up. How can I avoid this and keep the view stable?

    • akelagercrantz

      Set automaticallyAdjustsScrollViewInsets to NO on your ViewController.

  • Gerson Janhuel Huky

    Great tuts!
    Can you make tutorial for creating a collapsible section in UIViewTable ?

  • Parul Garg

    I have used the property hidesBarsOnSwipe, but this in not working when my view has the following hierarchy: Navigation Bar -> Search Bar -> Table View.

    Please do let me know whats the issue in view hierarchy. Because if i’m removing the search bar from view hierarchy it works perfectly.

    • Vineet Sansare

      I know its late but try putting the searchBar in the headerView of tableiview..

  • doctor

    Wow! Nice tutorial

  • Vineet Sansare

    How would you do it for tabBarController?