Swift自定义导航栏返回按钮

如何去除swift系统自带的导航栏返回按钮？可以自定义返回按钮

在swift中，怎么替换系统自带的导航栏返回按钮？比如说我要替换成一张返回按钮图片，点击返回到上一页

首先，看一下系统自带的导航栏返回按钮的样式

从上面我们可以看到，导航栏返回处左边是一个返回箭头icon，右边是一个Back文字，这就构成了系统的导航栏返回按钮，那么现在，我不想使用系统的这个样式，想自定义一个带箭头icon的按钮，不需要文字，而且返回按钮距离父superView左边为15的距离，怎么做呢？

首先，有人说，简单呀，自定义UIBarButtonItem的customView就行了啊，然后会这样写

不符合要求的写法

// 返回按钮let backButton = UIButton(type: .custom)// 给按钮设置返回箭头图片backButton.setBackgroundImage(#imageLiteral(resourceName: "choose-photo_return"), for: .normal)// 设置framebackButton.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

但是，就这样真的就可以了吗？我们来看一下效果图

咦？貌似达到要求了呀，好的，我们来打印一下backButton的frame,见下图

有些人就郁闷了，为什么我设置的是 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?), 我们可以使用它来设置自定义导航栏返回按钮的边距， 如下

正确的写法（标准）

// 返回按钮let backButton = UIButton(type: .custom)// 给按钮设置返回箭头图片backButton.setBackgroundImage(#imageLiteral(resourceName: "choose-photo_return"), for: .normal)// 设置framebackButton.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]

接着我们看一下两张效果图

图一

图二

这样， 我们就真正实现了自定导航栏返回按钮的正确需要

注意事项，见如下代码注释

• 注意点一

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]， 然后直接看打印的效果图

总结， 这么小的一个问题，却花了不少的时间来完成这个问题的讲解，是因为我觉得，在项目开发过程中，导航栏自定义返回按钮是要经常用到的，并且一般而言，产品的需求很少说直接使用系统自带的就可以，因此希望将这篇文章写出来， 也算是完成以后在开发中再遇到类似的一个长期性的问题，以后完全可以按上面的按部就班！