Creazione di un pulsante freccia sinistra (come lo stile "indietro" di UINavigationBar) su una barra UITool

Mi piacerebbe creare un pulsante "indietro" sulla cornice della freccia sinistra in a UIToolbar.

Per quanto ne so, l'unico modo per ottenere uno di questi è di lasciare le UINavigationControllerimpostazioni predefinite e ne usa uno per la barra di sinistra. Ma non posso trovare un modo per crearne uno come uno UIBarButtonItem, quindi non posso crearne uno in uno standard UIToolbar, anche se sono molto simili a UINavigationBars.

Potrei crearlo manualmente con le immagini dei pulsanti, ma non riesco a trovare le immagini sorgente da nessuna parte. Hanno i bordi del canale alfa, quindi lo screenshot e il taglio non otterranno risultati molto versatili.

Qualche idea oltre lo screenshot per ogni dimensione e combinazione di colori che intendo utilizzare?

Aggiornamento: PER FAVORE, FERMI schivando la domanda e suggerendo che non dovrei chiederlo e che dovrei usare UINavigationBar. La mia app è Instapaper Pro. Mostra solo una barra degli strumenti in basso (per risparmiare spazio e massimizzare l'area del contenuto leggibile) e desidero mettere un pulsante Indietro a forma di freccia sinistra in fondo.

Dirmi che non avrei dovuto farlo non è una risposta e certamente non merita una taglia.

Ho usato il seguente psd che ho derivato da http://www.teehanlax.com/blog/?p=447

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

Ho quindi appena creato un UIView personalizzato che utilizzo nella proprietà customView dell'elemento della barra degli strumenti.

Funziona bene per me.

Modifica: Come sottolineato da PrairieHippo , maralbjo ha scoperto che utilizzando il seguente codice semplice il trucco (richiede un'immagine personalizzata in bundle) dovrebbe essere combinato con questa risposta. Quindi ecco un codice aggiuntivo:

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

Il metodo Unicode

Penso che sia molto più semplice usare solo un carattere Unicode per portare a termine il lavoro. Puoi guardare attraverso le frecce cercando su google i triangoli Unicode o le frecce Unicode . A partire da iOS6, Apple ha cambiato il personaggio in un personaggio emoji con un bordo. Per disabilitare il bordo aggiungo il selettore di variazione 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;

Il blocco di codice è solo per la demo. Funzionerebbe in qualsiasi pulsante che accetta un NSString.

Per un elenco completo dei personaggi, cerca in Google il carattere Unicode e ciò che desideri. Ecco la voce per il triangolo di sinistra nero .

Risultato

ATTENZIONE: ci sono segnalazioni che questo non funzionerà su iOS 6. Questo potrebbe funzionare solo su versioni precedenti del sistema operativo. Evidentemente almeno uno sviluppatore ha rifiutato la propria app per l'utilizzo di questo trucco (vedi i commenti). Utilizzare a proprio rischio. L'uso di un'immagine (vedere la risposta sopra) potrebbe essere una soluzione più sicura.

Questo può essere fatto senza aggiungere i tuoi file immagine usando il pulsante sekr1t tipo 101 per ottenere la forma corretta. Per me il trucco era capire che avrei potuto usare initWithCustomViewper creare il BarButtonItem. Personalmente ne avevo bisogno per una barra di navigazione dinamica piuttosto che per una toolbar, ma l'ho testata con una barra degli strumenti e il codice è quasi lo stesso:

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

Se lo stai facendo su una barra degli strumenti dovrai modificare il modo in cui imposti gli elementi, ma ciò dipende dal resto del codice e lo lascio come esercizio per il lettore. : P Questo esempio ha funzionato per me (compilato ed eseguito).

Blah blah, leggi l'HIG, non usare funzionalità non documentate, e tutto il resto. Esistono solo sei tipi di pulsanti supportati e questo non è uno di questi.

Prima di tutto devi trovare un'immagine del pulsante Indietro. Ho usato una bella app chiamata Extractor che estrae tutta la grafica da iPhone. In iOS7 sono riuscito a recuperare l'immagine chiamata UINavigationBarBackIndicatorDefaulted era di colore nero, poiché avevo bisogno di una tinta rossa, cambio colore in rosso usando Gimp.

MODIFICARE:

Come è stato menzionato da btate nel suo commento, non è necessario cambiare il colore con l'editor di immagini. Il seguente codice dovrebbe fare il trucco:

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

Quindi ho creato una vista che contiene un imageView con quella freccia, un'etichetta con il testo personalizzato e nella parte superiore della vista ho un pulsante con un'azione. Quindi ho aggiunto una semplice animazione (dissolvenza e traduzione).

Il codice seguente simula il comportamento del pulsante Indietro, inclusa l'animazione.

-(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{
}

MODIFICARE:

Invece di aggiungere il pulsante, secondo me l'approccio migliore è usare un riconoscimento dei gesti.

UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleBack:)];
[view addGestureRecognizer:tap];
[view setUserInteractionEnabled:YES];

Non sono sicuro che funzioni, ma potresti provare a creare un UINavigationControllercon le impostazioni predefinite per creare il pulsante, trovare il pulsante nella gerarchia di visualizzazione secondaria del controller di navigazione, chiamarlo removeFromSuperview, distruggere il controller di navigazione e quindi aggiungere il pulsante come una panoramica della barra degli strumenti. Potrebbe anche essere necessario retaine il pulsante prima di chiamare removeFromSuperview(e quindi releasedopo averlo aggiunto come sottoview della barra degli strumenti) per evitare che venga deallocato durante il processo.

Per rendere un UIButton abbastanza vicino (non sono un designer;) alla freccia indietro del sistema iOS 7:

Standard:

Apple SD Gothic Neo

In Xcode:

• Concentrarsi sul campo del valore del titolo del pulsante (o qualsiasi altra vista / controllo con contenuto di testo)
• Apri Modifica -> Caratteri speciali
• Seleziona il gruppo Parentesi e fai doppio clic sul carattere '<'
• Cambia il carattere in: Apple SD Gothic Neo, Regular con la dimensione desiderata (es. 20)
• Cambia colore come preferisci

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

Se non vuoi preoccuparti dei file di immagine, la forma della freccia può essere disegnata in una sottoclasse UIView con il seguente codice:

- (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);
}

dove la vista a freccia è proporzionale a una larghezza di 6,0 e un'altezza di 10,0

    self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

Per me va bene. L'ho usato quando avevo più schede, quindi potevo inserirle nella barra delle schede e un controller di visualizzazione spinto da "Altro" aveva la precedenza su leftBarButtonItem nella sua viewDidLoad.

È possibile trovare le immagini di origine estraendole da Other.artwork in UIKit $ {SDKROOT} /System/Library/Frameworks/UIKit.framework/Other.artwork. La community di modding ha alcuni strumenti per estrarli, qui . Dopo aver estratto l'immagine, puoi scrivere del codice per ricolorarlo secondo necessità e impostarlo come immagine del pulsante. Il fatto che tu possa effettivamente spedire una cosa del genere (dal momento che stai incorporando un'opera d'arte derivata) potrebbe essere un po 'rischioso, quindi forse vuoi parlare con un avvocato.

La libreria Three20 ha un modo per farlo:

  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;

Ho scoperto che utilizzando il seguente semplice codice ha funzionato (richiede un'immagine personalizzata in 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];

Ecco cosa ho finito dopo aver cercato tutte queste soluzioni e altre. Utilizza un PNG estensibile estratto dalle immagini stock di UIKit. In questo modo puoi impostare il testo su qualunque cosa tu stia mentendo

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

È facile da fare con Interface Builder in Xcode 5.x

• utilizzare la barra degli strumenti e l' elemento pulsante barra dalla libreria di oggetti

  

• nella finestra di ispezione Attributi del pulsante modifica la sezione Immagine con l' immagine del pulsante Indietro

  

Fatto!

Stavo cercando di fare la stessa cosa, ma volevo che il pulsante Indietro fosse nella barra di navigazione. (In realtà avevo bisogno di un pulsante Indietro, che farebbe molto di più che tornare indietro, quindi ho dovuto usare la proprietà leftBarButtonItem). Ho provato ciò che AndrewS ha suggerito, ma nella barra di navigazione non avrebbe avuto l'aspetto che avrebbe dovuto, dato che UIButton era un po 'lanciato su un UIBarButtonItem.

Ma ho trovato un modo per aggirare questo. In realtà ho appena messo un UIView sotto l'UIButton e ho impostato il customView per l'UIBarButtonItem. Ecco il codice, se qualcuno ne ha bisogno:

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

Per creare un'immagine per UIToolbar, crea un png in Photoshop e DOVE MAI c'è QUALSIASI colore lo mette bianco, e dove è alpha = 0 allora lo lascia da solo.

L'SDK mette effettivamente il bordo attorno all'icona che hai creato e lo trasforma in bianco senza che tu debba fare nulla.

Vedi, questo è ciò che ho realizzato in Photoshop per il mio pulsante Avanti (ovviamente scambiarlo con il pulsante Indietro):

http://twitpic.com/1oanv

e questo è come appariva in Interface Builder

http://twitpic.com/1oaoa

Soluzione SENZA usare un png. Sulla base di questa risposta SO: aggiungendo la piccola freccia sul lato destro di una cella in una cella TableView di iPhone

Basta girare UITableViewCell in orizzontale!

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

Il simbolo Apple chevron.left ora consente una soluzione più elegante per creare un pulsante personalizzato. Ho abbinato le dimensioni e la spaziatura il più vicino possibile.

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

Questo può essere implementato come a UIToolbarItem, o aUINavigationItem

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")
}

Se vuoi girare il pulsante e avere la freccia che punta verso destra:

Usa il simbolo Apple chiamato "chevron.right"

Aggiungi il seguente codice alla 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)

Se si desidera evitare di disegnarlo da soli, è possibile utilizzare la classe non documentata: UINavigationButton con stile 1. Ciò potrebbe, ovviamente, impedire l'approvazione dell'applicazione ... / John

Bene, non devi avere un pulsante diverso per ogni dimensione, puoi usarlo [UIImage stretchableImageWithLeftCapWidth:topCapHeight:], ma l'unica cosa che ho trovato sono le immagini personalizzate.

Ho avuto un problema simile ed è uscito un PButton di libreria . E l'esempio è il pulsante di navigazione posteriore come pulsante, che può essere utilizzato ovunque come un pulsante personalizzato.

Qualcosa come questo:

Esempio in Swift 3, con un pulsante precedente e uno successivo in alto a destra.

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]

veloce

// 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

Prova questo. Sono sicuro che non è necessaria un'immagine del pulsante Indietro per crearne una.

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

Questo è tutto ciò che devi fare :)

Perché stai facendo questo? Se vuoi qualcosa che assomigli a una barra di navigazione, usa UINavigationBar.

Le barre degli strumenti hanno uno stile visivo specifico associato ad esse. Le Linee guida sull'interfaccia umana per lo stato di iPhone:

Una barra degli strumenti appare sul bordo inferiore dello schermo e contiene pulsanti che eseguono azioni correlate agli oggetti nella vista corrente.

Fornisce quindi diversi esempi visivi di icone approssimativamente quadrate senza testo. Vi esorto a seguire l'HIG su questo.