Customizing Navigation Bar in iOS8 with Swift

The look of the Navigation Bar can be customized. In this tutorial we will change the background colour, the tint colour and add an image to the Navigation Bar. This tutorial is built with iOS 8.1 and Xcode 6.1

Update: Mar 6, 2017. The rewritten version in Swift for iOS 10.2 and Xcode 8.2.1 is available here.

Open Xcode and create a new Single View Application. For product name, use IOS8SwiftCustomizeNavBarTutorial 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.

We need an image to put on top of the Navigation Bar, download the image and add it to the project. Go to the Storyboard. Select the View Controller and in The Editor menu select Embed in -> Navigation Controller. Next, drag a Bar Button from the Object Library to the left side of the Navigation Bar and name it "Left Item". Repeat this for the right side and name it "Right Item".The Storyboard should look like this.

.Go to the ViewController.swift file and add the ViewDidAppear method.

override func viewDidAppear(animated: Bool) {
    // 1
    var nav = self.navigationController?.navigationBar
    // 2 
    nav?.barStyle = UIBarStyle.Black
    nav?.tintColor = UIColor.yellowColor()
    // 3
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
    imageView.contentMode = .ScaleAspectFit
    // 4
    let image = UIImage(named: "Apple_Swift_Logo")
    imageView.image = image
    // 5
    navigationItem.titleView = imageView
  1. a nav helper variable which saves typing.
  2. the Navigation Bar Style is set to Black and the tint color is set to yellow, this will change the bar button items to yellow.
  3. an Image View with a width and height of 40 points is created and the contentMode is set to ScaleAspectFit to adjust the image to the size of the Image View
  4. The Swift Logo image is assigned to the Image view
  5. The ImageView is assigned to the titleView of the Navigation Item

Build and Run the project to display the customised Navigation Bar.

You can download the source code of the IOS8SwiftCustomizeNavBarTutorial at the ioscreator repository on github.