Hide Navigation Bar iOS Tutorial

Apple added the functionality to hide the Navigation Bar when a tap gesture has been detected. This is useful if the Navigation Bar is blocking some content. In this tutorial the navigation bar will be hidden after a tap so the fullscreen imaqe will be visible..This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOS12HideNavBarTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

For this tutorial we need a small and a fullscreen image. Download the images, unzip them. Go to the Assets item and drag the images to the assets.

Go to the Storyboard, Select the View Controller and go to the Editor menu and select Embed in Navigation Controller. Double-click the Navigation Bar on the View Controller and change the title in "Sunset". Add an Image View to the Storyboard and in the Size Inspector set the Width to 113 and the Height to 200. Go to the Attributes Inspector and in the Image View section set the image to sunset_small.The Storyboard should look like this.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Button to the ViewController class and create the following Action

Go to the ViewController.swiftfile and implement the showFullSize method

@IBAction func showFullSize(_ sender: Any) {
    // 1
    let fullImageView = UIImageView(frame: self.view.frame)
    let image = UIImage(named: "sunset.jpg")
    fullImageView.image = image
      
    // 2
    view.addSubview(fullImageView)
      
    // 3
    navigationController?.hidesBarsOnTap = true
}
  1. a new Image View is created with the size of the full screen. The full-size sunset image is added to the Image View
  2. The Image View is added to the main view
  3. The hidesBarsOnTap boolean of the Navigation Controller is set to true to enable hiding the Navigation Bar on tap.

Build and Runthe project, display the full size and notice the Navigation Bar is blocking the full image. Tap to hide/display the Navigation Bar.

You can download the source code of the IOS12HideNavBarTutorial at the ioscreator repository on Github.