web-dev-qa-db-fra.com

Comment positionner correctement le bouton de retour dans iOS7

J'ai utilisé ce code pour utiliser une image personnalisée comme bouton de retour dans toute l'application.

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back"]];

Les dimensions de l'image sont de 30 x 30.

Le code ajoute l'image comme bouton de retour mais la position n'est pas correcte, comme vous pouvez le voir dans l'image suivante:

back button not correct positioned

Avez-vous des idées sur la façon de positionner correctement l'image sans modifier ses dimensions (au moins la partie visuelle de l'image (cercle + flèche))?

ÉDITER:

Je ne veux pas utiliser de bouton de retour personnalisé car cela m'oblige à désactiver le glissement/retour dans iOS7

objective-cios7uinavigationbaruinavigationitem
32
Bernat

MODIFIER
Je pense que j'ai peut-être trouvé l'astuce (dans iOS 7 Design Resource - UIKit User Interface Catalog.)
Sous éléments du bouton de barre

Notez qu'une image de bouton de barre sera automatiquement rendue en tant qu'image de modèle dans une barre de navigation, sauf si vous définissez explicitement son mode de rendu sur UIImageRenderingModeAlwaysOriginal. Pour plus d'informations, voir Images de modèle.

Sous Images de modèle ils ont du code pour spécifier le UIImageRenderingMode.

UIImage *myImage = [UIImage imageNamed:@"back"];
UIImage *backButtonImage = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];  
// now use the new backButtomImage
[[UINavigationBar appearance] setBackIndicatorImage:backButtonImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backButtonImage];

Essayez de créer le UIImage avec des insertions d'alignement, puis définissez l'image de l'indicateur arrière.

UIEdgeInsets insets = UIEdgeInsetsMake(10, 0, 0, 0); // or (0, 0, -10.0, 0)
UIImage *alignedImage = [[UIImage imageNamed:@"back"] imageWithAlignmentRectInsets:insets];  
[[UINavigationBar appearance] setBackIndicatorImage:alignedImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:alignedImage];

Vous pouvez également essayer d'ajuster la position du texte du titre UINavigationBar

[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics];
21
race_carr

Eh bien, suivez simplement l'une des suggestions pour corriger la mise en page et perdre le "geste de retour" iOS 7, puis corrigez-le avec un UIScreenEdgePanGestureRecognizer !

Un UIScreenEdgePanGestureRecognizer recherche les mouvements de panoramique (glissement) qui commencent près d'un bord de l'écran. Dans certains cas, le système utilise des gestes de bordure d'écran pour lancer les transitions du contrôleur de vue. Vous pouvez utiliser cette classe pour répliquer le même comportement de geste pour vos propres actions.

8
Rivera

VEUILLEZ VOIR MODIFIER CI-DESSOUS !!!

J'ai créé un bouton de retour personnalisé dans iOS7 il n'y a pas si longtemps. Le mien a une flèche et la Parole dessus. Je pense que la suggestion de Pawan est un bon début. Pour créer le bouton de retour avec votre image personnalisée, vous pouvez utiliser,

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStylePlain target:self action:@selector(backButtonClicked)];
[backButton setBackgroundImage:finalImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[backButton setTitlePositionAdjustment:UIOffsetMake(-20, 0) forBarMetrics:UIBarMetricsDefault];

self.navigationItem.leftBarButtonItem = backButton;

Mon image finalImage est un composite de deux images différentes, mais vous pouvez simplement utiliser votre image "arrière". Mais je pense que c'est là que réside le problème. Mon image était un composite, vous voudrez peut-être également créer un composite, mais placez un espace clair au-dessus de votre icône arrière. J'ai placé un espace libre à droite de mon icône pour ajuster son espacement. Voici le code,

UIImage *arrow = [UIImage imageNamed:@"back.png"];
UIImage *wordSpace = [UIImage imageNamed:@"whiteSpace.png"];
CGSize size = CGSizeMake(arrow.size.width + wordSpace.size.width, arrow.size.height);
UIGraphicsBeginImageContext(size);
[arrow drawInRect:CGRectMake(0, 0, arrow.size.width, size.height)];
[wordSpace drawInRect:CGRectMake(arrow.size.width, 0, wordSpace.size.width, wordSpace.size.height)];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

L'image wordSpace est un png clair que j'ai créé dans Photoshop, donc ma nouvelle image de bouton de retour n'a pas été étirée. Vous voudrez peut-être placer un png clair sur le dessus, pour pousser un peu l'icône vers le bas. Faites la taille.hauteur de celui-ci dans Photoshop pour ce que vous pensez que le réglage devrait être. Vous pourriez avoir besoin de futz un peu avec cela. Et assurez-vous de changer la taille CGS afin qu'elle s'adapte à votre icône et à l'espace libre.

Ma parole était un peu décalée, alors j'ai regardé

[backButton setTitlePositionAdjustment:UIOffsetMake(-20, 0) forBarMetrics:UIBarMetricsDefault];

J'ai dû jouer un peu avec cette ligne pour la rendre aussi belle que possible, mais cela m'a finalement donné ce que je voulais avec le -20. J'ai même ajusté la deuxième variable qui est 0 dans la mienne, cela a déplacé l'icône réelle. -5 a mis l'icône trop loin, mais c'est une autre option du png clair.

Maintenant, pour faire face au fait que vous voulez que ce soit un véritable bouton de retour. Regardez la première ligne de code que j'ai publiée. L'action sur le bouton est @selector (backButtonClicked). Donc, tout ce que vous avez à faire est de faire cette méthode et vous devriez être prêt à partir!

- (void)backButtonClicked
{
  NSLog(@"going back");
  [self.navigationController popViewControllerAnimated:YES];
}

J'espère que ça aide un peu.

enter image description here

ÉDITER*****

Je jouais un peu avec mon code et j'ai trouvé une meilleure façon de déplacer l'icône de retour. Je viens d'utiliser une roue de navire parce que je n'avais pas la même que la vôtre, mais ça fonctionnera de la même façon.

Puisque vous ne voulez pas vraiment de titre, vous pouvez créer le bouton avec ce code,

UIImage *image = [UIImage imageNamed:@"781-ships-wheel.png"];

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(backButtonClicked)];

Modifiez simplement le code 781 avec le nom de votre icône. Ensuite, vous pouvez le déplacer avec ce qui suit,

[backButton setImageInsets:UIEdgeInsetsMake(20, 0, -20, 0)];

Jetez un oeil à cette photo.

pic one

Cela montre l'icône considérablement vers le bas, mais je voulais vous montrer l'idée. Les numéros des encarts Edge sont en haut, à gauche, en bas et à droite. Ne touchez pas à gauche et à droite si vous n'avez pas besoin de le déplacer de cette façon, changez le haut et le bas. Notez cependant que si vous devez le faire descendre de 20 points comme je l'ai fait, (beaucoup trop), vous devez compenser le négatif pour le bas, ou l'icône sera compressée. Voici à quoi cela ressemble avec tous les zéro.

pic with zeros

Vous pouvez donc à peu près le déplacer où vous le souhaitez, mais vous devrez toujours configurer le @selector (backButtonClicked) pour le faire fonctionner comme le vrai bouton de retour.

6
Douglas

C'est Swift 2 version. La façon la plus simple est comme ça. Mettez ce code dans AppDelegate. '

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        let navigationBarAppearace = UINavigationBar.appearance()
        let image = UIImage(named: "back-btn")
        navigationBarAppearace.backIndicatorImage = image
        navigationBarAppearace.backIndicatorTransitionMaskImage = image

        return true
    }

si votre bouton de retour a une couleur d'arrière-plan, cela peut ne pas fonctionner correctement.

Ajoutez votre icône à asset folder pour chaque résolution comme celle-ci: enter image description here

5
fatihyildizhan

Vous pouvez essayer ceci

self.navigationItem.leftBarButtonItem.imageInsets = UIEdgeInsetsMake(0, 0, 10, 0);
3
Erhan

Le problème est que votre image est trop haute. Pour le prouver, essayez d'abord ce code:

UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,20), NO, 0);
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(6,0,4,20));
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorImage = im;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,20), NO, 0);
UIImage* im2 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorTransitionMaskImage = im2;

Ça semble bien. Modifiez maintenant le 20 à 30 dans les deux appels CGSizeMake:

UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,30), NO, 0);
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(6,0,4,20));
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorImage = im;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,30), NO, 0);
UIImage* im2 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorTransitionMaskImage = im2;

L'icône est maintenant trop haute.

Il suffit donc de rendre votre image haute de 20 pixels et tout ira bien.

3
matt
UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, -2, 0); // or (2,0,0,0)
UIImage *backArrowImage = [[UIImage imageNamed:@"back"] imageWithAlignmentRectInsets:insets];

[[UINavigationBar appearance] setBackIndicatorImage:backArrowImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backArrowImage];
1
carmen_munich