Navigation Bar

The navigation bar is used in the association with the navigation controller that is displayed along the top of the screen. It is the instance of the UINavigationBar class that inherits UIView.

The UINavigationBar object is a bar that is displayed along the top of the View Controller window that is embedded in the Navigation Controller. A Navigation Bar contains the navigation items typically bar button items that are used to navigate within the hierarchy of screens. A typical Navigation Bar contains a back button displayed at the left of the bar, a center View Controller title, and the optional right bar buttons.

A Navigation bar is most commonly used in the association with the UINavigationController object. The navigation controller creates and manages the associated navigation bar. It also controls the content of the navigation bar using the attributes of the view controllers.

The following steps are required to configure the appearance of the navigation bar associated with a navigation controller.

Embed your view controller in the navigation controller or create the one by instantiating the UINavigationController class.
Access the associated navigation bar using the navigationBar property on the UINavigationController object.
Control the content of Navigation Bar by setting the title and navigationItem properties on every UIViewController that is being pushed to the navigation stack.

Using standalone Navigation Bar

We can also use a navigation bar without using navigation control. To use a navigation bar, we must search for UINavigationBar in the object library and drag the result to our View Controller. The following steps are required to configure the appearance of UINavigationBar used stand alone in the interface.

Set up the auto-layout rules to govern the position and size of the navigation bar in the interface.
Create a root navigation item to supply the initial title.
Configure the delegate object to handle the user interactions with the navigation bar.
Customize the appearance of the navigation bar.
Configure the application to push and pop relevant navigation items.

Configuring NavigationBar Appearance

The barStyle property of the UINavigationBar is used to configure the bar style. Generally, the navigation bar has two appearance styles: black or default. The black style makes the navigation bar with the black background and the white text. We can also set it to translucent to make it semitransparent. The following table illustrates interface builder attributes that are used to configure the navigation bar.

Interface Builder Attributes

Core Attributes

SN	Attribute	Description
1	Style	It represents the bar style of the navigation bar. It controls the bar tint color and the title color. This value can access at runtime using barStyle and isTransluecent properties.
2	Bar Tint	It controls the tint color of the navigation bar. This value can be accessed at runtime using barTintColor property.
3	Shadow Image	It controls the shadow image that is displayed beneath the navigation bar. This value can be accessed at runtime using shadowImage property.
4	Back Image	It controls the image that is used to appear at the edge of the back button. This value can be accessed at runtime using the backIndicatorImage property.
5	Back Mask	It specified the mask associated with the back-image attribute. This must be used in the association with the back-image attribute since it controls the appearance of the back button during the animated transitions. This value can be accessed using backIndicatorTransitionMaskImage property.

Title Attributes

SN	Attribute	Description
1	Title Font	It represents the font used to show the title in the center of the navigation bar. This value can be accessed at runtime using the font key in the titleTextAttributes dictionary.
2	Title Color	It controls the color of the navigation bar title. It can be accessed at runtime using the foregroundColor key in the titleTextAttributes dictionary.
3	Title Shadow	It specifies the color and the offset of the shadow when rendering the navigation bar. It can be accessed using the shadow key in the titleTextAttributes dictionary.

Updating Navigation Bar Content

As we have already discussed, the navigation bar contains the title of the topmost view controller on the navigation stack. Each time the navigation controller changes the topmost view controller, the content of the navigation bar also changes, including the title, and the bar button items. The navigation bar contains the content in three positions as Left, Center, and Right. The Bar Button Items are the instances of UIBarButtonItem class.

The tintColor property of the UINavigationBar is used to change the tint color of the items in the navigation bar. We can also change the bar tint color by using barTintColor property of UINavigationBar.

Left Item

The Left item in the navigation bar provides the backward navigation to the previous view controller in the navigation stack. However, if the current topmost view controller contains a custom left bar button item, then it will be displayed. The leftBarButtonItem property of the View Controller's navigation item is used to set the custom left bar button item.

If the top-level view controller doesn't contain the custom left bar button item, but the navigation item of the previous view controller has an object in its backBarButtonItem property, then the navigation controller displays that item.

However, a default back button is always displayed in case no custom left bar button item is not set with the title of the previous view controller.

Center Item

If the top-level view controller doesn't contain any custom navigation bar title view, then a default bar title is displayed. However, a custom title view can be set using titleView property of the View Controller's navigation item. The title property of View Controller is displayed as the title for the navigation bar. However, the title property of the view controller's navigation item can be used to show a different item.

Right Item

The Right side of the navigation bar is optional, I.e., no default content is set for the right item if no custom right item is already set. To specify the custom Right bar button item, we use the rightBarButtonItem property.

Example

ViewController.swift

import UIKit

class ViewController: UIViewController {


    let sb = UIStoryboard(name: "Main", bundle: nil)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.navigationController?.navigationBar.barStyle = .black
        
        self.navigationController?.navigationBar.barTintColor = UIColor.brown
        
        self.navigationItem.title = "Home"
        
        let rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .camera, target: self, action: #selector(clickedCamera))
        let rightButton2 = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(clickedAdd))
        
        navigationItem.rightBarButtonItems = [rightBarButtonItem,rightButton2]
        
        rightBarButtonItem.tintColor = UIColor.white
        rightButton2.tintColor = UIColor.white
    }


    @IBAction func clickedButtonShow(_ sender: Any) {
        let secondVC = sb.instantiateViewController(identifier: "SecondVC")
        self.navigationController?.pushViewController(secondVC, animated: true)
    }
    
    @objc func clickedCamera(){
        debugPrint("Camera Clicked")
    }
    
    @objc func clickedAdd(){
        debugPrint("Add button Clicked")
    }
}

Output