150 votes

Couleur du texte du titre de la barre de navigation de l'iPhone

Il semble que la couleur du titre de la barre de navigation iOS soit blanche par défaut. Existe-t-il un moyen de la changer pour une autre couleur ?

Je suis conscient de la navigationItem.titleView en utilisant une image. Comme mes compétences en matière de conception sont limitées et que je n'ai pas réussi à obtenir le glossy standard, je préfère changer la couleur du texte.

Tout commentaire serait très apprécié.

224voto

Steven Fisher Points 22249

Vous devez utiliser un UILabel comme le titleView de la navigationItem .

L'étiquette doit :

  • Avoir une couleur de fond claire ( label.backgroundColor = [UIColor clearColor] ).
  • Utilisez une police système en gras de 20 pt ( label.font = [UIFont boldSystemFontOfSize: 20.0f] ).
  • Avoir une ombre de noir avec 50% d'alpha ( label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5] ).
  • Vous voudrez également régler l'alignement du texte sur centré ( label.textAlignment = NSTextAlignmentCenter ( UITextAlignmentCenter pour les anciens SDK).

Définissez la couleur du texte de l'étiquette comme étant la couleur personnalisée de votre choix. Vous devez choisir une couleur qui n'entraîne pas un effet d'ombre sur le texte, ce qui rendrait la lecture difficile.

J'ai travaillé par essais et erreurs, mais les valeurs que j'ai trouvées sont finalement trop simples pour ne pas être celles choisies par Apple :)

Si vous voulez le vérifier, déposez ce code dans le fichier initWithNibName:bundle: sur PageThreeViewController.m de Exemple de la barre de navigation d'Apple . Cela remplacera le texte par une étiquette jaune. Il devrait être impossible de le distinguer de l'original produit par le code d'Apple, à l'exception de la couleur.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self)
    {
        // this will appear as the title in the navigation bar
        UILabel *label = [[[UILabel alloc] initWithFrame:CGRectZero] autorelease];
        label.backgroundColor = [UIColor clearColor];
        label.font = [UIFont boldSystemFontOfSize:20.0];
        label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
        label.textAlignment = NSTextAlignmentCenter;
                           // ^-Use UITextAlignmentCenter for older SDKs.
        label.textColor = [UIColor yellowColor]; // change this color
        self.navigationItem.titleView = label;
        label.text = NSLocalizedString(@"PageThreeTitle", @"");
        [label sizeToFit];
    }

    return self;
}

Edit : Lisez aussi la réponse d'Erik B ci-dessous. Mon code montre l'effet, mais son code offre un moyen plus simple de le mettre en place sur un contrôleur de vue existant.

163voto

Alex R. R. Points 1888

Je sais que c'est un vieux sujet, mais je pense qu'il serait utile de savoir pour les nouveaux utilisateurs que iOS 5 apporte une nouvelle propriété pour établir les propriétés des titres.

Vous pouvez utiliser la fonction setTitleTextAttributes de UINavigationBar pour définir la police, la couleur, le décalage et la couleur de l'ombre.

En outre, vous pouvez définir les mêmes attributs par défaut du texte du titre de la barre d'UINavigation pour toutes les barres d'UINavigation de votre application.

Par exemple, comme ceci :

NSDictionary *navbarTitleTextAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
                                            [UIColor whiteColor],UITextAttributeTextColor, 
                                            [UIColor blackColor], UITextAttributeTextShadowColor, 
                                            [NSValue valueWithUIOffset:UIOffsetMake(-1, 0)], UITextAttributeTextShadowOffset, nil];

[[UINavigationBar appearance] setTitleTextAttributes:navbarTitleTextAttributes];

115voto

Erik B Points 12343

Sur la base de la réponse de Steven Fisher, j'ai écrit ce morceau de code :

- (void)setTitle:(NSString *)title
{
    [super setTitle:title];
    UILabel *titleView = (UILabel *)self.navigationItem.titleView;
    if (!titleView) {
        titleView = [[UILabel alloc] initWithFrame:CGRectZero];
        titleView.backgroundColor = [UIColor clearColor];
        titleView.font = [UIFont boldSystemFontOfSize:20.0];
        titleView.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];

        titleView.textColor = [UIColor yellowColor]; // Change to desired color

        self.navigationItem.titleView = titleView;
        [titleView release];
    }
    titleView.text = title;
    [titleView sizeToFit];
}

L'avantage de ce code, outre le fait qu'il gère correctement le cadre, est que si vous modifiez le titre de votre contrôleur, la vue personnalisée du titre sera également mise à jour. Il n'est pas nécessaire de la mettre à jour manuellement.

Un autre grand avantage est qu'il est très simple d'activer la couleur personnalisée du titre. Tout ce que vous avez à faire est d'ajouter cette méthode au contrôleur.

113voto

minux Points 1703

Dans iOS 5, vous pouvez modifier la couleur du titre de la barre de navigation de cette manière :

navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor yellowColor]};

29voto

girish_vr Points 1611

La plupart des suggestions ci-dessus sont désormais obsolètes, pour l'utilisation d'iOS 7.

NSDictionary *textAttributes = [NSDictionary dictionaryWithObjectsAndKeys: 
                               [UIColor whiteColor],NSForegroundColorAttributeName, 
                               [UIColor whiteColor],NSBackgroundColorAttributeName,nil];

self.navigationController.navigationBar.titleTextAttributes = textAttributes;
self.title = @"Title of the Page";

Consultez également le fichier NSAttributedString.h pour connaître les différentes propriétés du texte qui peuvent être définies.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X