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

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.

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];

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

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.

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];

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.

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:

Apple SD Gothic Neo

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

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

    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.

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.

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;

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];

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;

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

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

  

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

  

Terminé!

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]];

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

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];

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.

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:

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)

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

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.

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:

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]

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

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 :)

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.