Timering

Purp

Custom UINavigationBar appearance - Multiple UIBarButtonItems

After basic settings we set UINavigationBar colors and clear background image, and set our own separator line with an image. After that, we create Navigation Bar UIBarButtonItems programmatically and set their color too. Finally, we show and hide UINavigationBar at switching between ViewControllers, and hide StatusBar. These are very useful things, which can be present nice solutions.

Steps:

  1. Create Storyboard with 2 ViewController and add NavigationController too.
  2. Set NavigationBar colors, clear background image, set your own separator line with an image.
  3. Create Navigation Bar UIBarButtonItems programmatically.
  4. Change UIBarButtonItems position
  5. Manage NavigationBar: show/hide switch between ViewControllers - Appear with animation
  6. Tip: Hide StatusBar

Video tutorial:

1. Create Storyboard with 2 ViewController and add NavigationController too.

1.1. Do these first steps:

Storyboard Basic Settings Part 1. - New ViewController - New CocoaTouch files - Embed NavigationCotnroller - Add UIBarButtonItem

Probably you will find these line there:

2. Set NavigationBar colors, clear background image, set your own separator line with an image. 

2.1. change barTintColor and tintColor

Basically your NavigationBar background color = barTintColor is gray, and your buttons text color = tintColor is blue

You can change this with these codes to white backgroundColor and black tint:

Run your App in Simulator and check it: 

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar 2_1_2

2.2. Remove/Clear UINavigationBar background image - totally transparent NavBar 

If you would like a totally transparent Navigation bar, just do it with this code:

2.2.1. Test it

If you would like to test it, first drag & drop UITableView and Table View Cell from your Objects library to your first ViewController.

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar  2_2_1

Enter tableview Identifier: “cell”.

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar  2_2_2

2.2.2. Create IBOutlet 

So ctrl drag to the ViewController.h file the TableView, and add name e.g. “MyTableView”. (use “show the Assistant Editor button to reach the .h file at the right side)

Don’t forget add UITableViewDelegate and UITableViewDataSource too here. And synthesize it in .m file.

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar  2_2_3

2.2.3. Put the numberOfSections and numberOfRows DataSource info:

2.2.4. Put the tableView cellForRowAtIndexPath: too with these simple datas:

2.2.5. In ViewDidLoad delegate the tableview, and reload Data. 

Now your code looks like this:

 SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar  2_2_4

2.2.6. Run your Simulator 

Try to scroll the TableView. Your NavBar white, and you can’t see the Rows. 

2.2.7. Now, use the code in your vViewDidLoad:

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar  2_2_5

Run your App again, and now you can see the cells behind the NavBar:

Check it at the Video tutorial at this point.

But you haven’t got separate line anymore. So create it!

2.3. Create your own separator line with UIView

Put your image (create it yourself) into your supporting folder: 

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar 2_3_1

In your ViewDidLoad use this code:

Run your App again. Now, you have a great line :) 

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar 2_3_2

Create Buttons in your ViewController.h file, and synthesize them: 

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar 2_3_3

Add your images to your Supporting Files: 

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar 2_3_4

3.1. Create Buttons and add as an Array to the NavigationBar with this code in your ViewDidLoad:

3.2. And you can create a selector, when you press e.g. one of them, and perform a segue:

Check you Main.storyboard, you should have a segue with this identifier - if no, just add the name now: 

SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar 3_2_1

Run your App and Test it: 

Check it in Video tutorial at this point.

Probably you will find these line there:

4. Change UIBarButtonItems position

4.1. Change NavigationBar UIBarButtonItem’s position

You can change the NavigationBar UIBarButtonItem’s position if it is an image. Because in this case, you can use UIEdgeInsetsMake.

This is just one line, and some test and Math, you can position your buttons e.g. to the ends of your separator line.

4.2. Run Simulator

Just run your simulator, check i, and modify the numbers and check it again and again, maybe it will be good:

 SpotlessiCode | IOS Tutorial | Custom UINavigationBar | hide show animation | UIBarButtonItems | StatusBar  4_2

5. Manage NavigationBar: show/hide switch between ViewControllers - Appear with animation

You can use this 3 method: ViewWilAppear, viewWillDisAppear, and viewWillDidAppear to manage this animation:

Copy this 3 line into your SecondViewController.m file too.

You can change the animated: NO to YES and back, and you can see the difference:

First case - animated: WillAppear - YES, WillDisAppear - NO, WillDidAppear - NO: 

Check it in Video tutorial at this point.

Second case - animated: WillAppear - YES, WillDisAppear - YES, WillDidAppear - NO: 

Check it in Video tutorial at this point.

Third case - animated: WillAppear - YES, WillDisAppear - YES, WillDidAppear - YES: 

Check it in Video tutorial at this point.

6. Tip: Hide statusbar

Finally, you can hide the statusBar with this line (use in first and second view too:

You can check now your really Custom NavigationBar, just run in your simulator:

Share & Follow

If you would like to be notified of my new solutions, please subscribe to my Newsletter or my youtube channel and/ or follow me on Facebook or Twitter! Check Footer section for these opportunities!