Domanda Come posizionare correttamente il pulsante Indietro in iOS7


Ho usato questo codice per utilizzare un'immagine personalizzata come pulsante Indietro nell'intera app.

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

Le dimensioni dell'immagine sono 30 x 30.

Il codice aggiunge l'immagine come pulsante indietro, ma la posizione non è corretta, come puoi vedere nell'immagine seguente:

back button not correct positioned

Qualche idea su come posizionare correttamente l'immagine senza modificarne le dimensioni (almeno la parte visiva dell'immagine (cerchio + freccia))?

MODIFICARE:

Non voglio usare un pulsante back personalizzato perché mi costringe a disabilitare il gesto swipe / back in iOS7


31
2018-03-31 17:35


origine


risposte:


MODIFICARE
Penso di aver trovato il trucco (in iOS 7 Design Resource - UIKit User Interface Catalog.)
Sotto Elementi del pulsante Bar 

Si noti che un'immagine del pulsante barra verrà automaticamente visualizzata come immagine modello all'interno di una barra di spostamento, a meno che non si imposti esplicitamente la modalità di rendering su UIImageRenderingModeAlwaysOriginal. Per ulteriori informazioni, vedere Immagini dei modelli.

Sotto Immagini dei modelli hanno del codice per specificare UIImageRenderingMode.

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

Prova a creare UIImage con i riquadri di allineamento e quindi imposta l'immagine dell'indicatore posteriore.

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

Si potrebbe anche provare a regolare la posizione del testo del titolo UINavigationBar

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


21
2018-04-18 22:16



Bene, basta seguire uno dei suggerimenti per correggere il layout e perdere il "back gesture" di iOS 7, quindi correggerlo con un UIScreenEdgePanGestureRecognizer!

Un UIScreenEdgePanGestureRecognizer cerca i movimenti di panoramica (trascinamento) che iniziano vicino a un bordo dello schermo. In alcuni casi, il sistema utilizza i gesti dello schermo per avviare le transizioni del controller della vista. È possibile utilizzare questa classe per replicare lo stesso comportamento gestuale per le proprie azioni.


8
2018-04-21 00:59



PER FAVORE VEDI MODIFICA QUI SOTTO !!!

Ho creato un pulsante back personalizzato in iOS7 non molto tempo fa. Il mio ha una freccia e la parola su di esso. Penso che il suggerimento di pawan sia un buon inizio. Per creare il pulsante Indietro con la tua immagine personalizzata puoi usare,

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;

La mia immagine finaleImmagine è composta da due immagini diverse, ma puoi semplicemente usare la tua immagine "indietro". Ma penso che sia qui che sta il problema. La mia immagine era un composito, potreste voler creare un composito, ma mettere uno spazio libero sopra l'icona sul retro. Ho posizionato uno spazio libero a destra della mia icona per regolare la spaziatura. Ecco il codice,

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'immagine wordSpace è un png chiaro che ho realizzato in Photoshop, quindi la mia nuova immagine del pulsante Indietro non è stata allungata. Potresti voler mettere un png chiaro in cima, per spingere un po 'l'icona verso il basso. Rendi la dimensione.altezza di essa in Photoshop per quello che pensi che dovrebbe essere la regolazione. Potresti aver bisogno di futz con questo un po '. E assicurati di modificare CGSize in modo che si adatti all'icona e allo spazio libero.

La mia risposta era un po 'spenta, quindi ho guardato

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

Ho dovuto giocare un po 'con quella linea per farlo sembrare il più bello possibile ma alla fine mi ha dato quello che volevo con il -20. Ho anche regolato la seconda variabile che è 0 nella mia, questo ha spostato l'icona reale intorno. -5 metti l'icona verso il basso, ma la sua altra opzione dal chiaro png.

Ora per affrontare il fatto che vuoi che sia un vero pulsante indietro. Guarda la prima riga di codice che ho postato. L'azione sul pulsante è @selector (backButtonClicked). Quindi tutto ciò che devi fare è fare quel metodo e dovresti essere bravo!

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

Spero che questo aiuti un po '.

enter image description here

MODIFICARE*****

Stavo giocando un po 'con il mio codice e ho trovato un modo migliore per spostare l'icona sul retro. Ho appena usato la ruota di una nave perché non avevo la stessa che hai fatto, ma funzionerà allo stesso modo.

Dato che non vuoi veramente un titolo, puoi creare il pulsante con questo codice,

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

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

Basta cambiare il materiale 781 con il nome dell'icona. Quindi puoi spostarlo con il seguente,

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

Dai un'occhiata a questa immagine.

pic one

Ciò mostra l'icona in modo considerevole, ma volevo mostrarti l'idea. I numeri per i margini di Edge sono Top, Left, Bottom e Right. Non toccare la sinistra e la destra se non è necessario spostarla in quel modo, cambiare la parte superiore e inferiore. Nota comunque che se hai bisogno di spostarlo di 20 punti come ho fatto io, (troppo) devi compensare il negativo per il fondo, altrimenti l'icona si comprimerà. Questo è quello che sembra con tutti gli zero.

pic with zeros

Quindi puoi muoverlo praticamente ovunque tu voglia, ma dovrai comunque impostare @selector (backButtonClicked) per farlo funzionare come il vero pulsante indietro.


6
2018-04-18 19:29



Questo è Swift 2 versione. Il modo più semplice è come questo. Inserisci questo codice 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
    }

se il tuo pulsante posteriore ha il colore di sfondo, potrebbe non funzionare correttamente.

Aggiungi la tua icona a asset folder per ogni risoluzione come questa: enter image description here


5
2017-10-09 23:21



Il problema è che la tua immagine è troppo alta. Per provarlo, prima prova questo codice:

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;

Sembra a posto Ora cambia il 20 a 30 nei due CGSizeMake chiamate:

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'icona è ora troppo alta.

Quindi basta rendere la tua immagine alta 20 pixel e tutto andrà bene.


3
2018-04-21 01:36



Puoi provare questo

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

2
2018-04-18 21:11



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
2017-09-03 17:10