Transitioning UINavigationBar colors?

Question

I\'m basically trying to duplicate the behavior of the iPod app on the iPhone, where when you select a song, the music player view slides in, and the navigation bar transiti

Answer 1

Andrew's answer actually works pretty well, but I would add two things to make it work better:

1. Provide the functionality via a category instead of subclassing. Much, much less messy.
2. Only use the transition when absolutely necessary. The reason for this is that when using this technique, the original title text just fades away instead of also sliding off the side. It's subtle, but much more noticeable if it happens during a transition where the bar style isn't actually changing. So I avoid that case.

Here's my category code (I have it in categories of both UINavigationBar and UIToolbar):

- (void)setBarStyle:(UIBarStyle)barStyle animated:(BOOL)animated {
    if (animated && self.barStyle != barStyle) {
        CATransition *transition = [CATransition animation];
        transition.duration = 0.2;
        transition.timingFunction = [CAMediaTimingFunction
            functionWithName:kCAMediaTimingFunctionEaseIn];
        [self.layer addAnimation:transition forKey:nil];
    }

    [self setBarStyle:barStyle];
}

And this is how I use it:

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    [[UIApplication sharedApplication]
        setStatusBarStyle:UIStatusBarStyleBlackTranslucent animated:YES];
    [self.navigationController.navigationBar
        setBarStyle:UIBarStyleBlackTranslucent animated:YES];
    [self.navigationController.toolbar
        setBarStyle:UIBarStyleBlackTranslucent animated:YES];
}

Answer 2

I cooked a solution that might be more what you're looking for.

• Create a custom subclass of UINavigationBar.
• Override setBarStyle: as follows

code:

- (void)setBarStyle:(UIBarStyle)style {
    //Fade our content, ie background, from one style to another
    CATransition *transition = [[CATransition new] autorelease];
    transition.type = kCATransitionFade;
    transition.duration = 0.2;
    [self.layer addAnimation:transition forKey:@"content"];

    [super setBarStyle:style];
}

• Configure your nav controllers to use this subclass
  • In IB, you can just set the class in the inspector

Answer 3

You can animate the status bar style change to create an effect that's pretty close.

- (void)viewWillAppear:(BOOL)animated {
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:animated];
    self.navigationController.navigationBar.barStyle = UIBarStyleBlackOpaque;
}

As you've noticed the navigation bar style changes immediately, but the animated change to the status bar still provides the overall appearance of a transition.