objective-c - bar - navigation item swift

Cómo posicionar correctamente el botón Atrás en iOS7

Question

Usé este código para usar una imagen personalizada como el botón Atrás en toda la aplicación.

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

Las dimensiones de la imagen son 30 x 30.

El código agrega la imagen como el botón Atrás pero la posición no es la correcta, como puede ver en la siguiente imagen:

¿Alguna idea sobre cómo posicionar correctamente la imagen sin modificar sus dimensiones (al menos la parte visual de la imagen (círculo + flecha))?

EDITAR:

No quiero usar un botón de retroceso personalizado porque eso me obliga a desactivar el deslizamiento / retroceso en iOS7

Answer 1

¡POR FAVOR VEA EDITAR A CONTINUACIÓN!

Creé un botón de retroceso personalizado en iOS7 no hace mucho tiempo. El mío tiene una flecha y la palabra vuelve a ella. Creo que la sugerencia de pawan es un buen comienzo. Para crear el botón Atrás con su imagen personalizada, puede usar

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;

Mi imagen finalImage es un compuesto de dos imágenes diferentes, pero solo puede usar su imagen "posterior". Pero creo que ahí es donde radica el problema. Mi imagen era un compuesto, es posible que también quieras hacer un compuesto, pero deja un espacio libre encima del ícono de tu espalda. Coloqué un espacio libre a la derecha de mi ícono para ajustar el espaciado. Aquí está el código,

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

La imagen wordSpace es un png claro que hice en photoshop por lo que mi nueva imagen del botón de retroceso no se estiró. Es posible que desee colocar un png claro en la parte superior, para empujar el icono hacia abajo un poco. Haga el tamaño.algo de ello en photoshop para lo que cree que debe ser el ajuste. Es posible que necesite futz con esto un poco. Y asegúrese de cambiar el CGSize para que se ajuste a su icono y al espacio libre.

Mi respuesta fue un poco desalentada, así que miré

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

Tuve que jugar un poco con esa línea para que se vea lo mejor posible, pero finalmente me dio lo que quería con el -20. Incluso ajusté la segunda variable, que es 0 en la mía, esto movió el icono real alrededor. -5 coloque el icono hacia abajo, pero es otra opción desde el png claro.

Ahora para tratar con el hecho de que quieres que sea un botón de retroceso real. Mira la primera línea de código que publiqué. La acción en el botón es @selector (backButtonClicked). ¡Entonces todo lo que necesitas hacer es hacer ese método y deberías estar listo!

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

Espero que esto ayude un poco.

EDITAR*****

Estuve jugando un poco con mi código y encontré una mejor manera de mover el icono de atrás. Solo usé la rueda de un barco porque no tenía la misma que tú, pero funcionará igual.

Como realmente no quieres un título, puedes crear el botón con este código,

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

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

Simplemente cambie las cosas 781 con el nombre de su icono. Entonces puedes moverlo con lo siguiente,

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

Echa un vistazo a esta imagen.

Esto muestra el icono hacia abajo considerablemente, pero quería mostrarte la idea. Los números para las inserciones de Borde son Superior, Izquierda, Inferior y Derecha. No toque la izquierda y la derecha si no necesita moverlo de esa manera, cambie la parte superior e inferior. Sin embargo, tenga en cuenta que si necesita bajarlo en 20 puntos como lo hice, (demasiado) necesita compensar en negativo para la parte inferior, o el icono se comprimirá. Esto es lo que parece con todos los ceros.

Así que puedes moverlo donde quieras, pero igual tendrás que configurar @selector (backButtonClicked) para que funcione como el botón de retroceso real.

Answer 2

Bueno, solo siga una de las sugerencias para arreglar el diseño y pierda el "gesto de espalda" de iOS 7, y luego UIScreenEdgePanGestureRecognizer con un UIScreenEdgePanGestureRecognizer .

Un UIScreenEdgePanGestureRecognizer busca gestos de barrido (arrastre) que comienzan cerca de un borde de la pantalla. El sistema usa gestos de borde de pantalla en algunos casos para iniciar las transiciones del controlador de vista. Puede usar esta clase para replicar el mismo comportamiento de gesto para sus propias acciones.

Answer 3

El problema es que tu imagen es demasiado alta. Para probar esto, primero prueba este código:

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;

Se ve bien. Ahora cambie el 20 a 30 en las dos llamadas CGSizeMake :

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;

El icono ahora es demasiado alto.

Así que simplemente haga que su imagen tenga 20 píxeles de alto y todo estará bien.

Answer 4

Esta es la versión de Swift 2 . La manera más simple es así. Pon este código en 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
    }

si su botón Atrás tiene un color de fondo, puede que no funcione correctamente.

Agregue su icono a la asset folder para cada resolución como esta:

Answer 5

Puedes intentar esto

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

Answer 6

EDITAR
Creo que podría haber encontrado el truco (en iOS 7 Design Resource - Catálogo de interfaz de usuario de UIKit).
En Elementos de botón de barra

Tenga en cuenta que una imagen de botón de barra se representará automáticamente como una imagen de plantilla dentro de una barra de navegación, a menos que establezca explícitamente su modo de representación en UIImageRenderingModeAlwaysOriginal. Para obtener más información, vea Imágenes de plantilla.

En Imágenes de plantilla tienen un código para especificar el UIImageRenderingMode.

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

Intenta crear el UIImage con inserciones de alineación y luego configura la imagen del Indicador de retroceso.

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

También puede intentar ajustar la posición del texto del título UINavigationBar

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

Answer 7

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