292 votes

Création d’un bouton de la flèche gauche (comme UINavigationBar ' style de s « back ») sur un UIToolbar

J'aimerais créer un "retour" à gauche-flèche-lunette bouton dans un UIToolbar.

Aussi loin que je peux dire, la seule façon d'obtenir l'un de ces est de laisser UINavigationController paramètres par défaut et il n'utilise que pour la barre de gauche de l'élément. Mais il n'y a aucun moyen que je peux trouver pour créer un comme un UIBarButtonItem, donc je ne peux pas faire un dans un standard UIToolbar, même si ils sont très similaires à UINavigationBars.

J'ai pu créer manuellement avec le bouton images, mais je ne trouve pas la source des images n'importe où. Ils ont de canal alpha bords, de sorte screenshotting et la découpe de ne pas obtenir de très polyvalent résultats.

Toutes les idées au-delà de screenshotting pour toutes les tailles et les couleurs j'ai l'intention de l'utiliser?

Mise à jour: s'il vous PLAÎT ARRÊTER en esquivant la question et en suggérant que je ne devrais pas être en demandant cela, et devrait être à l'aide de UINavigationBar. Mon application est Instapaper Pro. Il ne montre qu'une barre d'outils en bas (pour économiser de l'espace et de maximiser lisible de la zone de contenu), et je souhaite mettre en flèche gauche-Retour en forme de bouton dans le bas.

Me disant que je ne devrais pas en avoir besoin ce n'est pas une réponse , et certainement ne mérite pas un bounty.

130voto

PyjamaSam Points 7802

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

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

J'ai ensuite créé une coutume UIView que j'utilise dans les customView propriété de l'élément de barre d'outils.

Fonctionne bien pour moi.


Edit: Comme l'a souligné PrairieHippo, maralbjo trouvé que l'utilisation de la suivante, simple code a fait le tour (nécessite une image personnalisée en bundle) doit ê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];

45voto

La Méthode Unicode

Je pense qu'il est beaucoup plus facile de simplement utiliser un caractère unicode pour faire le travail. Vous pouvez regarder à travers les flèches par googler soit Unicode Triangles ou Unicode Flèches. Départ avec iOS6 Apple a changé le personnage à un emoji caractère avec une bordure. Pour désactiver la frontière-je ajouter de la 0xFE0E Unicode Sélecteur de Variante.

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;
[backBarButtonItem release];

Le bloc de code est juste pour la démo. Il serait de travailler dans n'importe quel bouton qui accepte un NSString.

Pour une liste complète des caractères de recherche Google pour les caractères Unicode et ce que vous voulez. Voici l'entrée de Noir Pointant vers la Gauche du Triangle.

Résultat

The result

37voto

AndrewS Points 3208

AVERTISSEMENT: Il ya des rapports que cela ne fonctionne pas sur iOS 6. Cela peut ne fonctionner que sur les anciennes versions de l'OS. De toute évidence, au moins un dev a eu leur application rejeté pour l'utilisation de cette astuce (voir les commentaires). Utilisez à vos propres risques. À l'aide d'une image (voir la réponse ci-dessus) peut être une solution plus sûre.

Cela peut être fait sans l'ajout de vos propres fichiers d'image à l'aide de sekr1t de type bouton-101 pour obtenir la bonne forme. Pour moi, le truc, c'était en pensant que je pourrais utiliser "initWithCustomView" pour créer le Bouton de la Barre d'Élément. Personnellement, j'ai besoin de cette dynamique pour un navbar plutôt qu'une barre d'outils, mais je l'ai testé 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 que vous devez l'ajuster la façon dont vous définissez les éléments, mais cela dépend du reste de ton code et je l'ai laisser cela comme un exercice pour le lecteur. :P Cet échantillon a fonctionné pour moi (compilé et exécuté).

Bla bla, lire le HIG, ne pas utiliser de fonctionnalités non documentées, et tout ça. Il y a seulement six pris en charge types de bouton et ce n'est pas l'un d'eux.

36voto

Alex Points 2444

enter image description here

Tout d'abord, vous devez trouver une image du bouton retour. J'ai utilisé une application agréable, appelé Extracteur qui extrait tous les éléments graphiques de l'iPhone. Dans iOS7 , j'ai réussi à récupérer l'image appelée UINavigationBarBackIndicatorDefault et il était de couleur noir, car j'avais besoin d'une teinte rouge-je changer la couleur de rouge à l'aide de Gimp.

Ensuite, j'ai créé une vue qui contient une imageView avec la flèche, une étiquette avec le texte personnalisé et sur le haut de la vue que j'ai un bouton avec une action. Ensuite, j'ai ajouté une animation simple (à la décoloration et à la traduction).

Le code suivant simule le comportement du bouton de retour, 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{
}

18voto

Adam Rosenfield Points 176408

Je ne sais pas si ça allait fonctionner, mais vous pouvez essayer de créer un UINavigationController avec les paramètres par défaut pour créer le bouton, trouver le bouton de la manette de navigation du sous-vue de la hiérarchie, appelez - removeFromSuperview sur, de détruire la manette de navigation, puis ajouter le bouton comme une sous-vue de votre barre d'outils. Vous pouvez aussi avoir besoin d' retain et le bouton avant d'appeler removeFromSuperview (et puis, release après l'ajouter en tant que sous-vue de votre barre d'outils) pour éviter d'être libéré pendant le processus.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X