iOS Navigation Bar

Adding Navigation Bar in the Application

You can add iOS navigation bar to your application in two ways, first, by using a storyboard, and second, by writing code on the contentView page. We will discuss adding a tab bar in our application using both ways. Before proceeding further, ensure you have created a new application in XCode and follow the steps below.

Using Storyboard

Before adding the navigation bar, you can change the background color of the screen so that you can see the navigation bar that you add. You can follow the steps below to add the iOS navigation bar on your view controller.

1. Click on the + icon on your screen's top right corner. This will open the object library.
2. Search for the navigation bar on the search bar. Navigation Bar object will appear.
3. Drag and drop the Navigation Bar object on the bottom of your screen, as shown in the picture below.

After these steps, you have successfully added a navigation bar to your application. Now, let's try to do the same thing by writing some code.

Using Code

Let's build an example application to understand how to add an iOS navigation bar to our application. We will create an instance of the UINavigationBar class and then add it as a sub-view in our application. Then we will add some navigation items and change the navigation bar's title. The code to do this is given below, along with the output snapshot that it produces.

import UIKit
 
class ViewController: UIViewController {
 
   override func viewWillLayoutSubviews() {
       let navigationBar: UINavigationBar = UINavigationBar(
           frame: CGRect(
               x: 0,
               y: 35,
               width: self.view.frame.width,
               height: 50
           )
       )
       navigationBar.barTintColor = UIColor.orange
       self.view.addSubview(navigationBar);
       
       let navigationItem = UINavigationItem(title: "Navigation bar")
       let rightItem = UIBarButtonItem(
           barButtonSystemItem: UIBarButtonItem.SystemItem.add,
           target: self,
           action: #selector(codingNinja)
       )
       let leftItem = UIBarButtonItem(
           barButtonSystemItem: UIBarButtonItem.SystemItem.edit,
           target: self,
           action: #selector(codingNinja)
       )
       rightItem.tintColor = UIColor.white
       leftItem.tintColor = UIColor.white
       
       
       // Adding navigation items in the navigation bar
       navigationItem.leftBarButtonItem = leftItem
       navigationItem.rightBarButtonItem = rightItem
       navigationBar.setItems([navigationItem], animated: false)
   }
   override func viewDidLoad() {
       super.viewDidLoad()
   }
 
   @objc func codingNinja() { }
}

Output

The output snapshot of the above code is shown below.

Changing Navigation Bar Appearance

You can change the navigation bar's appearance using the methods and properties of UINavigationBar class. Still, you must not change its frame, bounds, or alpha value or try to modify its view hierarchy directly. If you want to change whether the navigation bar should be visible or not, it should always be done by changing its isNavigationBarHidden property.

Many more properties and methods are available to change the navigation bar's appearance. Some of the important ones are discussed in this article. Changing the properties can be done through storyboard or code. We have discussed it using both methods.

Using Storyboard

To change the navigation bar's appearance, we can click on the navigation bar that we just added, and a tab will appear on the right side of our window consisting of several options to customize our iOS navigation bar. A snapshot of the customization options shown in XCode is given below. Change the style property from the available options and see the changes yourself.

Using Code

There are several options available to change the appearance of a navigation bar. Along with that, you can also decide when the navigation bar appears and when it should not. You can also change whether the title appears in a large format. More details and properties on changing the navigation bar's appearance are given in the table below.

Frequently Asked Questions

What is a Navigation Bar?

Navigation Bar is the bar that appears on the top of your screen and contains typical buttons, which are then used to navigate in the hierarchy of screens.

What are navigation items?

Navigation Items are displayed in the navigation bar, which interacts with the user to enable navigation in the hierarchy of views in the application.

How to set large titles in the navigation bar?

prefersLargeTitles is a property that takes boolean values and sets the title in a large format. This can be used to set large titles in the navigation bar.

How to change the background color of the navigation bar?

You can change the backgroundColor property to change the background color of the navigation bar.

How to hide the navigation bar for a fullscreen experience for the user?

hideBarsOnTap and hideBarsOnSwipe are some of the properties which can be used to hide the navigation bar on the trigger of some particular events by the user.

Conclusion

This article taught us about navigation bars in iOS and how we add them to our application. We also looked into changing its appearance using storyboard and swift. If this was your first article about learning iOS development and you needed help understanding some things, don't worry. You can refer to this article to help you create your first iOS app.

We hope this blog has helped you enhance your iOS app knowledge. Here is a list of articles that can help you learn more about ios development.

• iOS App Development
• Learn iOS Development
• iOS UI Controls and Views
• iOS Advance Topics
• iOS Tab Bar Item
• iOS Tab Bar
• iOS UIView

Refers to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Happy Learning Ninja! 🥷