preferslargetitles - iOS 7: Posición de la imagen del indicador de respaldo personalizado

swift large navigation bar

Question

Tengo problemas para configurar correctamente una imagen de indicador de fondo personalizada. ¡El indicador no está centrado!

Aquí hay una foto:

Estoy configurando la imagen del indicador en didFinishLaunchingWithOptions: method ...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

   UIImage *image = [UIImage imageNamed:@"Back"];
   [UINavigationBar appearance].backIndicatorImage = image;
   [UINavigationBar appearance].backIndicatorTransitionMaskImage = image;

   return YES;
}

¿Cómo puedo centrarlo?

ps. Ya he leído esta imagen del indicador de respaldo personalizado en iOS 7 no centrada verticalmente , pero en realidad no me funcionó.

Answer 1

Así es como resolví el problema usando la API de apariencia y está funcionando muy bien. Cuando se cambia la imagen de backButtonBackgroundImage, se extiende automáticamente a través de barButtonItem, por lo que debemos cambiar su tamaño a original usando resizableImageWithCapInsets:. Para colocarlo dentro de barButtonItem, usamos imageWithAlignmentRectInsets para agregar mayúsculas a su alrededor. Luego, asigne usando setBackButtonBackgroundImage: forState: barMetrics .

Simplemente juega con los números y encontrarás la posición correcta.

int imageSize = 24;
UIImage *barBackBtnImg = [[[UIImage imageNamed:@"backButton"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, imageSize, 0, 0)] imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, -10, 0, -10)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:barBackBtnImg forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Answer 2

Esta solución funcionó para mí en Swift 2.1. iOS 9.2.1. (XCode 7.2) en iPhone en modo retrato. Lo he probado en los simuladores iPhone 5 y 6+ y también funcionó.

import UIKit

class EVEMainNaviVC: UINavigationController
{
    override func viewWillAppear(animated: Bool)
    {
        super.viewWillAppear(animated)
    }

override func viewDidLoad()
{
    super.viewDidLoad()
    self.view.backgroundColor = APP_BACKGROUND_COLOR
    self.setupAppNaviagtionBar()
}


private func setupAppNaviagtionBar()
{
    dispatch_async(dispatch_get_main_queue())
    { () -> Void in
        self.navigationBar.setHeight(55.0)
        self.navigationBar.translucent        = false
        self.navigationBar.alpha              = 1.0
        self.navigationBar.barTintColor       = UIColor.whiteColor()
        let newBackButtonImageInset                         = UIEdgeInsetsMake(0, 0, -6, 0)
        let newBackButtonImage                              = UIImage(named: "back")?.imageWithAlignmentRectInsets(newBackButtonImageInset)
        self.navigationBar.backIndicatorImage               = newBackButtonImage
        self.navigationBar.backIndicatorTransitionMaskImage = newBackButtonImage
        self.navigationBar.tintColor = CUSTOM_BUTTON_COLOR
    }
}
}

Answer 3

Esto sucede porque simplemente está cambiando la fuente de la imagen del indicador de respaldo en su UINavigationView, y no el marco también. Vea, cuando se crea el UINavigationView, el marco del indicador de respaldo se configura para mantener el tamaño de la imagen del botón de retroceso de iOS 7 predeterminado. La imagen del botón Atrás por defecto es más grande que la tuya, y es por eso que no se ve alineada.

Para arreglarlo, debe restablecer el Marco del indicador trasero para mantener el tamaño de su imagen. Otra opción es crear un UIButton con el tamaño de marco y la imagen correctos y asignarlos a un UIBarButtonItem. Luego, puede reemplazar el BackBarButtonItem de su UINavigationItem con el nuevo UIBarButtonItem que creó.

Answer 4

He encontrado la solución más simple que he visto nunca. Sólo tres cosas.

1. Sobrescriba UINavigationBar y utilícelo en su UINavigationController

   let navigationController = UINavigationController(navigationBarClass: NavigationBar.self, toolbarClass: nil)
   navigationController.viewControllers = [viewController]

2. Configure las imágenes de su indicador:

   backIndicatorImage = #imageLiteral(resourceName: "back")
   backIndicatorTransitionMaskImage = #imageLiteral(resourceName: "back")

3. Implemente layoutSubviews en su clase UINavigationBar personalizada.

   override func layoutSubviews() {
       super.layoutSubviews()
   
       subviews.forEach { (view) in
           if let imageView = view as? UIImageView {
               if imageView.image == backIndicatorImage || imageView.image == backIndicatorTransitionMaskImage {
                   view.frame.origin.y = floor((frame.height - view.frame.height) / 2.0)
               }
           }
       }
   }

Eso es todo. :)

Answer 5

Mi objetivo era posicionar la imagen del botón Atrás sin interferir con las subvistas de UINavigationItem . Entonces, lo que hice fue crear una extensión para UIImage que agrega un relleno alrededor de la imagen.

extension UIImage {
    public func imageWith(padding: UIEdgeInsets) -> UIImage {
        let origin = CGPoint(x: padding.left, y: padding.top)
        let sizeWithPadding = CGSize(width: padding.left + size.width + padding.right, height: padding.top + size.height + padding.bottom)

        UIGraphicsBeginImageContextWithOptions(sizeWithPadding, false, 0.0)
        draw(in: CGRect(origin: origin, size: size))

        let imageWithPadding = UIGraphicsGetImageFromCurrentImageContext() ?? self
        UIGraphicsEndImageContext()

        return imageWithPadding
    }
}

Por ejemplo: si desea mover la imagen a la parte superior, agregue el relleno correspondiente a la parte inferior. .imageWith(padding: UIEdgeInsets(top: 0, left: 0, bottom: 2, right: 0))

Answer 6

 UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, 2, 0);
 UIImage *backArrowImage = [[UIImage imageNamed:@"Back"] imageWithAlignmentRectInsets:insets];

 [[UINavigationBar appearance] setBackIndicatorImage:backArrowImage];
 [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backArrowImage];