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

用于设置自定义后退栏按钮并从后退栏按钮中删除文本，仅来自故事板，无需任何编码。

结果：

Answer 5

对于后退按钮图像:

• 通过本教程 :(但不适合我)

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

• 但是这个堆栈回答 :(为我工作)

  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 6

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

您可以使用带有图像的按钮或带有文本的按钮,但不能使用具有这两个按钮的按钮.我甚至尝试了两个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 7

我已经尝试了以上所有方法，并且都在不更改文本的情况下制作了自定义图像唯一对我有用的是来自这个答案

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

Answer 8

我知道已经得到答复了。在这里您可以设置标题、图像和目标。

    let view = UIView()
    let button = UIButton(type: .system)
    button.setImage(UIImage(named: "backArrow_theme"), for: .normal)
    button.setTitle("Back to workflow", for: .normal)
    button.addTarget(self, action: #selector(onBackButton(_:)), for: .touchUpInside)
    button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: -10)
    button.sizeToFit()
    view.addSubview(button)
    view.frame = button.bounds
    navigationItem.leftBarButtonItem = UIBarButtonItem(customView: view)

Answer 9

迅捷3

    extension UIViewController {

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

    }

Answer 10

这对我使用 swift 5 在 iOS 13 上有效。只需隐藏原始后退按钮并添加一个带有操作的新导航左栏按钮项目即可。

navigationItem.hidesBackButton = true
navigationItem.leftBarButtonItem = UIBarButtonItem(image: #imageLiteral(resourceName: "backBtn"), style: .plain, target: self, action: #selector(back(sender:)))

@objc func back(sender: UIBarButtonItem) {
    self.navigationController?.popViewController(animated:true)
}