UINavigationController and UINavigationBar in Swift

Image by Stephan Henning via Unsplash

Overview

A navigation controller is a container view that can manage the navigation of hierarchical contents. The navigation controller manages the current displaying screen using the navigation stack. Navigation stack can have “n” numbers of view controllers. The bottom-most view controller in that stack is the root view controller and others are child view controller. At a time only one child view controller is visible which is the topmost view controller in the navigation hierarchy. A view controller can add or remove from the stack using push and pop operation.

In this tutorial, we will learn

1. How to embed view controllers into the navigation controller?
2. Ways to push, pop from the navigation stack?
3. How to use the navigation stack as an array?
4. Customize the navigation bar? So let's get started

This tutorial is written using Swift 5, Xcode 11.2, iOS 13 & Storyboard Interface.

1. Start with Navigation Controller

Create a single view application in Xcode. Add two view controller into your storyboard. Create two different swift files for those view controllers and set identifiers for them. Take a button in each view controller, set constrain for them and customize as you want. Add action outlets for those buttons into the corresponding view controller. In my case, I named the view controllers as “FirstVC” & “SecondVC” and buttons as “Push SecondVC” & “Pop To First”.

Now embed your “FirstVC” into navigation controller using storyboard

If your storyboard file seems something like this you are ready to go

You can also embed your “FirstVC” into the navigation controller programmatically in swift. But in this tutorial, we kept this simple and straightforward by using a storyboard.

Push and Pop into the navigation stack

We will see how to push, pop and pop to root view controller into the navigation stack

• Push To Top

When you push a view controller it places into the top of the navigation stack and up to the view controller from where you push. That means if you push “SecondVC” from “FirstVC”, “SecondVC” will place up to the “FirstVC”. If you press back into the “SecondVC” it will redirect you to “FirstVC”.

In our example, this push operation is done by pressing the “Push SecondVC” button into the “FirstVC”.

let storyboard = UIStoryboard(name: "Main", bundle: nil)
let vc = storyboard.instantiateViewController(identifier: "SecondVC")
self.navigationController?.pushViewController(vc, animated: true)

• Pop From Top

Now if we want to remove the topmost view controller from the navigation stack then we have to pop that view controller. In our example now “SecondVC” is the topmost view controller and if we want to remove it from the navigation stack then we will write this block of code in the “popToFirstVC” button action

self.navigationController?.popViewController(animated: true)

• Pop To Root View controller

We can push “n” numbers of view controllers into the navigation stack. Sometimes we have to go to the root view controller from any of the view controllers then we can use this block of code to execute it.

navigationController?.popToRootViewController(animated: true)

You can check it by replacing the codes in the “popToFirstVC” button action in “SecondVC”.

Navigation Stack as Array

In the navigation controller, child view controllers are stored as order array. We can access view controllers from that array also. Now we will see different uses using this array.

• Remove View controller from the array

We can remove view controllers from different positions of the navigation stack array. First of all, we will get all the available view controllers and then we will do the remove operation

var navVCArray = self.navigationController?.viewControllers
navVCArray?.removeLast() //Remove the last view controller
navVCArray?.removeFirst() // Remove the first view controller
navVCArray?.removeAll() //Remove all view controllers
navVCArray?.remove(at: 0) //Remove at specific position

• Push View controller

As like remove view controller we also can push a new view controller into the navigation stack using append(). Suppose we want to remove the last view controller and add a new view controller into the stack then we will do something like this

var navVCArray = self.navigationController?.viewControllers
navVCArray?.removeLast()
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let vc = storyboard.instantiateViewController(identifier: "SecondVC")
navVCArray?.append(vc)

2. Customize Navigation Bar

When we embed a view controller into the navigation controller from a storyboard or push a view controller, a white area appears at the top of the view controller. That is the navigation bar. We can add title, bar button, and perform lots of customization on that.

• Change “barTintColor”, “tintColor”

self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.barTintColor = .cyan
self.navigationController?.navigationBar.tintColor = .brown

• Set setBackgroundImage, shadowImage

navigationController?.navigationBar.setBackgroundImage(UIImage(named: "Banner2"), for: .default)
navigationController?.navigationBar.shadowImage = UIImage(named: "Banner")

• Set Title and customize title color

self.navigationItem.title = "First VC"
let textAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
navigationController?.navigationBar.titleTextAttributes = textAttributes

• Set an image as navbar title

let logo = UIImage(named: "edit")
let imageView = UIImageView(image:logo)
self.navigationItem.titleView = imageView

• Clear your navbar background

self.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true
self.view.backgroundColor = UIColor.clear

• Remove your navbar border

self.navigationBar.setBackgroundImage(UIImage(), for:.default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.layoutIfNeeded()

• Customize the back button. Remove the title of the back button and set the color.

navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
navigationItem.backBarButtonItem?.tintColor = UIColor.cgLightBlue

• Add a bar button item: We can add leftBarButtonItem & rightBarButtonItem using system icon, text or custom image. Add a leftBarButtonItem with barButtonSystemItem add

navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addTapped))

• Add rightBarButtonItem with “Add” title

navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Add", style: .plain, target: self, action: #selector(addTapped))

• Create a bar button with own customization

let playButton = UIButton(type: .custom)
playButton.setImage(UIImage(named: "plus"), for: .normal)
playButton.addTarget(self, action: #selector(playTapped), for: .touchUpInside)
playButton.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
let barButton = UIBarButtonItem(customView: playButton)

• Add multiple rightBarButtonItem

let add = UIBarButtonItem(barButtonSystemItem: .camera, target: self, action: #selector(addTapped))
let playButton = UIButton(type: .custom)
playButton.setImage(UIImage(named: "plus"), for: .normal)
playButton.addTarget(self, action: #selector(playTapped), for: .touchUpInside)
playButton.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
let barButton = UIBarButtonItem(customView: playButton)
navigationItem.rightBarButtonItems = [add, barButton]

That’s all for today. Please check the apple doc for UINavigationController and NavigationBar to do a lot of hacks with them.

If you found this article useful please share and give some clap 👏👏👏
Check my other articles on Medium and connect me on LinkedIn.

Thank you for reading & Happy coding 🙂