Couleur de la flèche du bouton retour UIBarButton iOS 7


172

J'essaye de changer la flèche du bouton retour

entrez la description de l'image ici

J'utilise actuellement ce qui suit pour contrôler la taille du texte ainsi que la couleur du texte sur le bouton de retour:

[[UIBarButtonItem appearance] setTitleTextAttributes:
  [NSDictionary dictionaryWithObjectsAndKeys:
    [UIColor whiteColor], UITextAttributeTextColor,
    [UIFont boldSystemFontOfSize:16.0f], UITextAttributeFont,
    [UIColor darkGrayColor], UITextAttributeTextShadowColor,
    [NSValue valueWithCGSize:CGSizeMake(0.0, -1.0)], UITextAttributeTextShadowOffset,
  nil] forState:UIControlStateNormal];

mais si je veux changer uniquement la couleur de la flèche pour le bouton de retour, que dois-je faire?


Avez-vous trouvé une solution pour changer la couleur de la flèche pour le bouton de retour?
OnkarK

1
@OMK J'ai fini par changer mon infolistproperty NavBarColor pour le faire fonctionner, puis définir le navbarcolor réel sur une couleur différente. Je ne sais pas ce qui se passait, mais cette solution a fonctionné pour moi
kevinl

1
Le comportement de certaines propriétés de UINavigationBara changé depuis iOS 7. Jetez un œil à la réponse pour voir également l'effet de certaines autres propriétés .
Bhavin

s'il vous plaît aider avec ce problème: stackoverflow.com/questions/29923813/…
MIloš Kresović

Réponses:


438

Pour changer la couleur du chevron du bouton de retour pour un contrôleur de navigation spécifique *:

self.navigationController.navigationBar.tintColor = [UIColor whiteColor];

* Si vous utilisez une application avec plus d'un contrôleur de navigation et que vous souhaitez que cette couleur de chevron s'applique à chacun, vous pouvez utiliser le proxy d'apparence pour définir le chevron du bouton de retour pour chaque contrôleur de navigation, comme suit:

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

Et pour faire bonne mesure, en rapide (merci à Jay Mayu dans les commentaires):

UINavigationBar.appearance().tintColor = UIColor.whiteColor()

3
Cela ne s'appliquera à l'ensemble de l'application que si vous utilisez le même contrôleur de navigation pour l'ensemble de votre application. Je recommande en fait la suggestion de Bart.
Kyle Clegg

1
J'ai mis à jour ma réponse avec une note sur plusieurs contrôleurs de navigation. Je ne suis toujours pas d'accord pour dire que la suggestion de Bart est la réponse «correcte», car il y a beaucoup d'autres effets secondaires lorsque vous définissez la couleur de teinte de l'application entière. De plus, la question originale ne demandait pas comment thématiser l'ensemble de l'application, elle demandait seulement comment thématiser le bouton de retour.
DiscDev

1
Cela ne semble pas définir la couleur du chevron arrière.
jcampbell1

2
@ jcampbell1 - J'utilise cela avec succès dans plusieurs de mes applications ... peut-être que vous n'avez pas lu la mise en garde concernant plusieurs UINavigationControllers.
DiscDev

7
pour swiftUINavigationBar.appearance().tintColor = UIColor.whiteColor()
Jay Mayu

57

Vous devez définir le tintColor de l'ensemble de l'application.

self.window.tintColor = [UIColor redColor];

Ou dans Swift 3:

self.window?.tintColor = UIColor.blue

Source: Guide de transition de l'interface utilisateur iOS 7


4
Si vous souhaitez uniquement définir la couleur du chevron du bouton de retour (et non de l'application entière), comme indiqué dans la question d'origine, ce n'est pas la bonne réponse. Voir ma réponse ici pour la bonne réponse: stackoverflow.com/a/18809412/1103584
DiscDev

J'ai utilisé ceci dans mon délégué d'application pour changer mes boutons de retour en noir. Placer dans la méthode applicationDidFinishLaunchingWithOptions ... window.tintColor = [UIColor blackColor];
Marc Watson

Cela ne peut pas fonctionner sur iOS 6. Quelqu'un sait quoi faire?
Gavjr

1
Cela l'a amené à affecter le tintColor de l'ensemble de l'application, qui comprend tout UIActivityViewController (pour le partage) et le MFMailComposeViewController (pour l'envoi d'e-mails). Ces dialogues supposent que le tintColor n'a pas été modifié avec .... et peut entraîner des interactions de couleurs laides.
Mike Lambert

Cela modifie la couleur de teinte de nombreux autres objets, tels que le curseur clignotant dans UITextField. Certainement pas recommandé.
Hunter Monk

55

Vous pouvez définir la couleur sur toute la barre de navigation de l'application à l'aide de la méthode

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions{
    [[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
}

23

Il est possible de changer uniquement la couleur de la flèche (pas la couleur du titre du bouton de retour) de cette manière:

[[self.navigationController.navigationBar.subviews lastObject] setTintColor:[UIColor blackColor]];

La barre de navigation contient une sous-vue du type _UINavigationBarBackIndicatorView (dernier élément du tableau des sous-vues) qui représente la flèche.

Le résultat est une barre de navigation avec différentes couleurs de flèche du bouton de retour et de titre du bouton de retour


4
Dépendre de l'ordre des sous-vues des vues système est une mauvaise idée.
Glenn Maynard

2
cela a fonctionné, lors de la définition de self.navigationController.navigationBar.tintColor ne fonctionnait pas.
Rich Fox

@GlennMaynard Vous avez raison - la meilleure façon d'implémenter cela serait de parcourir le tableau de sous-vues renvoyées par self.navigationController.navigationBar.subviewsjusqu'à ce que le bouton Précédent soit trouvé.
Evan R

@EvanR alors que la solution de selmad a fonctionné pour moi, itérer dans le tableau des sous-vues n'a pas fonctionné (ce que j'ai essayé en premier parce que je suis d'accord avec vous qu'il serait sage de le faire). Si cela fonctionne pour vous, veuillez ajouter un exemple. Merci.
jungledev

22

Si vous utilisez des storyboards, vous pouvez définir la couleur de teinte de la barre de navigation.

entrez la description de l'image ici

entrez la description de l'image ici


Exactement ce que je cherchais. Je vous remercie!
Chad Lewis

11

À l'intérieur du rootViewController qui initialise le navigationController, j'ai mis ce code dans ma méthode viewDidAppear:

//set back button color
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,nil] forState:UIControlStateNormal];
//set back button arrow color
[self.navigationController.navigationBar setTintColor:[UIColor whiteColor]];

2
UITextAttributeTextColor est obsolète dans iOS 7 - utilisez NSForegroundColorAttributeName
amergin

7

Dans iOS 6, tintColor a teinté l'arrière-plan des barres de navigation, des barres d'onglets, des barres d'outils, des barres de recherche et des barres d'étendue. Pour teinter un arrière-plan de barre dans iOS 7, utilisez plutôt la propriété barTintColor.

Ressources de conception iOS 7 Guide de transition de l'interface utilisateur iOS 7


2
C'est la bonne! ... placez-le dans le délégué d'application. Fonctionne comme un charme! window.tintColor = [UIColor blackColor]; // Je voulais du noir
Marc Watson

6

Vous pouvez définir la tintColorpropriété sur le bouton (ou l'élément de bouton de barre) ou la vue du contrôleur de vue. Par défaut, la propriété héritera de la teinte de la vue parente, jusqu'au niveau supérieur UIWindowde votre application.


1
Merci pour la réponse. Cependant, cela fonctionne un peu différemment sur iOS 7. Mon ancien code utilisait tintColor, mais iOS 7 ne semble pas beaucoup l'apprécier. J'ai fini par utiliser le guide officiel de transition Apple Dev iOS 7 pour résoudre certains des problèmes d'interface utilisateur
kevinl

Voir ma réponse pour un exemple discret de la façon de procéder: stackoverflow.com/a/18809412/1103584
DiscDev

5

J'ai dû utiliser les deux:

[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] 
                     setTitleTextAttributes:[NSDictionary 
               dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,nil] 
                                   forState:UIControlStateNormal];

[[self.navigationController.navigationBar.subviews lastObject] setTintColor:[UIColor whiteColor]];

Et ça marche pour moi, merci pour tout le monde!


5
UINavigationBar *nbar = self.navigationController.navigationBar;

if (floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1) {
   //iOS 7
   nbar.barTintColor = [UIColor blueColor]; // bar color
   //or custom color 
   //[UIColor colorWithRed:19.0/255.0 green:86.0/255.0 blue:138.0/255.0 alpha:1];

   nbar.navigationBar.translucent = NO;

   nbar.tintColor = [UIColor blueColor]; //bar button item color

} else {
   //ios 4,5,6
   nbar.tintColor = [UIColor whiteColor];
   //or custom color
   //[UIColor colorWithRed:19.0/255.0 green:86.0/255.0 blue:138.0/255.0 alpha:1];

}

Génial. Ça m'a aidé. Merci
Yogesh Lolusare

4

Mettre à jour Swift 3

navigationController?.navigationItem.rightBarButtonItem?.tintColor = UIColor.yellow
navigationController?.navigationBar.tintColor = UIColor.red
navigationController?.navigationBar.barTintColor = UIColor.gray
navigationController?.navigationBar.titleTextAttributes =  [NSForegroundColorAttributeName: UIColor.blue]

Résultat: entrez la description de l'image ici


3

Juste pour changer la NavigationBarcouleur, vous pouvez définir la couleur de teinte comme ci-dessous.

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

Cela n'affectera pas la couleur de teinte dans iOS 7. Selon la documentation: «La définition de la propriété tintColor à l'aide des API de proxy d'apparence n'est pas prise en charge dans iOS 7.» lien
bachonk

3

Si vous créez un bouton de retour personnalisé basé sur UIButton avec une image de flèche, voici l'extrait de sous-classe. En l'utilisant, vous pouvez créer un bouton dans le code ou simplement attribuer une classe dans Interface Builder à n'importe quel UIButton. L'image de flèche arrière sera ajoutée automatiquement et colorée avec la couleur du texte.

@interface UIImage (TintColor)

- (UIImage *)imageWithOverlayColor:(UIColor *)color;

@end


@implementation UIImage (TintColor)

- (UIImage *)imageWithOverlayColor:(UIColor *)color
{
    CGRect rect = CGRectMake(0.0f, 0.0f, self.size.width, self.size.height);

    if (UIGraphicsBeginImageContextWithOptions) {
        CGFloat imageScale = 1.0f;
        if ([self respondsToSelector:@selector(scale)])
            imageScale = self.scale;
        UIGraphicsBeginImageContextWithOptions(self.size, NO, imageScale);
    }
    else {
        UIGraphicsBeginImageContext(self.size);
    }

    [self drawInRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetBlendMode(context, kCGBlendModeSourceIn);

    CGContextSetFillColorWithColor(context, color.CGColor);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

@end




#import "iOS7backButton.h"

@implementation iOS7BackButton

-(void)awakeFromNib
{
    [super awakeFromNib];

    BOOL is6=([[[UIDevice currentDevice] systemVersion] floatValue] <7);
    UIImage *backBtnImage = [[UIImage imageNamed:@"backArrow"] imageWithOverlayColor:self.titleLabel.textColor];
    [self setImage:backBtnImage forState:UIControlStateNormal];
    [self setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
    [self setImageEdgeInsets:UIEdgeInsetsMake(0, is6?0:-10, 0, 0)];


}


+ (UIButton*) buttonWithTitle:(NSString*)btnTitle andTintColor:(UIColor*)color {
    BOOL is6=([[[UIDevice currentDevice] systemVersion] floatValue] <7);
    UIButton *backBtn=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 30)];
    UIImage *backBtnImage = [[UIImage imageNamed:@"backArrow"] imageWithOverlayColor:color];
    [backBtn setImage:backBtnImage forState:UIControlStateNormal];
    [backBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, is6?5:-5, 0, 0)];
    [backBtn setImageEdgeInsets:UIEdgeInsetsMake(0, is6?0:-10, 0, 0)];
    [backBtn setTitle:btnTitle forState:UIControlStateNormal];
    [backBtn setTitleColor:color /*#007aff*/ forState:UIControlStateNormal];

    return backBtn;
}

@end

image du bouton retour @ 2x


3

Si vous souhaitez modifier uniquement la flèche arrière MAIS sur l'ensemble de l'application, procédez comme suit:

[[NSClassFromString(@"_UINavigationBarBackIndicatorView") appearance] 
  setTintColor:[UIColor colorWithHexString: @"#f00000"]];

Il y a une chance que cela vous fasse rejeter de l'App Store
Luc

@Luke, je l'ai utilisé avec succès plusieurs fois. Aucun rejet. Mais oui, le hasard existe toujours.
orkenstein

Il est toujours probable qu'il soit cassé dans la future version iOS
Lope

1
@Lope, oui, pourquoi pas. Je ne cherche pas de solution miracle.
orkenstein

L'itération des sous-vues sur iOS 10.1 montre que c'est toujours le nom de la classe, mais définir son apparence comme indiqué ici n'a aucun effet pour moi.
arlomedia

2

Dans iOS 7, vous pouvez insérer la ligne de code suivante application:didFinishLaunchingWithOptions:dans votre AppDelegate.mfichier:

[[UINavigationBar appearance] setTintColor:myColor];

Définissez myColorla couleur que vous souhaitez que le bouton de retour soit dans toute l'application. Pas besoin de le mettre dans chaque fichier.


0

Swift 2.0: Coloration de la barre de navigation et des boutons

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

0

Dans Swift 3, pour changer la couleur de la flèche du bouton de retour UIBarButton

self.navigationController?.navigationBar.tintColor = UIColor.black
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.