Création d'un bouton fléché vers la gauche (comme le style «arrière» de UINavigationBar) sur une barre d'outils UIT

290

Je serais ravi de créer un bouton "arrière" flèche-lunette gauche dans un UIToolbar.

Pour autant que je sache, la seule façon d'obtenir l'un d'eux est de laisser les UINavigationControllerparamètres par défaut et il en utilise un pour l'élément de barre de gauche. Mais il n'y a aucun moyen que je puisse trouver pour en créer un en tant que UIBarButtonItem, donc je ne peux pas en créer un dans une norme UIToolbar, même s'ils sont très similaires àUINavigationBar art.

Je pourrais le créer manuellement avec des images de bouton, mais je ne trouve les images source nulle part. Ils ont des bords de canal alpha, donc la capture d'écran et la découpe n'obtiendront pas des résultats très polyvalents.

Avez-vous des idées au-delà de la capture d'écran pour chaque taille et schéma de couleurs que j'ai l'intention d'utiliser?

Mise à jour: VEUILLEZ ARRÊTER d'esquiver la question et de suggérer que je ne devrais pas poser cette question et que j'utiliseraisUINavigationBar . Mon application est Instapaper Pro. Il ne montre qu'une barre d'outils en bas (pour économiser de l'espace et maximiser la zone de contenu lisible), et je souhaite mettre un bouton Retour en forme de flèche gauche en bas.

Me dire que je ne devrais pas avoir besoin de faire cela n'est pas une réponse et ne mérite certainement pas une prime.

Marco
la source

Réponses:

130

J'ai utilisé le psd suivant que j'ai dérivé de http://www.teehanlax.com/blog/?p=447

http://www.chrisandtennille.com/pictures/backbutton.psd

Je viens alors de créer une UIView personnalisée que j'utilise dans la propriété customView de l'élément de barre d'outils.

Fonctionne bien pour moi.


Edit: Comme l'a souligné PrairieHippo , maralbjo a constaté que l'utilisation du code simple suivant a fait l'affaire (nécessite une image personnalisée dans le bundle) devrait être combinée avec cette réponse. Voici donc un code supplémentaire:

// Creates a back button instead of default behaviour (displaying title of previous screen)
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]
                                                               style:UIBarButtonItemStyleBordered
                                                              target:self
                                                              action:@selector(backAction)];

tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
[backButton release];
PyjamaSam
la source
1
Le PSD que j'ai téléchargé concerne une barre d'outils noire. Je n'ai pas beaucoup essayé avec les bleus car mon application ne l'utilise pas. Mais d'après ce que je sais, la barre d'outils ne la re-colorera pas au besoin. chris.
PyjamaSam
1
Vous n'avez pas besoin d'un outil spécial pour le recolorer, je l'ai fait en utilisant l'option "Ajuster la couleur" de l'aperçu Mac.
Sushant
1
Cette solution peut-elle être expliquée un peu?
cannyboy
4
Ce psd n'est utile que pour une échelle d'écran de 1,0f. Sur un écran de rétine, ça va avoir l'air horrible.
Daniel Wood
3
N'utilisez pas d'images pour cela, faites-le correctement (voir la réponse pour stackoverflow.com/questions/4260238 ).
ingh.am
45

La méthode Unicode

Je pense qu'il est beaucoup plus facile d'utiliser simplement un caractère unicode pour faire le travail. Vous pouvez regarder à travers les flèches en recherchant sur Google les triangles Unicode ou les flèches Unicode . À partir d'iOS6, Apple a changé le caractère en un caractère emoji avec une bordure. Pour désactiver la bordure, j'ajoute le sélecteur de variation Unicode 0xFE0E .

NSString *backArrowString = @"\U000025C0\U0000FE0E"; //BLACK LEFT-POINTING TRIANGLE PLUS VARIATION SELECTOR

UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:backArrowString style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.leftButtonItem = backBarButtonItem;

Le bloc de code est juste pour la démo. Cela fonctionnerait dans n'importe quel bouton qui accepte une NSString.

Pour une liste complète des caractères, recherchez Google pour le caractère Unicode et ce que vous voulez. Voici l'entrée pour le triangle de pointage noir à gauche .

Résultat

Le résultat

Cameron Lowell Palmer
la source
37

AVERTISSEMENT: certains rapports indiquent que cela ne fonctionnera pas sur iOS 6. Cela pourrait ne fonctionner que sur les anciennes versions du système d'exploitation. De toute évidence, au moins un développeur a vu son application rejetée pour avoir utilisé cette astuce (voir les commentaires). À utiliser à vos risques et périls. L'utilisation d'une image (voir la réponse ci-dessus) pourrait être une solution plus sûre.

Cela peut être fait sans ajouter vos propres fichiers image à l'aide du bouton sekr1t de type 101 pour obtenir la forme correcte. Pour moi, l'astuce consistait à déterminer que je pouvais utiliser initWithCustomViewpour créer le BarButtonItem. J'ai personnellement eu besoin de cela pour une barre de navigation dynamique plutôt que pour un toolbar, mais je l'ai testée avec une barre d'outils et le code est presque le même:

// create button
UIButton* backButton = [UIButton buttonWithType:101]; // left-pointing shape!
[backButton addTarget:self action:@selector(backAction) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];

// create button item -- possible because UIButton subclasses UIView!
UIBarButtonItem* backItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];

// add to toolbar, or to a navbar (you should only have one of these!)
[toolbar setItems:[NSArray arrayWithObject:backItem]];
navItem.leftBarButtonItem = backItem;

Si vous faites cela sur une barre d'outils, vous devrez modifier la façon dont vous définissez les éléments, mais cela dépend du reste de votre code et je laisse cela comme un exercice pour le lecteur. : P Cet échantillon a fonctionné pour moi (compilé et exécuté).

Bla bla, lisez le HIG, n'utilisez pas de fonctionnalités non documentées, et tout ça. Il n'y a que six types de boutons pris en charge et ce n'est pas l'un d'entre eux.

AndrewS
la source
1
le type de bouton 101 ne semble pas me donner une forme pointant vers la gauche ... juste un rectangle.
elsurudo
10
Ne faites pas cela - Votre application sera rejetée. Votez cette réponse.
thefaj
4
J'ai tendance à penser qu'il n'est pas sûr; il dit "n'utilisez pas d'API non documentée" mais ne déclare pas que son application a été rejetée. Et ce n'est pas une API non documentée - c'est une valeur non documentée. Si quelqu'un a vu son application rejetée, veuillez poster. J'ai continué à faire approuver des applications avec cette valeur.
AndrewS
1
@thefaj J'ai soumis une application avec ce code et elle a été approuvée.
Aaron
1
C'est un style de codage très médiocre. Vous avez de la chance, mais vous devez vous en tenir à n'utiliser que des API documentées (pas des nombres magiques / non publiés).
thefaj
36

entrez la description de l'image ici

Tout d'abord, vous devez trouver une image du bouton de retour. J'ai utilisé une belle application appelée Extractor qui extrait tous les graphiques de l'iPhone. Dans iOS7, j'ai réussi à récupérer l'image appelée UINavigationBarBackIndicatorDefaultet elle était de couleur noire, car j'avais besoin d'une teinte rouge, je change la couleur en rouge en utilisant Gimp.

ÉDITER:

Comme l'a mentionné btate dans son commentaire, il n'est pas nécessaire de changer la couleur avec l'éditeur d'image. Le code suivant devrait faire l'affaire:

imageView.tint = [UIColor redColor];
imageView.image = [[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

Ensuite, j'ai créé une vue qui contient une imageView avec cette flèche, une étiquette avec le texte personnalisé et au-dessus de la vue, j'ai un bouton avec une action. J'ai ensuite ajouté une animation simple (décoloration et traduction).

Le code suivant simule le comportement du bouton Précédent, y compris l'animation.

-(void)viewWillAppear:(BOOL)animated{
        UIImageView *imageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"]];
        [imageView setTintColor:[UIColor redColor]];
        UILabel *label=[[UILabel alloc] init];
        [label setTextColor:[UIColor redColor]];
        [label setText:@"Blog"];
        [label sizeToFit];

        int space=6;
        label.frame=CGRectMake(imageView.frame.origin.x+imageView.frame.size.width+space, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
        UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0, label.frame.size.width+imageView.frame.size.width+space, imageView.frame.size.height)];

        view.bounds=CGRectMake(view.bounds.origin.x+8, view.bounds.origin.y-1, view.bounds.size.width, view.bounds.size.height);
        [view addSubview:imageView];
        [view addSubview:label];

        UIButton *button=[[UIButton alloc] initWithFrame:view.frame];
        [button addTarget:self action:@selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:button];

        [UIView animateWithDuration:0.33 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            label.alpha = 0.0;
            CGRect orig=label.frame;
            label.frame=CGRectMake(label.frame.origin.x+25, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
            label.alpha = 1.0;
            label.frame=orig;
        } completion:nil];

        UIBarButtonItem *backButton =[[UIBarButtonItem alloc] initWithCustomView:view];
}

- (void) handleBack:(id)sender{
}

ÉDITER:

Au lieu d'ajouter le bouton, à mon avis, la meilleure approche consiste à utiliser un reconnaisseur de gestes.

UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleBack:)];
[view addGestureRecognizer:tap];
[view setUserInteractionEnabled:YES];
Alexey
la source
1
Salut Alex, merci pour la solution. un problème auquel je suis confronté avec cette solution implémentée est: La zone de hit est moins de moyens lorsque je clique sur la flèche, le handleBack ne reçoit pas d'appel, mais lorsque je clique sur le texte, l'appel de handleBack get. Veuillez suggérer à ce sujet. Merci
Yogesh Lolusare
Essayez d'utiliser UITapGestureRecognizer j'ai édité la question
Alexey
Vous pouvez également essayer d'augmenter la taille de la vue.
Alexey
2
La couleur noire sur ce bouton en fait un modèle. Vous n'avez pas besoin d'utiliser gimp pour le changer. Utilisez simplement imageView.tint = [UIColor redColor]le mode de rendu de teinte et de modèle sur l'image. imageView.image = [yourImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
smokingoyster
18

Je ne sais pas si cela fonctionnerait, mais vous pouvez essayer de créer un UINavigationControlleravec les paramètres par défaut pour créer le bouton, trouver le bouton dans la hiérarchie de sous-vue du contrôleur de navigation, l'appeler removeFromSuperview, détruire le contrôleur de navigation, puis ajouter le bouton comme une sous-vue de votre barre d'outils. Vous devrez peut-être également retainle bouton avant d'appeler removeFromSuperview(puis releaseaprès l'avoir ajouté en tant que sous-vue de votre barre d'outils) pour éviter qu'il ne soit désalloué pendant le processus.

Adam Rosenfield
la source
14

Pour faire un UIButton avec une flèche assez proche (je ne suis pas un designer;) de la flèche de retour du système iOS 7:

La norme:

Flèche arrière du système standard

Apple SD Gothic Neo

Apple SD Gothic Neo <personnage

Dans Xcode:

  • Concentrez-vous sur le champ de valeur de titre du bouton (ou sur tout autre affichage / contrôle avec un contenu texte)
  • Ouvrir Édition -> Caractères spéciaux
  • Sélectionnez le groupe Parenthèses et double-cliquez sur le caractère '<'
  • Changez la police en: Apple SD Gothic Neo, Regular avec la taille souhaitée (par exemple 20)
  • Changez de couleur comme vous le souhaitez

Ref @ staticVoidMan's answer to Back-like arrow on iOS 7

Bjørn Egil
la source
8

flèche arrière

Si vous ne voulez pas vous embêter avec les fichiers image, la forme de flèche peut être dessinée dans une sous-classe UIView avec le code suivant:

- (void)drawRect:(CGRect)rect {
    float width = rect.size.width;
    float height = rect.size.height;
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextBeginPath(context);
    CGContextMoveToPoint(context, width * 5.0/6.0, height * 0.0/10.0);
    CGContextAddLineToPoint(context, width * 0.0/6.0, height * 5.0/10.0);
    CGContextAddLineToPoint(context, width * 5.0/6.0, height * 10.0/10.0);
    CGContextAddLineToPoint(context, width * 6.0/6.0, height * 9.0/10.0);
    CGContextAddLineToPoint(context, width * 2.0/6.0, height * 5.0/10.0);
    CGContextAddLineToPoint(context, width * 6.0/6.0, height * 1.0/10.0);
    CGContextClosePath(context);

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextFillPath(context);
}

où la vue de la flèche est proportionnelle à une largeur de 6,0 et une hauteur de 10,0

machoota
la source
7
    self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

Travaille pour moi. Je l'ai utilisé lorsque j'avais plus d'onglets, puis je pouvais tenir dans la barre d'onglets, et un contrôleur de vue poussé à partir du "Plus" a remplacé le leftBarButtonItem dans son viewDidLoad.

quantumpotato
la source
4

Vous pouvez trouver les images source en les extrayant de Other.artwork dans UIKit $ {SDKROOT} /System/Library/Frameworks/UIKit.framework/Other.artwork. La communauté de modding a quelques outils pour les extraire, ici . Une fois que vous avez extrait l'image, vous pouvez écrire du code pour la recolorer si nécessaire et la définir comme image de bouton. Que vous puissiez ou non expédier une telle chose (car vous incorporez des illustrations dérivées) peut être un peu risqué, alors vous voudrez peut-être parler à un avocat.

Louis Gerbarg
la source
4

La bibliothèque Three20 a un moyen de le faire:

  UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle: @"Title" style:UIBarButtonItemStylePlain 
                                                                target:self action:@selector(foo)];

  UIColor* darkBlue = RGBCOLOR(109, 132, 162);

  TTShapeStyle* style = [TTShapeStyle styleWithShape:[TTRoundedLeftArrowShape shapeWithRadius:4.5] next:
    [TTShadowStyle styleWithColor:RGBCOLOR(255,255,255) blur:1 offset:CGSizeMake(0, 1) next:
    [TTReflectiveFillStyle styleWithColor:darkBlue next:
    [TTBevelBorderStyle styleWithHighlight:[darkBlue shadow]
                                     shadow:[darkBlue multiplyHue:1 saturation:0.5 value:0.5]
                                      width:1 lightSource:270 next:
    [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -1, 0, -1) next:
    [TTBevelBorderStyle styleWithHighlight:nil shadow:RGBACOLOR(0,0,0,0.15)
                                        width:1 lightSource:270 next:nil]]]]]];

  TTView* view = [[[TTView alloc] initWithFrame:CGRectMake(0, 0, 80, 35)] autorelease];
  view.backgroundColor = [UIColor clearColor];
  view.style = style;
  backButton.customView = view;


  self.navigationItem.leftBarButtonItem = backButton;
Andrew Arrow
la source
Pouvez-vous publier une capture d'écran du résultat final?
jm.
1
ça avait l'air terrible. Je n'ai jamais eu le bouton de retour de la flèche gauche pour regarder à droite J'ai abandonné et utilisé un bouton de retour approprié avec le navigateur Three20.
Andrew Arrow
4

J'ai trouvé que l'utilisation du code simple suivant a fait l'affaire (nécessite une image personnalisée dans le bundle):

// Creates a back button instead of default behaviour (displaying title of previous screen)
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]
                                                                   style:UIBarButtonItemStyleBordered
                                                                  target:self
                                                                  action:@selector(backAction)];

    tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
    [backButton release];
maralbjo
la source
2
Pour toute personne venant sur cette page, combinez cette réponse avec la réponse de @ PyjamaSam.
PrairieHippo
@PrairieHippo: a été fait maintenant. Aurait probablement dû être édité en premier lieu. Idéal -1 pour ne pas faire cela en premier lieu en laissant le travail à d'autres.
hakre
4

Voici ce que j'ai fini par faire après avoir recherché toutes ces solutions et d'autres. Il utilise un png extensible extrait des images UIKit. De cette façon, vous pouvez définir le texte comme vous le souhaitez

// Generate the background images
UIImage *stretchableBackButton = [[UIImage imageNamed:@"UINavigationBarDefaultBack.png"] stretchableImageWithLeftCapWidth:14 topCapHeight:0];
UIImage *stretchableBackButtonPressed = [[UIImage imageNamed:@"UINavigationBarDefaultBackPressed.png"] stretchableImageWithLeftCapWidth:13 topCapHeight:0];
// Setup the UIButton
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setBackgroundImage:stretchableBackButton forState:UIControlStateNormal];
[backButton setBackgroundImage:stretchableBackButtonPressed forState:UIControlStateSelected];
NSString *buttonTitle = NSLocalizedString(@"Back", @"Back");
[backButton setTitle:buttonTitle forState:UIControlStateNormal];
[backButton setTitle:buttonTitle forState:UIControlStateSelected];
backButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 2, 1); // Tweak the text position
NSInteger width = ([backButton.titleLabel.text sizeWithFont:backButton.titleLabel.font].width + backButton.titleEdgeInsets.right +backButton.titleEdgeInsets.left);
[backButton setFrame:CGRectMake(0, 0, width, 29)];
backButton.titleLabel.font = [UIFont boldSystemFontOfSize:13.0f];
[backButton addTarget:self action:@selector(yourSelector:) forControlEvents:UIControlEventTouchDown];
// Now add the button as a custom UIBarButtonItem
UIBarButtonItem *backButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:backButton] autorelease];
self.navigationItem.leftBarButtonItem = backButtonItem;
Steve
la source
2
Doit utiliser UIControlStateHighlighted et non UIControlStateSelected, sinon l'image est permutée lorsque le bouton est touché.
Jim
4

C'est facile à faire avec Interface Builder dans Xcode 5.x

Résultat

  • utiliser la barre d'outils et l' élément de bouton de barre de la bibliothèque d'objets

    Composants

  • dans l' inspecteur des attributs du bouton, éditez la section Image avec l' image de votre bouton de retour

    Inspecteur d'attributs

Terminé!

Anton Gaenko
la source
2

J'essayais de faire la même chose, mais je voulais que le bouton de retour soit dans la barre de navigation. (J'avais en fait besoin d'un bouton de retour, cela ferait plus que revenir en arrière, j'ai donc dû utiliser la propriété leftBarButtonItem). J'ai essayé ce qu'AndrewS a suggéré, mais dans la barre de navigation, il ne ressemblerait pas à ce qu'il devrait, car l'UIButton a été en quelque sorte casté en UIBarButtonItem.

Mais j'ai trouvé un moyen de contourner ce problème. En fait, je viens de mettre un UIView sous le UIButton et de définir le customView pour le UIBarButtonItem. Voici le code, si quelqu'un en a besoin:

// initialize button and button view
UIButton *backButton = [UIButton buttonWithType:101];
UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, backButton.frame.size.width, backButton.frame.size.height)];

[backButton addTarget:self action:@selector(backButtonTouched:) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];
[backButtonView addSubview:backButton];

// set buttonview as custom view for bar button item
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
self.navigationItem.leftBarButtonItem = backButtonItem;

// push item to navigationbar items
[self.navigationController.navigationBar setItems:[NSArray arrayWithObject:backButtonItem]];
marikaner
la source
1

Pour créer une image pour la barre d'outils UIT, faites un png dans photoshop et O E IL Y A TOUTE couleur, il le met en blanc, et où il est alpha = 0 alors il le laisse tranquille.

Le SDK place la bordure autour de l'icône que vous avez créée et la rend blanche sans que vous ayez à faire quoi que ce soit.

Vous voyez, c'est ce que j'ai fait dans Photoshop pour mon bouton avant (évidemment, échangez-le pour le bouton retour):

http://twitpic.com/1oanv

et voici à quoi cela ressemblait dans Interface Builder

http://twitpic.com/1oaoa

Domness
la source
1

Solution SANS utiliser de png. Sur la base de cette réponse SO: Ajout de la petite flèche sur le côté droit d'une cellule dans une cellule iPhone TableView

Il suffit de retourner la UITableViewCell horizontalement!

UIButton *btnBack = [[UIButton alloc] initWithFrame:CGRectMake(0, 5, 70, 20)];

// Add the disclosure
CGRect frm;
UITableViewCell *disclosure = [[UITableViewCell alloc] init];
disclosure.transform = CGAffineTransformScale(CGAffineTransformIdentity, -1, 1);
frm = self.btnBack.bounds;
disclosure.frame = CGRectMake(frm.origin.x, frm.origin.y, frm.size.width-25, frm.size.height);
disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
disclosure.userInteractionEnabled = NO;
[self.btnBack addSubview:disclosure];

// Add the label
UILabel *lbl = [[UILabel alloc] init];
frm = CGRectOffset(self.btnBack.bounds, 15, 0);
lbl.frame = frm;
lbl.textAlignment = NSTextAlignmentCenter;
lbl.text = @"BACK";
[self addSubview:lbl];
Gabriel Jensen
la source
1

Swift 5.2 Xcode 11.4

Le symbole Apple chevron.left permet désormais une solution plus élégante pour créer un bouton personnalisé. J'ai fait correspondre la taille et l'espacement le plus près possible.

entrez la description de l'image ici

import UIKit

class CustomBackButton: UIBarButtonItem {

    convenience init(target: Any, selector: Selector) {

        // Create UIButton
        let button = UIButton(frame: .zero)

        // Customise Title
        button.setTitle("Back", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 17)

        // Customise Image
        let config = UIImage.SymbolConfiguration(pointSize: 19.0, weight: .semibold, scale: .large)
        let image = UIImage(systemName: "chevron.left", withConfiguration: config)
        button.setImage(image, for: .normal)

        // Add Target
        button.addTarget(target, action: selector, for: .touchUpInside)

        // Customise Spacing to match system Back button
        button.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: -18.0, bottom: 0.0, right: 0.0)
        button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -12.0, bottom: 0.0, right: 0.0)

        self.init(customView: button)
    }
}

Cela peut être mis en œuvre en tant UIToolbarItemqueUINavigationItem

override func viewDidLoad() {
    super.viewDidLoad()

    // UIToolbar Item
    let barBackButton = CustomBackButton(target: self, selector: #selector(backButtonTapped))
    let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    navigationController?.setToolbarHidden(false, animated: false)
    toolbarItems = [barBackButton, flexSpace]

    // Navigation Item
    let navBackButton = CustomBackButton(target: self, selector: #selector(backButtonTapped))
    navigationItem.leftBarButtonItem = navBackButton
}

@objc func backButtonTapped() {
    print("Back tapped")
}

Si vous voulez retourner le bouton et avoir la flèche pointant vers la droite:

entrez la description de l'image ici

Utilisez le symbole Apple nommé "chevron.right"

Ajoutez le code suivant à la CustomBackButtonclasse:

    // Put the image of the right side of the button
    button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
rbaldwin
la source
0

Si vous voulez éviter de le dessiner vous-même, vous pouvez utiliser la classe non documentée: UINavigationButton avec le style 1. Cela pourrait, bien sûr, empêcher l'approbation de votre application ... / John

John Lane
la source
0

Eh bien, vous n'avez pas besoin d'avoir un bouton différent pour chaque taille, vous pouvez l'utiliser [UIImage stretchableImageWithLeftCapWidth:topCapHeight:], mais la seule chose que j'ai trouvée est des images personnalisées.

Ben Gottlieb
la source
0

J'ai eu un problème similaire et j'ai sorti une bibliothèque PButton . Et l'exemple est le bouton de navigation arrière comme le bouton, qui peut être utilisé n'importe où, tout comme un bouton personnalisé.

Quelque chose comme ça: entrez la description de l'image ici

Shuo
la source
0

Exemple dans Swift 3, avec un bouton précédent et un bouton suivant en haut à droite.

let prevButtonItem = UIBarButtonItem(title: "\u{25C0}", style: .plain, target: self, action: #selector(prevButtonTapped))
let nextButtonItem = UIBarButtonItem(title: "\u{25B6}", style: .plain, target: self, action: #selector(nextButtonTapped))
self.navigationItem.rightBarButtonItems = [nextButtonItem, prevButtonItem]
Bart van Kuik
la source
0

Rapide

// create button
    var backButton = UIButton(type: 101)

    // left-pointing shape!
    backButton.addTarget(self, action: #selector(self.backAction), for: .touchUpInside)
    backButton.setTitle("Back", for: .normal)

    // create button item -- possible because UIButton subclasses UIView!
    var backItem = UIBarButtonItem(customView: backButton)

    // add to toolbar, or to a navbar (you should only have one of these!)
    toolbar.items = [backItem]
    navItem.leftBarButtonItem = backItem

la source
-5

Essaye ça. Je suis sûr que vous n'avez pas besoin d'une image de bouton de retour pour en créer une.

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back"
                                                               style:UIBarButtonItemStyleBordered
                                                              target:self
                                                              action:@selector(yourSelectorGoesHere:)];
self.navigationItem.backBarButtonItem = backButton;

C'est tout ce que vous avez à faire :)

Mj.B
la source
-23

Pourquoi fais-tu ça? Si vous voulez quelque chose qui ressemble à une barre de navigation, utilisez UINavigationBar.

Les barres d'outils ont un style visuel spécifique qui leur est associé. Les directives d'interface humaine pour l'état de l'iPhone:

Une barre d'outils apparaît en bas de l'écran et contient des boutons qui effectuent des actions liées aux objets dans la vue actuelle.

Il donne ensuite plusieurs exemples visuels d'icônes à peu près carrées sans texte. Je vous exhorte à suivre le HIG à ce sujet.

Colin Barrett
la source
8
J'en suis conscient, merci. Cependant, je pense que mon utilisation prévue est appropriée. Pouvez-vous être plus utile, en supposant que je veux vraiment faire ce que j'ai demandé?
Marco
Si vous le placez en haut de l'écran, il est mal utilisé. Comparez les dégradés et les frontières entre UINavigationBar et UIToolbar, et vous verrez qu'ils sont légèrement différents. Vous voulez certainement utiliser un UINavigationBar en haut de l'écran.
NilObject
10
Je le mets en bas.
Marco