Swift自定义导航栏返回按钮
如何去除swift系统自带的导航栏返回按钮？能够自定义返回按钮
在swift中，怎么替换系统自带的导航栏返回按钮？好比说我要替换成一张返回按钮图片，点击返回到上一页
首先，看一下系统自带的导航栏返回按钮的样式web
从上面咱们能够看到，导航栏返回处左边是一个返回箭头icon，右边是一个Back文字，这就构成了系统的导航栏返回按钮，那么如今，我不想使用系统的这个样式，想自定义一个带箭头icon的按钮，不须要文字，并且返回按钮距离父superView左边为15的距离，怎么作呢？swift
首先，有人说，简单呀，自定义UIBarButtonItem的customView就好了啊，而后会这样写数组
不符合要求的写法
// 返回按钮
let backButton = UIButton(type: .custom)
// 给按钮设置返回箭头图片
backButton.setBackgroundImage(#imageLiteral(resourceName: "choose-photo_return"), for: .normal)
// 设置frame
backButton.frame = CGRect(x: 0, y: 13, width: 18, height: 18)
backButton.addTarget(self, action: #selector(back), for: .touchUpInside)
// 自定义导航栏的UIBarButtonItem类型的按钮
let backView = UIBarButtonItem(customView: backButton)
// 返回按钮设置成功
navigationItem.leftBarButtonItem = backView
可是，就这样真的就能够了吗？咱们来看一下效果图ide
咦？貌似达到要求了呀，好的，咱们来打印一下backButton的frame,见下图svg
有些人就郁闷了，为何我设置的是 backButton.frame = CGRect(x: 0, y: 13, width: 18, height: 18) 也就是说，距离左边的x为0， 可是怎么run出来是20呢？？这就牵扯到系统的默认设置问题，不管x的左边你设置成多少，它默认就是20的边距，也就是说，你只能设置frame的 y、 width、height， 可是设置x不起任何做用。好了， 打了解决关键问题的时刻了， 在导航栏中，UIBarButtonItem有一个这样的初始化方法： public convenience init(barButtonSystemItem systemItem: UIBarButtonSystemItem, target: Any?, action: Selector?), 咱们可使用它来设置自定义导航栏返回按钮的边距， 以下ui
正确的写法（标准）
// 返回按钮
let backButton = UIButton(type: .custom)
// 给按钮设置返回箭头图片
backButton.setBackgroundImage(#imageLiteral(resourceName: "choose-photo_return"), for: .normal)
// 设置frame
backButton.frame = CGRect(x: 200, y: 13, width: 18, height: 18)
backButton.addTarget(self, action: #selector(back), for: .touchUpInside)
// 自定义导航栏的UIBarButtonItem类型的按钮
let backView = UIBarButtonItem(customView: backButton)
// 重要方法，用来调整自定义返回view距离左边的距离
let barButtonItem = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
barButtonItem.width = -5
// 返回按钮设置成功
navigationItem.leftBarButtonItems = [barButtonItem, backView]
接着咱们看一下两张效果图spa
图一code
图二orm
这样， 咱们就真正实现了自定导航栏返回按钮的正确须要xml
注意事项，见以下代码注释
- 注意点一
backButton.setBackgroundImage(#imageLiteral(resourceName: "choose-photo_return"), for: .normal) 不要写成 backButton.setImage(#imageLiteral(resourceName: "choose-photo_return"), for: .normal), 由于前者是设置背景图片，适应并铺满按钮， 后者只是单纯的设置图片，可是，当frame的size变得很大的时候，setImage就会致使图片在button中的位置有误差，好比size大小为（width：200， height：200），这种状况下，返回按钮距离左边是15的距离，可是返回按钮图片距离左边就不是15的距离了，就没法知足需求！因此，为了保证不出错，建议使用setBackgroundImage的形式。
- 注意点二
barButtonItem.width = -5的意思是， backButton距离左边为 20 - 5 的距离，由于系统本身默认的必定是 20 的距离, 因此咱们要距离左边越近， 设置的 barButtonItem.width越小（负数）， 好比如今我要backButton距离左边的距离为 12， 那么就应该设置成 barButtonItem.width = -8 (20 - 8 = 12), 因此必定要弄清楚它要表达的含义。
- 注意点三
navigationItem.leftBarButtonItems = [barButtonItem, backView]后面数组中的顺序必定不能颠倒，必须按这个顺序来, 不然设置不起任何做用。好比如今 我将其设置成 [backView, barButtonItem]， 而后直接看打印的效果图
总结， 这么小的一个问题，却花了很多的时间来完成这个问题的讲解，是由于我以为，在项目开发过程当中，导航栏自定义返回按钮是要常常用到的，而且通常而言，产品的需求不多说直接使用系统自带的就能够，所以但愿将这篇文章写出来， 也算是完成之后在开发中再遇到相似的一个长期性的问题，之后彻底能够按上面的循序渐进！