Navigation Item

In this tutorial, we have discussed Navigation Controller and Navigation bar, which is used in the combination to achieve the navigation between view controllers in the iOS application. However, the discussion will never be completed if we leave the navigation item alone. In this section of the tutorial, we will discuss navigation items that are used in the navigation bar in detail.

A Navigation Item represents the items that are displayed by a navigation bar so that the user can interact and navigate to other view controllers in the iOS applications. It is an instance of UINavigationItem class which inherits NSObject class.

When we push a view controller onto the navigation stack, it gets a UINavigationItem object that contains the buttons and views that are to be displayed in its navigation bar. Every View Controller in the navigation stack has a common navigation bar; however, the navigation item object is always different and specific to the associated view controller.

A navigation item object always displays the information about the view controller associated with it, including the title of the topmost view controller on the navigation stack. The view controller may contain one or more right buttons on the navigation bar to let the user trigger some actions. The UINavigationItem contains the leftBarButtonItems and rightBarButtonItems properties, which are used to define the left and right bar button items. The appearance of these items always depends upon the space available in the navigation bar.

The backBarButtonItem property of a navigation item is used to configure the appearance of the back button used to navigate to the previous view controller. However, the back bar button is not displayed when the View Controller is the Root View Controller.

The UIBarButtonItem class is instantiated to create the bar button items that are assigned as left or right bar button items for the navigation item.

UINavigationItem Properties

The following table contains the properties of UINavigationItem class.

SN	Property	Description
1	var title: String?	It represents the title of the associated view controller.
2	var largeTitleDisplayMode: UINavigationItem.LargeTitleDisplayMode	It represents the mode in which the title is to be displayed on the navigation bar.
3	var prompt: String?	It represents the single line of the text displayed at the top of the navigation bar.
4	var backBarButtonItem: UIBarButtonItem?	It represents the back-button item associated with the navigation controller.
5	var hidesBackButton: Bool	It is a boolean value indicating whether the back button is hidden or not.
6	var leftBarButtonItems: [UIBarButtonItem]?	It is an array of UIBarButtonItem that is displayed on the left of the navigation bar.
7	var leftItemsSupplementBackButton: Bool	It is a Boolean value indicating whether the left items are displayed in addition to the back button in the navigation bar.
8	var leftBarButtonItem: UIBarButtonItem?	It is the UIBarButtonItem object that is displayed on the left of the navigation bar.
9	var rightBarButtonItems: [UIBarButtonItem]?	It is the array of the UIBarButtonItem Object that is displayed on the right of the navigation bar.
10	var rightBarButtonItem: UIBarButtonItem?	It is the UIBarButtonItem object that is displayed on the right of the navigation bar.
11	var standardAppearance: UINavigationBarAppearance?	It represents the appearance settings for a standard-height navigation bar.
12	var compactAppearance: UINavigationBarAppearance?	The appearance settings for a compact-height navigation bar.
13	var scrollEdgeAppearance: UINavigationBarAppearance?	It represents the appearance settings to use when the edge of any scrollable content reaches the matching edge of the navigation bar.
14	var searchController: UISearchController?	It represents the search controller that is integrated into the navigation bar.
15	var hidesSearchBarWhenScrolling: Bool	It is a Boolean type value indicating whether the integrated search bar will be hidden on scrolling.

UINavigationItem Methods

The UINavigationItem class contains the following methods to configure the appearance.

SN	Methods	Description
1	func setHidesBackButton(Bool, animated: Bool)	It accepts a boolean value indicating whether the back button will be hidden, and the function hides the back button accordingly.
2	func setLeftBarButtonItems([UIBarButtonItem]?, animated: Bool)	It displays the left bar button items to the specified array of UIBarButtonItem objects. It also optionally animates the process.
3	func setLeftBarButton(UIBarButtonItem?, animated: Bool)	It displays the left bar button item to the specified UIBarButtonItem object. It also optionally animates the process.
4	func setRightBarButtonItems([UIBarButtonItem]?, animated: Bool)	It displays the right bar button items to the specified array of UIBarButtonItem objects. It also optionally animates the process.
5	func setRightBarButton(UIBarButtonItem?, animated: Bool)	It displays the right bar button item to the specified UIBarButtonItem object. It also optionally animates the process.

Example

In this example, we will define the custom left and right bar button items for a navigation item object.

NavItemController.swift

import UIKit
class NavItemController : UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let rightItem1 = UIBarButtonItem(barButtonSystemItem: .bookmarks, target: self, action: nil)
        let rightItem2 = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(clickedCancel))
        let leftItem1 = UIBarButtonItem(barButtonSystemItem: .camera, target: self, action: nil)
        let leftItem2 = UIBarButtonItem(barButtonSystemItem: .compose, target: self, action: nil)
        
        rightItem2.tintColor = UIColor.white
        rightItem1.tintColor = UIColor.white
        
        leftItem1.tintColor = UIColor.white
        leftItem2.tintColor = UIColor.white
        
        navigationItem.title = "Photos"
        
        navigationItem.leftBarButtonItems = [leftItem1, leftItem2]
        navigationItem.rightBarButtonItems = [rightItem1, rightItem2]
    }
    
    @objc func clickedCancel(){
        self.navigationController?.popViewController(animated: true)
    }
}

Output