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 20,000+ Swift developers and enthusiasts who get my weekly updates.