Transition des couleurs UINavigationBar?

Question

Je suis en train d'essayer de dupliquer le comportement de l'application iPod sur l'iPhone, où lorsque vous sélectionnez une chanson, la vue du lecteur de musique glisse, et la barre de navigation passe à une nouvelle couleur.

Mon application est configurée en tant qu'application à onglets, avec UITabBarController et un UINavigationController imbriqué dans chaque onglet. À l'intérieur de chaque UINavigationController pour chaque onglet est un UITableView. Lorsque je sélectionne un élément dans la table, j'utilise pushViewController pour passer à la vue suivante, et j'ai réglé hidesBottomBarWhenPushed dans le contrôleur de vue suivant afin de faire glisser les onglets. Le comportement est très proche de la page "Now Playing" de l'iPod, ce qui est presque parfait.

Le dernier problème est que je suis incapable de faire la transition de la couleur de la barre de navigation, comme la façon dont la barre de navigation de l'application iPod passe du bleu au noir. Je suis en mesure de forcer le changement de couleur après l'apparition de la nouvelle vue (viewWillAppear), mais le changement est brusque et ne mime pas le comportement de l'application iPod, avec un effet de fondu.

Est-ce que quelqu'un sait ce que je manque ici? Cela semble être une interface utilisateur très simple et commune que j'ai vu dans plusieurs applications, mais il ne semble pas y avoir de moyen évident de le faire.

Answer 1

Vous pouvez animer le changement de style de la barre d'état pour créer un effet assez proche.

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

Comme vous l'avez remarqué le style de la barre de navigation change immédiatement, mais le changement d'animation à la barre d'état donne encore l'apparence générale d'une transition.

Answer 2

J'ai cuisiné une solution qui pourrait être plus que ce que vous cherchez.

• Créez une sous-classe personnalisée de UINavigationBar.
• Remplacer setBarStyle: comme suit

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]; 
} 

• Configurez vos contrôleurs de nav utiliser cette sous-classe
  • Dans IB, il vous suffit de définir la classe dans l'inspecteur

Answer 3

réponse Andrew fonctionne en fait assez bien, mais j'ajouter deux choses à faire fonctionner mieux:

1. établissiez la fonctionnalité via une catégorie au lieu de sous-classement. Beaucoup, beaucoup moins salissant.
2. N'utilisez la transition que lorsque c'est absolument nécessaire. La raison en est que lorsque vous utilisez cette technique, le texte du titre original disparaît juste au lieu de glisser sur le côté. C'est subtil, mais beaucoup plus visible si cela se produit lors d'une transition où le style de la barre ne change pas réellement. Donc j'évite ce cas.

Voici mon code de catégorie (je l'ai dans les catégories à la fois UINavigationBar et 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]; 
} 

Et voilà comment je l'utilise:

- (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]; 
}