Navigation Bar
The navigation controller, which is seen along the top of the screen, is associated with the navigation bar. It is the UIView-inherited instance of the UINavigationBar class.
class UINavigationBar : UIView
A bar that appears at the top of the View Controller window, which is integrated into the Navigation Controller, is represented by the UINavigationBar object. The navigation elements, which are usually bar button items used to navigate throughout the hierarchy of screens, are contained in a navigation bar. A standard Navigation Bar has an optional right bar button, the View Controller title in the middle, and a back button on the left side of the bar.
The most frequent application of a navigation bar is in conjunction with the UINavigationController object. The corresponding navigation bar is designed and maintained by the navigation controller. By utilizing the view controllers’ properties, it also manages the navigation bar’s content.
To customize the look of a navigation controller’s navigation bar, you must take the subsequent actions.
1. Use the UINavigationController class to instantiate a navigation controller or embed your own view controller within it.
2. The navigationBar property on the UINavigationController object can be used to access the related navigation bar.
3. Set the title and navigationItem attributes on each UIViewController that is being pushed to the navigation stack to control the content of the navigation bar.
Using standalone Navigation Bar
Without utilizing navigation control, we may also make use of a navigation bar. We need to look up UINavigationBar in the object library and drag the result to our View Controller in order to use a navigation bar. To customize the look of the UINavigationBar when it is used independently in the interface, you must take the subsequent actions.
1. Configure the auto-layout rules to control the interface’s navigation bar’s size and location.
2. To provide the first title, create a root navigation item.
3.To manage user interactions with the navigation bar, configure the delegate object.
4. Change the way the navigation bar looks.
5. Set up the app to pop and push pertinent navigation items.
Configuring NavigationBar Appearance
The bar style is set using the UINavigationBar’s barStyle property. The navigation bar often comes in two visual styles: default and black. The navigation bar’s black backdrop and white lettering are a result of the black style. To make it semitransparent, we may also set it to translucent. The attributes of the interface builder that are used to configure the navigation bar are shown in the following table.
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
The title of the top view controller on the navigation stack appears in the navigation bar, as we have already covered. The content of the navigation bar, including the title and the bar button items, changes whenever the navigation controller modifies the topmost view controller. The content of the navigation bar is arranged in three positions: left, center, and right. The UIBarButtonItem class instances are what make up the Bar Button Items.
To alter the tint color of the items in the navigation bar, utilize the UINavigationBar’s tintColor property. Using the UINavigationBar’s barTintColor property, we can also alter the color of the bar tint.
Left Item
Backward navigation to the previous view controller in the navigation stack is available via the Left item in the navigation bar. On the other hand, it will be visible if the topmost view controller at that moment has a custom left bar button item. The custom left bar button item is set using the leftBarButtonItem attribute of the View Controller’s navigation item.
The navigation controller shows the custom left bar button item if the previous view controller’s navigation item has an object in its backBarButtonItem property and the top-level view controller does not have it.
In the event that the custom left bar button item is not set with the title of the previous view controller, a default back button is always visible.
Center Item
A default bar title is shown if the top-level view controller is empty of any custom navigation bar title views. The titleView attribute of the View Controller’s navigation item, however, allows for the setting of a custom title view. The navigation bar’s title is shown as the View Controller’s title property. On the other hand, you can show an alternate item by using the title attribute of the view controller’s navigation item.
Right Item
The navigation bar’s right side is optional; that is, if no custom right item has previously been specified, there is no default content for the right item. The rightBarButtonItem parameter is used to specify the custom Right bar button item.
Example
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
