web-dev-qa-db-fra.com

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. Y a-t-il un moyen de changer la couleur?

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

Toute opinion serait très appréciée.

280
Roby

Approche moderne

De manière moderne, pour tout le contrôleur de navigation… faites-le une fois, lorsque la vue racine de votre contrôleur de navigation est chargée.

[self.navigationController.navigationBar setTitleTextAttributes:
   @{NSForegroundColorAttributeName:[UIColor yellowColor]}];

Cependant, cela ne semble pas avoir d'effet dans les vues suivantes.

Approche classique

L'ancien moyen, contrôleur de vue (ces constantes sont pour iOS 6, mais si vous voulez le faire par contrôleur de vue sur l'apparence de iOS 7, vous souhaiterez la même approche, mais avec des constantes différentes):

Vous devez utiliser une UILabel comme titleView de la navigationItem.

L'étiquette devrait:

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

Définissez la couleur du texte de l'étiquette sur la couleur que vous souhaitez. Vous voulez une couleur qui n'entraîne pas le fondu du texte, ce qui serait difficile à lire.

J'ai essayé de résoudre ce problème par essais et erreurs, mais les valeurs que j'ai proposées sont finalement trop simples pour qu'elles ne soient pas ce que Apple a été choisi. :)

Si vous voulez le vérifier, déposez ce code dans initWithNibName:bundle: dans PageThreeViewController.m sur exemple NavBar d’Apple . Cela remplacera le texte par une étiquette jaune. Cela devrait être impossible à distinguer de l'original produit par le code 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 également la réponse d'Erik B ci-dessous. Mon code montre l'effet, mais son code offre un moyen plus simple de le placer en place sur un contrôleur de vue existant.

421
Steven Fisher

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

Vous pouvez utiliser la fonction setTitleTextAttributes de UINavigationBar pour définir la couleur de la police, la couleur, le décalage et la couleur des ombres.

De plus, vous pouvez définir les mêmes attributs de texte de titre UINavigationBar par défaut pour tous les UINavigationBars 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];
226
Alex R. R.

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

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

Basé sur 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, en plus de traiter correctement le cadre, est que si vous modifiez le titre de votre contrôleur, la vue du titre personnalisé sera également mise à jour. Pas besoin de le mettre à jour manuellement.

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

127
Erik B

La plupart des suggestions ci-dessus sont obsolètes, pour 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 de texte pouvant être définies.

40
girish_vr

Dans IOS 7 et 8, vous pouvez changer la couleur du titre en vert

self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor greenColor] forKey:NSForegroundColorAttributeName];
38
Pramesh

Pour garder la question à jour, j'ajouterai la solution Alex RR , mais dans Swift :

self.navigationController.navigationBar.barTintColor = .blueColor()
self.navigationController.navigationBar.tintColor = .whiteColor()
self.navigationController.navigationBar.titleTextAttributes = [
    NSForegroundColorAttributeName : UIColor.whiteColor()
]

Quels résultats pour:

enter image description here

22
Michal

Méthode 1 , définissez-la dans IB:

enter image description here

Méthode 2 , une ligne de code:

navigationController?.navigationBar.barTintColor = UIColor.blackColor()
14
fujianjin6471

La solution de tewha fonctionne bien si vous essayez de changer la couleur d’une page, mais je veux pouvoir changer la couleur de chaque page. J'ai fait quelques petites modifications pour que cela fonctionne pour toutes pages sur un UINavigationController

NavigationDelegate.h

//This will change the color of the navigation bar
#import <Foundation/Foundation.h>
@interface NavigationDelegate : NSObject<UINavigationControllerDelegate> {
}
@end

NavigationDelegate.m

#import "NavigationDelegate.h"
@implementation NavigationDelegate

- (void)navigationController:(UINavigationController *)navigationController 
      willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
    CGRect frame = CGRectMake(0, 0, 200, 44);//TODO: Can we get the size of the text?
    UILabel* label = [[[UILabel alloc] initWithFrame:frame] autorelease];
    label.backgroundColor = [UIColor clearColor];
    label.font = [UIFont boldSystemFontOfSize:20.0];
    label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
    label.textAlignment = UITextAlignmentCenter;
    label.textColor = [UIColor yellowColor];
    //The two lines below are the only ones that have changed
    label.text=viewController.title;
    viewController.navigationItem.titleView = label;
}
@end
13
Casebash

À partir de iOS 5, nous devons définir la couleur du texte du titre et la police de la barre de navigation à l'aide de titleTextAttribute Dictionary (dictionnaire prédéfini dans la référence de la classe du contrôleur UInavigation).

 [[UINavigationBar appearance] setTitleTextAttributes:
 [NSDictionary dictionaryWithObjectsAndKeys:
  [UIColor blackColor],UITextAttributeTextColor, 
[UIFont fontWithName:@"ArialMT" size:16.0], UITextAttributeFont,nil]];
13
Sandeep

Swift Version

J'ai trouvé que la plupart d'entre vous ont présenté les réponses de la version Objective_C

J'aimerais implémenter cette fonction en utilisant Swift pour tous ceux qui en ont besoin.

dans ViewDidload

1.Pour rendre NavigationBar l’arrière-plan devient couleur (par exemple: BLEU)

self.navigationController?.navigationBar.barTintColor = UIColor.blueColor()

2.Pour que la barre de navigation devienne Image (par exemple: ABC.png)

let barMetrix = UIBarMetrics(rawValue: 0)!

self.navigationController?.navigationBar
      .setBackgroundImage(UIImage(named: "ABC"), forBarMetrics: barMetrix)

3.Pour modifier le titre de la barre de navigation (par exemple: [Police: Futura, 10] [Couleur: rouge])

navigationController?.navigationBar.titleTextAttributes = [
            NSForegroundColorAttributeName : UIColor.redColor(),
            NSFontAttributeName : UIFont(name: "Futura", size: 10)!
        ]

(indice 1: n'oubliez pas le signe "!" après le UIFont)

(indice 2: il y a beaucoup d'attributs du texte du titre, cliquez sur "NSFontAttributeName" pour entrer la classe et la vue, les noms et les types d'objet requis)

J'espère pouvoir vous aider!: D

12
Microos

Utilisez le code ci-dessous dans n’importe quelle méthode viewDidLoad ou ViewWillAppear du contrôleur de vue.

- (void)viewDidLoad
{
    [super viewDidLoad];

    //I am using UIColor yellowColor for an example but you can use whatever color you like   
    self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor yellowColor]};

    //change the title here to whatever you like
    self.title = @"Home";
    // Do any additional setup after loading the view.
}
10
Gaurav Gilani

Court et doux.

[[[self navigationController] navigationBar] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor redColor]}];
9
Pier-Luc Gendreau

Ceci est ma solution basée sur Stevens

La seule différence réelle est que je mets quelques manipulations pour ajuster la position si, en fonction de la longueur du texte, semble être similaire à la façon dont Apple le fait

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(([self.title length] < 10 ? UITextAlignmentCenter : UITextAlignmentLeft), 0, 480,44)];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.font = [UIFont boldSystemFontOfSize: 20.0f];
titleLabel.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
titleLabel.textAlignment = ([self.title length] < 10 ? UITextAlignmentCenter : UITextAlignmentLeft);
titleLabel.textColor = [UIColor redColor];
titleLabel.text = self.title;
self.navigationItem.titleView = titleLabel;
[titleLabel release];

Vous voudrez peut-être ajuster la valeur 10 en fonction de la taille de votre police

8
Anthony Main

Il est recommandé de définir self.title car il est utilisé pour pousser des barres de navigation enfant ou pour afficher le titre sur des tabulations.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // create and customize title view
        self.title = NSLocalizedString(@"My Custom Title", @"");
        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
        titleLabel.text = self.title;
        titleLabel.font = [UIFont boldSystemFontOfSize:16];
        titleLabel.backgroundColor = [UIColor clearColor];
        titleLabel.textColor = [UIColor whiteColor];
        [titleLabel sizeToFit];
        self.navigationItem.titleView = titleLabel;
        [titleLabel release];
    }
}
6
Ramesh

Je suis tombé sur le problème avec mes boutons de navigation jetant le texte hors du centre (lorsque vous n'avez qu'un seul bouton). Pour remédier à cela, je viens de changer la taille de mon cadre de la manière suivante:

CGRect frame = CGRectMake(0, 0, [self.title sizeWithFont:[UIFont boldSystemFontOfSize:20.0]].width, 44);
6
coryjacobsen

J'ai personnalisé l'image d'arrière-plan de la barre de navigation et l'élément du bouton gauche, et le titre gris ne correspond pas à l'arrière-plan. Alors j'utilise:

[self.navigationBar setTintColor:[UIColor darkGrayColor]];

pour changer la couleur de teinte en gris. Et le titre est blanc maintenant! C'est ce que je veux.

J'espère aider aussi :)

6
Shiny

C’est un très vieux sujet, mais je pense fournir une réponse pour définir la couleur, la taille et la position verticale du titre de la barre de navigation pour iOS 7 et versions ultérieures.

Pour la couleur et la taille

 NSDictionary *titleAttributes =@{
                                NSFontAttributeName :[UIFont fontWithName:@"Helvetica-Bold" size:14.0],
                                NSForegroundColorAttributeName : [UIColor whiteColor]
                                };

pour position verticale

[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:-10.0 forBarMetrics:UIBarMetricsDefault];

Définir le titre et assigner le dictionnaire d'attributs

[[self navigationItem] setTitle:@"CLUBHOUSE"];
self.navigationController.navigationBar.titleTextAttributes = titleAttributes;
6
Abdullah Saeed

Cela fonctionne pour moi dans Swift:

navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName:UIColor.white]
5
zumzum
self.navigationItem.title=@"Extras";
[self.navigationController.navigationBar setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"HelveticaNeue" size:21], NSFontAttributeName,[UIColor whiteColor],UITextAttributeTextColor,nil]];
4
Paresh Hirpara

pour définir la taille de police du titre, j’ai utilisé les conditions suivantes .. peut être utile à tout le monde

if ([currentTitle length]>24) msize = 10.0f;
    else if ([currentTitle length]>16) msize = 14.0f;
    else if ([currentTitle length]>12) msize = 18.0f;
3
Shefali Soni

Une mise à jour du message d'Alex R. R. utilisant les nouveaux attributs de texte iOS 7 et l'Object C moderne pour moins de bruit:

NSShadow *titleShadow = [[NSShadow alloc] init];
titleShadow.shadowColor = [UIColor blackColor];
titleShadow.shadowOffset = CGSizeMake(-1, 0);
NSDictionary *navbarTitleTextAttributes = @{NSForegroundColorAttributeName:[UIColor whiteColor],
                                            NSShadowAttributeName:titleShadow};

[[UINavigationBar appearance] setTitleTextAttributes:navbarTitleTextAttributes];
3
phatblat

Utilisez comme ceci pour le support d'orientation

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,40)];
[view setBackgroundColor:[UIColor clearColor]];
[view setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight ];

UILabel *nameLabel = [[UILabel alloc] init];
[nameLabel setFrame:CGRectMake(0, 0, 320, 40)];
[nameLabel setBackgroundColor:[UIColor clearColor]];
[nameLabel setAutoresizingMask:UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin |UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin];
[nameLabel setTextColor:[UIColor whiteColor]];
[nameLabel setFont:[UIFont boldSystemFontOfSize:17]];
[nameLabel setText:titleString];
[nameLabel setTextAlignment:UITextAlignmentCenter];
[view addSubview:nameLabel];
[nameLabel release];
self.navigationItem.titleView = view;
[view release];
3
Nikesh K

Je crois que la manière appropriée de définir la couleur de UINavigationBar est:

NSDictionary *attributes=[NSDictionary dictionaryWithObjectsAndKeys:[UIColor redColor],UITextAttributeTextColor, nil];
self.titleTextAttributes = attributes;

Le code ci-dessus est écrit est la sous-classe sur UINavigationBar, fonctionne évidemment sans sous-classe.

2
stringCode

C'est l'une de ces choses qui manque. Votre meilleur choix est de créer votre propre barre de navigation personnalisée, d'ajouter une zone de texte et de manipuler la couleur de cette façon.

2
David McGraw

Version Swift 4:

self.navigationController.navigationBar.titleTextAttributes = [
        NSAttributedStringKey.foregroundColor: UIColor.green]
2
Patricio Bravo

Après avoir rencontré le même problème (que d'autres) de l'étiquette qui bouge lorsque nous insérons un bouton dans la barre de navigation (dans mon cas, j'ai une roulette que je remplace par un bouton lorsque la date est chargée), les solutions ci-dessus ne fonctionnaient pas Pour moi, voici donc ce qui a fonctionné et qui a gardé l’étiquette au même endroit tout le temps:

- (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
    //CGRect frame = CGRectMake(0, 0, [self.title sizeWithFont:[UIFont boldSystemFontOfSize:20.0]].width, 44);
   CGRect frame = CGRectMake(0, 0, 180, 44);
    UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];



    label.backgroundColor = [UIColor clearColor];
    label.font = [UIFont boldSystemFontOfSize:20.0];
    label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
    label.textAlignment = UITextAlignmentCenter;
    label.textColor = [UIColor yellowColor];
    self.navigationItem.titleView = label;
    label.text = NSLocalizedString(@"Latest Questions", @"");
    [label sizeToFit];
}

return self;
2
john

Vous devriez appeler [label sizeToFit]; après avoir défini le texte pour éviter des décalages étranges lorsque l’étiquette est automatiquement repositionnée dans la vue du titre lorsque d’autres boutons occupent la barre de navigation.

1
George

Peut utiliser cette méthode dans un fichier appdelegate et à tout moment

+(UILabel *) navigationTitleLable:(NSString *)title
{
CGRect frame = CGRectMake(0, 0, 165, 44);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.font = NAVIGATION_TITLE_LABLE_SIZE;
label.shadowColor = [UIColor whiteColor];
label.numberOfLines = 2;
label.lineBreakMode = UILineBreakModeTailTruncation;    
label.textAlignment = UITextAlignmentCenter;
[label setShadowOffset:CGSizeMake(0,1)]; 
label.textColor = [UIColor colorWithRed:51/255.0 green:51/255.0 blue:51/255.0 alpha:1.0];

//label.text = NSLocalizedString(title, @"");

return label;
}
1
sinh99

titleTextAttributes Attributs d’affichage pour le texte du titre de la barre.

@property (nonatomic, copy) NSDictionary * titleTextAttributes Discussion Vous pouvez spécifier la police, la couleur du texte, la couleur de l'ombre de texte et le décalage de l'ombre de texte pour le titre dans le dictionnaire d'attributs de texte, à l'aide des clés d'attribut de texte décrites dans Référence de NSString UIKit Additions.

Disponibilité Disponible dans iOS 5.0 et versions ultérieures. Déclaré dans UINavigationBar.h

1
dip

J'utilise le code ci-dessous pour iOS 9 et il fonctionne bien pour moi. J'ai aussi utilisé la couleur des ombres pour le titre.

self.navigationItem.title = @"MY NAV TITLE";
self.navigationController.navigationBar.barTintColor = [UIColor redColor];
self.navigationController.navigationBar.translucent = NO;
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
shadow.shadowOffset = CGSizeMake(0, 1);
[self.navigationController.navigationBar setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                                                       [UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,
                                                       shadow, NSShadowAttributeName,
                                                       [UIFont fontWithName:@"HelveticaNeue-Light" size:21.0], NSFontAttributeName, nil]];

Puisse ceci vous aider.

Merci

0
Ashu

Afin de rendre la solution géniale d'Erik B plus utilisable avec les différents UIVIewCOntrollers de votre application, je recommande d'ajouter une catégorie pour UIViewController et de déclarer sa méthode setTitle: title à l'intérieur. Ainsi, vous obtiendrez le changement de couleur du titre sur tous les contrôleurs de vue sans qu'il soit nécessaire de les dupliquer.

Une chose à noter cependant est que vous n’avez pas besoin de [super setTItle: tilte]; dans le code d'Erik et qu'il vous faudra appeler explicitement self.title = @ "mon nouveau titre" dans vos contrôleurs de vue pour que cette méthode soit appelée

@implementation UIViewController (CustomeTitleColor)

- (void)setTitle:(NSString *)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 blueColor]; // Change to desired color

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

@fin

0
Abolfoooud