iOS Different navigation bar color on different pages

Question

How would I change the navigation bar color based on what page the user is on?

I would like to do something similar to what the Vine app uses in the explore category when the user taps a certain category and it turns into the color of the button in a fading format. Any thoughts on how to do this?

You can see the answer on the below link https://stackoverflow.com/a/64598661/11280037 — Hjd959, Oct 29 '20 at 23:31

Alexandre Barbier · Accepted Answer · 2014-07-08T03:01:38.720

2

You can try to set the navigation bar tint color in the prepareForSegue: method (in your controller whit the four buttons) like this

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if ([segue.identifier isEqualToString:"segueIdentifier here"]) { [self.navigationController.navigationBar setBarTintColor:[UIColor redColor]]; } }

Don't forget to reset the navigation bar tint color when you came back (do this in the viewWillAppear)

Or you can try to do this in all your controllers in the method viewWillAppear: like this

- (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [self.navigationController.navigationBar setBarTintColor:[UIColor redColor]]; }

edited Jul 08 '14 at 03:01

answered Jul 07 '14 at 22:23

Alexandre Barbier

185
1
9

1

Where is the prepareForSegue method located? Also, I checked my ViewController.m and didn't see a viewWillAppear method, should I create one and if so how? Thanks for the help. – BenLeim Jul 07 '14 at 23:34
Yes you should create the viewwillappear method and call [super viewWillAppear:animated] in it. The prepareForSegue method is located in the viewController but how do you push the next controller? – Alexandre Barbier Jul 07 '14 at 23:40
I am using a navigation controller and I tried to change the class file for the next page and it causes it to crash when ever the button is clicked. Any thoughts on this as well? – BenLeim Jul 07 '14 at 23:45
Can you add some code and explain what you are doing? – Alexandre Barbier Jul 08 '14 at 00:02
I have my pages embedded in a Navigation Controller (in the storyboard). As i'm sure you know that puts a Navigation bar on the views. I can change the color and all that on the navigationController page on storyboard, but I want that to change when a certain page is opened. How would I specifically do this? – BenLeim Jul 08 '14 at 00:11
Can you provide a screenshot of your storyboard? What do you call "page"? How do you go from one page to another? – Alexandre Barbier Jul 08 '14 at 00:24
Ok thanks so you should have 4 segue identifiers. I will edit my answer to give you a solution – Alexandre Barbier Jul 08 '14 at 00:45
Should I put the prepareForSegue in the ViewController or should I make a seperate class for the home page? – BenLeim Jul 08 '14 at 01:30
In the viewController where your four buttons are – Alexandre Barbier Jul 08 '14 at 01:33
In the storyboard you should have put segue identifier in the properties of each segue you've created. (you should use this one). A segue identifier is just a string that identify the segue look [here](https://developer.apple.com/library/ios/recipes/xcode_help-interface_builder/articles-storyboard/StoryboardSegue.html) for more information – Alexandre Barbier Jul 08 '14 at 02:26
Also, just for reference I believe before the isEqualToString needs an @ before it – BenLeim Jul 08 '14 at 03:03
Yes but I wanted to create an error here. In that way you won't forget to replace this string – Alexandre Barbier Jul 08 '14 at 03:05
Any thoughts on how I would be able to do a fade or delay so it's not such a quick switch? and my apologizes I deleted it after I posted it because I found an answer. – BenLeim Jul 08 '14 at 03:58
try to put your color change in UIView animateWithDuration: – Alexandre Barbier Jul 08 '14 at 10:58
so would I move the prepareForSegue into the animateWithDuration? – BenLeim Jul 08 '14 at 15:41
I don't want to be rude but you should learn objective-c and iOS development before trying something like this. You will find a lot of tutorial on the web. You should do that : `- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if ([segue.identifier isEqualToString:"Your segue ID"]) { [UIView animateWithDuration:.2 animations:^{ // set the navigation bar tint color here } completion:^(BOOL finished) { }]; } }` – Alexandre Barbier Jul 08 '14 at 15:48
Thanks, I'll look into finding a tutorial – BenLeim Jul 08 '14 at 15:52
You're welcome. Here are [Apple tutorial](https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiOS/index.html#//apple_ref/doc/uid/TP40011343-CH2-SW1) it can be useful – Alexandre Barbier Jul 08 '14 at 15:55

score 2 · Answer 2 · answered Nov 11 '16 at 14:11

Solution for Swift 3.0 (tested on iOS 10)

Hi! I faced the same problem and finally I've found good solution.

Setting the navigation bar's color in viewWillAppear method works fine when you push from a parent to a child view. Transition between navigation bars colors is smooth.

class ChildViewController: UIViewController {

...

override func viewWillAppear(_ animated: Bool) {
       self.navigationController?.navigationBar.barTintColor = UIColor.white
    }

But it didn't really worked for setting the bar's color in the ParentViewController to the original one. You could notice the color's change, that looked just ugly and unprofessional.

To make the color change smooth when coming back to ParentViewController, do it within the method willMove(toParentViewController parent: UIViewController?) in your ChildViewController:

class ChildViewController: UIViewController {

...

override func willMove(toParentViewController parent: UIViewController?) {
     self.navigationController?.navigationBar.barTintColor = UIColor.red

Thanks to this approach you can set different navigation bar colors on different pages in the one Navigation Controller with smooth colors transitions between view in both ways - going to a child view and also coming back to parent.

Approach is just right, tho parent view's navbar still overlaps the child and there's navbar blinking glitch when you swipe the child to move back. — Codetard, Apr 23 '18 at 12:34

Deepak Kumar · Answer 3 · 2015-10-22T17:53:43.080

This is the swift version of how to change navigation bar color on different pages.

You can write this line of code in the viewDidLoad() method of any view controller in which you want to change the color of navigation bar.

self.navigationController!.navigationBar.barTintColor = UIColor.orangeColor()

and then you can use the method viewWillAppear() method so that when you come back to the same view controller from another different controller the color remains same

viewWillAppear(){
self.navigationController!.navigationBar.barTintColor = UIColor.orangeColor()
}

score 0 · Answer 4 · edited Oct 30 '20 at 00:44

Swift 4+

super.viewDidLoad()

    let newBackButton = UIBarButtonItem(title: "B",
    style: UIBarButtonItem.Style.plain, target: self, action: "backAction")
        navigationController?.navigationBar.topItem?.backBarButtonItem = newBackButton
    newBackButton.tintColor = .red
    // Do any additional setup after loading the view.
}

func backAction() -> Void {
    self.navigationController?.popViewController(animated: true)
}

this is the result

iOS Different navigation bar color on different pages

4 Answers4

Linked