Hide Navigation Bar on Tap in iOS8 with Swift

In iOS8 Apple added the functionality to Hide the Navigation Bar when there is a Tap detected. This is useful if the Navigation Bar is blocking some content. In this Tutorial we will display an Image fullscreen and enable the hiding of the Navigation Bar when tapping. This tutorial is built for iOS 8.1 and Xcode 6.1.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftHideOnTapTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

For this tutorial we need a small and a fullscreen image. Download the images, unzip them and add them to the project.

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 the small image.

Select the Image View and Select the "Resolve AutoLayout Issues" button on the bottom-right of the StoryBoard (3rd button) and select Add Missing Constraints.

ext, add a Button to the Storyboard and give it a title of "Show Full Size". Add also the missing constraints on the button. The Storyboard should look like this 

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

o to the ViewController.swift file and implement the showFullSize method

@IBAction func showFullSize(sender: AnyObject) {
    // 1
    var fullImageView:UIImageView = UIImageView(frame: self.view.frame)
    var image = UIImage(named: "sunset.jpg");
    fullImageView.image = image;
    // 2
    // 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 Run the 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 iOS8SwiftHideOnTapTutorial at the ioscreator repository on Github.