ios - custom - navigation controller swift 4 example

Imagen y texto del botón Atrás de la barra de navegación personalizada de Swift

Question

Necesito personalizar el aspecto de un botón Atrás en un proyecto Swift.

Esto es lo que tengo:

Esto es lo que quiero:

He intentado crear mi propio UIBarButtonItem pero no puedo averiguar cómo hacer que la imagen esté al lado del texto, en lugar de un fondo o un reemplazo para el texto.

let backButton = UIBarButtonItem(title: "Custom", style: .Plain, target: self, action: nil    )
//backButton.image = UIImage(named: "imageName") //Replaces title
backButton.setBackgroundImage(UIImage(named: "imageName"), forState: .Normal, barMetrics: .Default) // Stretches image
navigationItem.setLeftBarButtonItem(backButton, animated: false)

Answer 1

Nota : Recuerde que el botón Atrás pertenece al ViewController de origen y no al ViewController de destino. Por lo tanto, la modificación debe realizarse en el VC de origen, que se refleja en toda la vista en el controlador de navegación

Fragmento de código:

let backImage = UIImage(named: "icon-back")

self.navigationController?.navigationBar.backIndicatorImage = backImage

self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = backImage

/*** If needed Assign Title Here ***/
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: UIBarButtonItemStyle.plain, target: nil, action: nil)

Answer 2

Para la imagen del botón Atrás:

• Por este tutorial : (pero no funcionó para mí)

  UINavigationBar.appearance().backIndicatorImage = UIImage(named: "imageName")

• Pero esta respuesta de la pila : (funcionó para mí)

  var backButtonImage = UIImage(named: "back-button-image")
  backButtonImage = backButtonImage?.stretchableImage(withLeftCapWidth: 15, topCapHeight: 30)
  UIBarButtonItem.appearance().setBackButtonBackgroundImage(backButtonImage, for: .normal, barMetrics: .default)

Y para la fuente, suponiendo que desea que la fuente coincida con toda la barra de navegación: (actualmente en uso)

if let font = UIFont(name: "Avenir-Book", size: 22) {
  UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName: font]
}

Answer 3

Puedes hacer algo así:

let yourBackImage = UIImage(named: "back_button_image")
self.navigationController?.navigationBar.backIndicatorImage = yourBackImage
self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = yourBackImage
self.navigationController?.navigationBar.backItem?.title = "Custom"

Tu imagen solo tendrá un color aunque

Answer 4

Simplemente reemplace el botón BackButton con un derecho personalizado

let backImage = UIImage(named: "BackBtn")?.withRenderingMode(.alwaysOriginal)
    navigationItem.leftBarButtonItem = UIBarButtonItem(image: backImage, style: .plain, target: self, action: #selector(popnav))

    @objc func popnav() {
    self.navigationController?.popViewController(animated: true)
}

Answer 5

Tener un botón en la barra de navegación con imagen y texto es bastante difícil. Especialmente después de que hayan introducido un nuevo dolor de cabeza con la posición UIBarButtonItem en iOS 11: iOS 11 - posición horizontal UIBarButtonItem

Puede hacer un botón con imagen o un botón con texto, pero no un botón con ambos. Incluso probé dos UIBarButtonItems juntos, uno con imagen y otro con texto; todavía no se ve bien y no se puede acceder fácilmente a su UIStackView para su modificación.

Inesperadamente encontré una solución simple y sencilla:

1) diseñar el botón como vista en Interface Builder. En mi caso, está dentro de UIViewController y es accesible a través de IBOutlet para simplificar

2) establezca la restricción de espacio inicial para que la imagen sea negativa, es posible que también desee establecer el color de fondo de la vista en.

3) utilízalo:

@IBOutlet var backButtonView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()

    let backButton = UIBarButtonItem(customView: self.backButtonView)
    self.backButtonView.heightAnchor.constraint(equalToConstant: 44).isActive = true // if you set more than you''ll get "Unable to simultaneously..."
    self.backButtonView.widthAnchor.constraint(equalToConstant: 75).isActive = true
    self.navigationItem.leftBarButtonItem = backButton
}

Eso es. No es necesario utilizar el truco con el espaciador negativo para iOS 10 o el truco con imageInsets para iOS 11 (que funciona solo si tiene imagen y no funciona para imagen + texto, por cierto).

Answer 6

rápido 3

    extension UIViewController {

        func setBackButton(){
            let yourBackImage = UIImage(named: "backbutton")
            navigationController?.navigationBar.backIndicatorImage = yourBackImage
            navigationController?.navigationBar.backIndicatorTransitionMaskImage = yourBackImage
        }

    }

Answer 7

swift 4

En mi caso, solo necesitaba tener la imagen del botón, sin texto. Espero que esto sea de utilidad para alguien.

let imgBackArrow = UIImage(named: "back_arrow_32")

navigationController?.navigationBar.backIndicatorImage = imgBackArrow
navigationController?.navigationBar.backIndicatorTransitionMaskImage = imgBackArrow

navigationItem.leftItemsSupplementBackButton = true
navigationItem.leftBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: self, action: nil)