Swift Custom NavBar后退按钮图像和文本

Question

我需要在Swift项目中自定义后退按钮的外观。

这就是我所拥有的：

这就是我想要的：

我已经尝试创建自己的UIBarButtonItem，但我无法弄清楚如何将图像放在文本旁边，而不是作为文本的背景或替代。

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

你可以这样做：

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

您的图像只有一种颜色

Answer 2

注意：请记住，后退按钮属于源ViewController，而不属于目标ViewController。因此，需要在源VC中完成修改，源VC反映到导航控制器中的所有视图

代码片段：

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 3

迅速4

在我的情况下，我只需要按钮的图像，没有任何文字。我希望这对某人有用。

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)

对于iOS 12，你可以做到

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

Answer 4

对于后退按钮图像：

• 通过这个tutorial :(但不适合我） UINavigationBar.appearance().backIndicatorImage = UIImage(named: "imageName")
• 但是这个stack answer :(为我工作）

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

对于字体，假设您希望字体与整个导航栏匹配:(当前正在使用中）

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

Answer 5

在带有图像和文本的导航栏中有一个按钮非常困难。特别是他们在iOS 11中引入了UIBarButtonItem位置的新头痛：iOS 11 - UIBarButtonItem horizontal position

您可以使用带有图像的按钮或带有文本的按钮，但不能使用具有这两个按钮的按钮。我甚至尝试了两个UIBarButtonItems，一个带有图像，另一个带有文本 - 它仍然看起来不太好，并且它们的UIStackView无法轻易访问以进行修改。

出乎意料的是，我找到了一个简单的解决方案：

1）在Interface Builder中将按钮设计为视图。在我的例子中，它是在目标UIViewController内部，并且为了简单起见可通过IBOutlet访问

2）将图像的前导空间约束设置为负，您可能还需要将视图的背景颜色设置为.clear。

3）使用它：

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

而已。不需要使用iOS 10的负间隔技巧或iOS 11的imageInsets技巧（仅当你有图像并且不适用于图像+文本时才有效，BTW）。

Answer 6

迅捷3

    extension UIViewController {

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

    }

Answer 7

只需使用自定义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)
}

Answer 8

我已经尝试了上述所有内容并且都在不改变文本的情况下制作自定义图像唯一一个为我工作的是来自这个answer

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

Answer 9

Swift 4.2添加此函数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
}

使用你应该在这里使用

viewDidLoad中（）

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