Comment changer la couleur de la barre de navigation dans iOS 7?


213

Comment changer la couleur de la barre de navigation dans iOS 7?

Fondamentalement, je veux réaliser quelque chose comme la barre de navigation Twitter (Twitter mis à jour pour iOS7cela). J'ai intégré une barre de navigation au sommet d'un view controller. Tout ce que je veux, c'est changer la couleur de la barre de navigation en bleu clair avec la barre utilitaire en haut. Je n'arrive pas à trouver une option dans mon storyboard.



[[Apparence UINavigationBar] setBarTintColor: [UIColor blackColor]]; cela fonctionnera à partir d'ios 7
Chandramani

Réponses:


319

Le comportement de tintColorfor bars a changé dans iOS 7.0. Il n'affecte plus l'arrière-plan de la barre.

De la documentation:

Référence de la classe barTintColor

La couleur de teinte à appliquer à l'arrière-plan de la barre de navigation.

@property(nonatomic, retain) UIColor *barTintColor

Discussion
Cette couleur est rendue translucide par défaut, sauf si vous définissez la propriété translucent sur NO.

Disponibilité

Disponible dans iOS 7.0 et versions ultérieures.

Déclaré dans
UINavigationBar.h

Code

NSArray *ver = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[ver objectAtIndex:0] intValue] >= 7) {
    // iOS 7.0 or later   
    self.navigationController.navigationBar.barTintColor = [UIColor redColor];
    self.navigationController.navigationBar.translucent = NO;
}else {
    // iOS 6.1 or earlier
    self.navigationController.navigationBar.tintColor = [UIColor redColor];
}

Nous pouvons également l'utiliser pour vérifier la version iOS comme mentionné dans le Guide de transition de l'interface utilisateur iOS 7

if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) {
        // iOS 6.1 or earlier
        self.navigationController.navigationBar.tintColor = [UIColor redColor];
    } else {
        // iOS 7.0 or later     
        self.navigationController.navigationBar.barTintColor = [UIColor redColor];
        self.navigationController.navigationBar.translucent = NO;
    }

EDIT En utilisant xib

entrez la description de l'image ici


3
mais où puis-je placer ce code ?? Je suis très nouveau dans ce hahah. Je l'ai placé dans le délégué de l'application et cela ne semble vraiment pas faire grand-chose. Il se construit très bien cependant.
Patricio Guerra

1
inside viewController
Rajneesh071

1
Je le mettrais dans viewDidLoad dans votre viewController.
HalR

2
if (floor (NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) Il serait préférable de tester sur quelle version iOS vous utilisez, comme indiqué par apple dans le guide de transition: developer.apple.com/library/ios/documentation/userexperience/…
David Thompson

1
Vous pouvez également utiliser if ([self.navigationController.navigationBar respondsToSelector: @selector (setBarTintColor :)]) vs le numéro de version pour vérifier si vous pouvez définir barTintColor
SimpsOff

129

Faire ce que la question d'origine demandait - pour obtenir l'ancien look de la barre de navigation de Twitter, fond bleu avec du texte blanc - est très facile à faire en utilisant simplement le générateur d'interface dans Xcode.

  • À l'aide du plan du document, sélectionnez votre barre de navigation.
  • Dans l'inspecteur d'attributs, dans le groupe Barre de navigation, changez le style de Par défaut en Noir. Cela change la couleur d'arrière-plan des barres de navigation et d'état en noir et leur texte en blanc. Ainsi, la batterie et les autres icônes et le texte dans la barre d'état seront blancs lorsque l'application est en cours d'exécution.
  • Dans le même groupe de barre de navigation, changez la teinte de la barre à la couleur de votre choix.
  • Si vous avez des éléments de bouton de barre dans votre barre de navigation, ceux-ci afficheront toujours leur texte dans la couleur bleue par défaut, donc dans l'inspecteur d'attributs, groupe Affichage, changez la teinte en couleur blanche.

Cela devrait vous procurer ce que vous voulez. Voici une capture d'écran qui permettrait de voir plus facilement où apporter les modifications.

Où apporter les modifications nécessaires, y compris le résultat dans iOS Simulator

Notez que la modification de la seule teinte de la barre ne modifie pas la couleur du texte dans la barre de navigation ou la barre d'état. Le style doit également être changé.


La sélection du noir pour iOS 9 est déconseillée, toute chance d'une réponse mise à jour
Rob85

@ Rob85 Je ne suis pas devant Xcode en ce moment, mais lorsque Xcode 7 (avec iOS 9) est sorti, j'ai vérifié que ces instructions étaient toujours à jour. Assurez-vous que la barre de navigation est sélectionnée, le style noir doit être dans l'inspecteur d'attributs de la barre de navigation.
alondono

2
@ Rob85 J'ai vérifié le site Web des développeurs d'Apple, et les styles Defaultet Blacksont toujours disponibles dans iOS 9. Les obsolètes sont BlackOpaqueet BlackTranslucent, qui ont été remplacés par une combinaison de Blackstyle et de la case à cocher Translucent. UIBarStyle sur le site Web des développeurs d'Apple
alondono

Désolé @alondono, vous avez tout à fait raison, je cliquais sur la barre de navigation du contrôleur de navigation pas dans l'aperçu du document, c'est pourquoi je ne pouvais pas le voir. Le noir que je vois obsolète était sur la barre d'état des mesures simulées->. Merci pour vos réponses
Rob85

@ Rob85 Cool! Merci de me le faire savoir.
alondono

76
self.navigationBar.barTintColor = [UIColor blueColor];
self.navigationBar.tintColor = [UIColor whiteColor];
self.navigationBar.translucent = NO;

// *barTintColor* sets the background color
// *tintColor* sets the buttons color

4
Et où puis-je mettre ce code exactement ?? Désolé pour la question de débutant là hahah
Patricio Guerra

1
le code peut être placé dans la méthode - (void) viewDidLoad du contrôleur de navigation
pNre

2
Dans iOS 9, le fait de définir la couleur de la barre de couleur sur noir rendra également l'heure, le nom de l'appareil et la batterie noirs, vous ne pourrez donc pas les voir. Pour éviter cela, au lieu d'utiliser barTintColor, utilisez self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
TheJeff

46

Dans une application basée sur la navigation, vous pouvez mettre le code dans AppDelegate. Un code plus détaillé pourrait être:

// Navigation bar appearance (background and title)

[[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor titleColor], NSForegroundColorAttributeName, [UIFont fontWithName:@"FontNAme" size:titleSize], NSFontAttributeName, nil]];

[[UINavigationBar appearance] setTintColor:[UIColor barColor]];

// Navigation bar buttons appearance

[[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor textBarColor], NSForegroundColorAttributeName, shadowColor, NSShadowAttributeName, [UIFont fontWithName:@"FontName" size:titleSize], NSFontAttributeName, nil];

6
ajouter [[UINavigationBar appearance] setBarTintColor:[UIColor barColor]];pour iOS 7
Samin

24

Dans viewDidLoad, définissez:

    self.navigationController.navigationBar.barTintColor = [UIColor blueColor];

Changez ( blueColor) pour la couleur que vous souhaitez.


18

Pour changer rapidement la couleur de la barre de navigation:

self.navigationController?.navigationBar.barTintColor = UIColor.red

changer la police du titre, la taille, la couleur:

self.title = "title"
self.navigationController?.navigationBar.titleTextAttributes = [
        NSAttributedString.Key.foregroundColor : UIColor.white,
        NSAttributedString.Key.font : UIFont(name: "Futura", size: 30)!
    ]

14

Dans iOS 7, vous devez utiliser la propriété -barTintColor:

navController.navigationBar.barTintColor = [UIColor barColor];

13

Si vous souhaitez utiliser un code hexadécimal, voici la meilleure façon de le faire.

Tout d'abord, définissez-le en haut de votre classe:

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

Puis à l'intérieur de "l'application didFinishLaunchingWithOptions", mettez ceci:

[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x00b0f0)];

Mettez votre code hexadécimal à la place du 00b0f0.


1
[UINavigationBar apparence] a été très utile.
Ken

11

Si vous devez prendre en charge ios6 et ios7, vous obtenez ce bleu clair particulier en l'utilisant dans votre UIViewController :

- (void)viewDidLoad {
    [super viewDidLoad];
    NSArray *ver = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
    if ([[ver objectAtIndex:0] intValue] >= 7) {
        self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:89/255.0f green:174/255.0f blue:235/255.0f alpha:1.0f];
        self.navigationController.navigationBar.translucent = NO;
    }else{
        self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:89/255.0f green:174/255.0f blue:235/255.0f alpha:1.0f];
    }
}

3
Sur iOS 7: -self.navigationController.navigationBar.barTintColor est la couleur de la barre ET -self.navigationController.navigationBar.tintColor est la couleur du texte des boutons (retour, terminé ...).
IgniteCoders

10

C'est en fait plus facile que les réponses que j'ai vues ici:

1) Just make sure you select the navigation bar on the Navigation control. 
2) Select the color you want in the bar tint.
3) You have other options too, and/or individually on each view (just play with it).

J'espère que cela aide quelqu'un. Je n'ai pas aimé les réponses que j'ai vues. J'aime garder mon code aussi propre que possible. Je ne dis pas que c'est mal de le faire par programme, mais il y a des gens comme moi ... c'est pour vous les gars. Changer la couleur de la barre de navigation


Merci, j'avais changé il y a quelques mois en jouant et je n'arrivais pas à comprendre comment le changer!
symétrique

Pas de problème, content d'avoir pu aider quelqu'un
pqsk

Je pense que c'est la réponse la plus simple! Thx
Ispas Claudiu

Aucun problème. Heureux que ce soit toujours utile
pqsk

5

Pour compléter le code de Rajneesh071, vous pouvez également définir la couleur du titre de la barre de navigation (et la police, si vous le souhaitez) car le comportement par défaut est passé d'iOS 6 à 7:

NSArray *ver = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[ver objectAtIndex:0] intValue] >= 7)
{
    self.navigationController.navigationBar.barTintColor = [UIColor blackColor];
    self.navigationController.navigationBar.translucent = NO;
    NSMutableDictionary *textAttributes = [[NSMutableDictionary alloc] initWithDictionary:mainNavController.navigationBar.titleTextAttributes];
    [textAttributes setValue:[UIColor whiteColor] forKey:UITextAttributeTextColor];
    self.navigationController.navigationBar.titleTextAttributes = textAttributes;
}
else
{
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
}

5

Ajoutez seulement ce code dans votre ViewContorller ou dans votreAppDelegate

if([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0)
{
    //This is For iOS6
    [self.navigationController.navigationBar setTintColor:[UIColor yellowColor]];
}
else
{
    //This is For iOS7
    [self.navigationController.navigationBar setBarTintColor:[UIColor yellowColor]];
}

4
//You could place this code into viewDidLoad
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationController.navigationBar.tintColor = [UIColor redColor];
    //change the nav bar colour
    self.navigationController.view.backgroundColor = [UIColor redColor];
    //change the background colour
    self.navigationController.navigationBar.translucent = NO;
 }   
//Or you can place it into viewDidAppear
- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:(BOOL)animated];
    self.navigationController.navigationBar.tintColor = [UIColor redColor];
    //change the nav bar colour
    self.navigationController.view.backgroundColor = [UIColor redColor];
    //change the background colour
    self.navigationController.navigationBar.translucent = NO;
}

4

Dans une application basée sur la navigation, vous pouvez changer de couleur

NSArray *ver = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[ver objectAtIndex:0] intValue] >= 7) {
    self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:19.0/255.0 green:86.0/255.0 blue:138.0/255.0 alpha:1];
    self.navigationController.navigationBar.translucent = NO;
} else {
    self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:19.0/255.0 green:86.0/255.0 blue:138.0/255.0 alpha:1];
}

1
La modification de la propriété tintColor dans iOS7 n'a plus pour effet de modifier la couleur d'arrière-plan des barres. La couleur de la teinte dans iOS7 n'affecte que la couleur du texte des BarButtonItems, etc.
Pascal Bayer

4
#define _kisiOS7 ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)


  if (_kisiOS7)
    {
        [[UINavigationBar appearance] setBarTintColor:[UIcolor redcolor]];
    }
    else
    {
        [[UINavigationBar appearance] setBackgroundColor:[UIcolor blackcolor]];
        [[UINavigationBar appearance] setTintColor:[UIcolor graycolor]];
    }

3

Cette question et ces réponses sont utiles. Avec eux, j'ai pu définir le bleu foncé souhaiténavigationBar avec le titre blanc et le texte du bouton.

Mais j'avais aussi besoin de changer l'horloge, la porteuse, la puissance du signal, etc. en blanc. Le noir ne contrastait pas assez avec le bleu foncé.

Je peux avoir négligé cette solution dans l' une des réponses précédentes, mais j'ai pu faire ce changement en ajoutant cette ligne à mon niveau supérieur viewControllerde viewDidLoad:

[self.navigationController.navigationBar setBarStyle:UIStatusBarStyleLightContent];

UIStatusBarStyleLightContentfonctionne, mais il semble que l'énumération correcte pour setBarStyle:estUIBarStyleBlack
Collin Allen

3
- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.barTintColor = [UIColor blueColor];
}

3

Pour la couleur:

[[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]];

Pour l'image

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navigationBar_320X44.png"] forBarMetrics:UIBarMetricsDefault];
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.