Geek Answers Handbook

Color Transition UINavigationBar?

Basically, I try to duplicate the behavior of the iPod application on the iPhone, where when you select a song, the music player is displayed and the navigation bar changes to a new color.

My application is configured as a tab-based application, with a UITabBarController and a nested UINavigationController on each tab. Inside each UINavigationController for each tab is a UITableView. When I select an item in the table, I use pushViewController to go to the next view, and I set hidesBottomBarWhenPushed in the next view controller to shift the tabs. The behavior is very close to the iPod page "Now Playing", which is almost perfect.

The last problem is that I cannot change the color of the navigation bar, for example, how the navigation bar in the iPod app disappears from blue to black. I can force the color change after a new view appears (in viewWillAppear ), but the change is sharp and does not mimic the behavior of the iPod application with a fade effect.

Does anyone know what I'm missing here? This seems like a very simple and common user interface that I have seen in several applications, but there seems to be no obvious way to do this.

+4
source share
3 answers

You can animate the change in the style of the status bar to create an effect that is pretty close.

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

As you noticed, the style of the navigation bar changes immediately, but an animated change in the status bar still provides a general view of the transition.

+3
source

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

  • Provide functionality through a category instead of a subclass. Many, much less randomly.
  • Use only a transition when it is absolutely necessary. The reason for this is that when using this method, the source text of the header simply disappears, and does not slip to the side. This is subtle, but much more noticeable if it occurs during the transition, when the style of the bar does not actually change. Therefore, I avoid this case.

Here is my category code (I have it in the UINavigationBar and UIToolbar categories):

 - (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 here 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]; }
+9
source

I have prepared a solution that may be more than what you are looking for.

  • Create your own 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 controllers to use this subclass.
    • In IB, you can just set the class in the inspector
+2
source

More articles:


All Articles