it-swarm.com.de

Swift Custom NavBar Zurück-Taste Bild und Text

Ich muss das Aussehen einer Zurück-Schaltfläche in einem Swift-Projekt anpassen.

Folgendes habe ich:  Default Back Button

Hier ist was ich will:  Custom Back Button

Ich habe versucht, mein eigenes UIBarButtonItem zu erstellen, kann aber nicht herausfinden, wie das Bild neben dem Text angezeigt wird, anstatt als Hintergrund oder als Ersatz für den Text.

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)
28
Conor

Sie können so etwas tun:

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

Ihr Bild wird jedoch nur eine Farbe haben

50
Randy

Hinweis : Bitte beachten Sie, dass die Zurück-Schaltfläche zum Quell-ViewController gehört und nicht zum Ziel-ViewController. Daher muss die Änderung in der Quell-VC vorgenommen werden, was sich auf die gesamte Ansicht in der Navigationssteuerung auswirkt

Code-Auszug: 

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

Schnell 4

In meinem Fall brauchte ich nur das Bild der Schaltfläche ohne Text. Ich hoffe, das wird jemandem nützlich sein. 

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)

Für iOS 12 können Sie das tun

func setNavigationBar() {

    self.navigationItem.setHidesBackButton(true, animated:false)

    //your custom view for back image with custom size
    let view = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
    let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))

    if let imgBackArrow = UIImage(named: "icn_back_arrow") {
        imageView.image = imgBackArrow
    }
    view.addSubview(imageView)

    let backTap = UITapGestureRecognizer(target: self, action: #selector(backToMain))
    view?.addGestureRecognizer(backTap)

    let leftBarButtonItem = UIBarButtonItem(customView: view ?? UIView())
    self.navigationItem.leftBarButtonItem = leftBarButtonItem
}

@objc func backToMain() {
    self.navigationController?.popViewController(animated: true)
}
16
Booharin

In der Navigationsleiste eine Schaltfläche mit Bild UND Text zu haben, ist ziemlich schwierig. Besonders nachdem sie mit UIBarButtonItem in iOS 11 einen neuen Kopfschmerz eingeführt haben: iOS 11 - UIBarButtonItem horizontale Position

Sie können entweder eine Schaltfläche mit Bild oder eine Schaltfläche mit Text erstellen, nicht jedoch eine Schaltfläche mit beiden. Ich habe sogar zwei UIBarButtonItems zusammen ausprobiert, eines mit Bild und ein anderes mit Text - es sieht immer noch nicht gut aus, und ihr UIStackView kann nicht einfach zur Änderung aufgerufen werden.

Unerwartet fand ich eine einfache einfache Lösung:

1) Entwerfen Sie die Schaltfläche als Ansicht im Interface Builder. In meinem Fall ist es innerhalb von UIViewController und über IBOutlet der Einfachheit halber zugänglich

2) Wenn Sie die Einschränkung für den führenden Platz für das Bild als negativ festlegen, können Sie auch die Hintergrundfarbe der Ansicht auf .clear setzen.

 enter image description here

3) benutze es:

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

Das ist es. Sie müssen den Trick mit negativem Spacer für iOS 10 nicht verwenden oder den Trick mit imageInsets für iOS 11 (der nur funktioniert, wenn Sie über ein Image verfügen und nicht für Image + Text, BTW).

 enter image description here

8
Vitalii

Für das hintere Tastenbild: 

  • Mit diesem Tutorial : (hat aber bei mir nicht funktioniert)

    UINavigationBar.appearance().backIndicatorImage = UIImage(named: "imageName")
    
  • Aber diese stack answer : (hat für mich gearbeitet)

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

Angenommen, Sie möchten, dass die Schriftart für die gesamte Navigationsleiste passt: (derzeit verwendet)

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

Swift 3 

    extension UIViewController {

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

    }
2
Safad Funy

Ersetzen Sie einfach das backButton durch ein benutzerdefiniertes rightBarButtonItem

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)
}
1
Mohamed Ali

Swift 4.2 .__ Fügen Sie diese Funktionen hinzu ViewController

func addNavigationBarButton(imageName:String,direction:direction){
    var image = UIImage(named: imageName)
    image = image?.withRenderingMode(.alwaysOriginal)
    switch direction {
    case .left:
       self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style:.plain, target: nil, action: #selector(goBack))
    case .right:
       self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: image, style:.plain, target: nil, action: #selector(goBack))
    }
}

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

enum direction {
    case right
    case left
}

Verwendung sollten Sie hier verwenden

viewDidLoad () 

addNavigationBarButton(imageName: "ic_back", direction:.left)
0
ikbal

Ich habe alle oben genannten Schritte ausprobiert und alle benutzerdefinierten Bilder erstellt, ohne den Text zu ändern. Die einzige, die für mich bearbeitet wurde, ist diese Antwort

let backBTN = UIBarButtonItem(image: UIImage(named: "Back"), 
                              style: .plain, 
                              target: navigationController, 
                              action: #selector(UINavigationController.popViewController(animated:)))
navigationItem.leftBarButtonItem = backBTN
navigationController?.interactivePopGestureRecognizer?.delegate = self
0
Mohamed Saleh