Customize Navigation Bar iOS Tutorial

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 made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

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

We need an image to put on top of the Navigation Bar, download the image. Open the Assets Library and drag the image into it. 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
    let nav = self.navigationController?.navigationBar
    // 2
    nav?.barStyle =
    nav?.tintColor = UIColor.yellow
    // 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 IOSCustomizeNavBarTutorial at the ioscreator repository on github.