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

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!

Jenn-pocket-100x100
I am extremely happy that I went with Atit and his team. I was a little weary at first since his team did not have encryption experience, so when I followed up with him after not hearing from him for two days, he had apologized and informed me his team was testing out the encryption before responding to my inquiries. I was fairly impressed. Throughout the project, Atit has been very responsive and e-mailing me back every night if not every other night. It was due to my inexperience that the project finished on time. If I had known the importance of flowcharts and providing every single screen step by step, I believe Atit's team could've finished the project within two to three weeks (I had projected 4-5 weeks). If you'd like to view what his team has done, feel free to check out "Pocket Wallet". Thank you so much Atit!Jenn