Back To Blog

How to Add a Navigation Bar To Enable Navigation in iOS App

0
Shares
how-to-add-a-navigation-bar

We all know that navigation bars appear at the top of an app screen that basically enables the navigation throughout the app. And, when you go to a new screen, a back button often labeled as the title of previous screen appears at the left side of the bar. Here, we’ll see how to add a navigation bar to manage the app content by enabling navigation.

Basically, UINavigationBar is a visual control that supports navigation of content which is used most in navigation controllers. The primary component of a navigation bar is a button (at left), title (in center), and one optional right button.

Although, creating custom navigation bar will come later. First, in this guide, we’ll see how to add a navigation bar in the iOS app.

Let’s Get Started

Open XCode and Create new project under file menu.

samplenavigationbar1

Select project type as Single View Application and click on next.

samplenavigationbar2

In the next tab, set your project name and details.

samplenavigationbar3

Once you create a new project, drag and drop UINavigationController from show object library section.

samplenavigationbar4

samplenavigationbar5

Now select slider see the attribute inspector which have properties for UINavigationController. we can manage the initialization of navigation controller, top bar, Shows navigation bar etc.

samplenavigationbar6

In viewDidLoad() we have used some properties of UINavigationBar to set left and right bar button items.

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

//Add button on navigation bar right side
let barButtonEdit = UIBarButtonItem(barButtonSystemItem: .Edit, target: self, action: #selector(actionEdit(_:)))

let barButtonAdd = UIBarButtonItem(barButtonSystemItem: .Add, target: self, action: #selector(actionAdd(_:)))

self.navigationItem.setRightBarButtonItems([barButtonEdit, barButtonAdd], animated: true)

//Add button/searchbar on navigation bar in left side
let leftNavBarButton = UIBarButtonItem(customView: searchBar)
self.navigationItem.leftBarButtonItem = leftNavBarButton

}

to add searcher in CocoaLigature1 UINavigationBarCocoaLigature0

lazy var searchBar:UISearchBar = UISearchBar(frame: CGRectMake(0, 0, 200, 20))

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

//Add button/searchbar on navigation bar in left side
let leftNavBarButton = UIBarButtonItem(customView: searchBar)
self.navigationItem.leftBarButtonItem = leftNavBarButton

}

//Action on Edit button
func actionEdit(sender: UIBarButtonItem)
{
print("actionEdit")
}

//Action on Add button
func actionAdd(sender: UIBarButtonItem)
{
print("actionAdd")
}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
searchBar.endEditing(true)
}

And done!

Once you successfully implement the navigation bar, it’s easy to customize the UI controls. And, by utilizing the custom navigation bar, you can make your app more attractive. Though, if you’re trying to implement it on your brand’s app, then it’s important that you hire iPhone app developer who has the experience and skills that result in better UI of your iPhone app.

 
0
Shares
 

Have an iOS App Idea in Mind? Let's Discuss!

client-testimonial-mobile-app-development


‘ “We really appreciate the flexibility given by Space-O Technologies. We got instant replies from them when we needed any changes in our mobile app. In fact, my team learned a lot while working with Space-O Technologies. It was an absolute pleasure working with Space-O. Thank you.” ’ Sanzio, The Chain Team