当前位置: > > > Swift - 修改导航栏“返回”按钮文字,图标

Swift - 修改导航栏“返回”按钮文字,图标

(本文代码已升级至Swift4)

项目中常常会使用 UINavigationController 对各个页面进行导航,导航栏左侧的返回按钮默认标题文字是上级页面的title

但如果上级页面的标题很长,那么这个返回按钮字很多就会很丑:
      

当文字极其长时返回文字就会变成“back”: 
      

一,要修改“返回按钮”的文字,有如下两种方式:

1,在父页面中设置
navigationItem.backBarButtonItem设为自定义的UIBarButtonItem
这种方法所有的子界面返回时都变成了我们定义的文字,同时文字前面任然保留返回箭头。
let item = UIBarButtonItem(title: "返回", style: .plain, target: self, action: nil)
self.navigationItem.backBarButtonItem = item
或者也可以直接把文字设为空字符串,这样就只有一个箭头了。
let item = UIBarButtonItem(title: "", style: .plain, target: self, action: nil)
self.navigationItem.backBarButtonItem = item

2,在子页面中设置
navigationItem.leftBarButtonItem为自定义的UIBarButtonItem
这种方式可以给各个子页面返回按钮单独设置不同的文字,但文字前面是没有小箭头的。
import UIKit

class DetailViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let leftBarBtn = UIBarButtonItem(title: "返回", style: .plain, target: self,
                                         action: #selector(backToPrevious))
        self.navigationItem.leftBarButtonItem = leftBarBtn
    }
    
    //返回按钮点击响应
    @objc func backToPrevious(){
        self.navigationController!.popViewController(animated: true)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

二,修改“返回按钮”图标 
从上面最后一个例子可以看到,在子页面修改返回按钮的话只有文字没有图片。如果想要使用自定义图片,或者图片文字都需要的话可以进行如下操作:
1,如果只需要图片,不需要文字
比如我们想要用左侧这个图片(back@2x.png)作为返回图标
               
import UIKit

class DetailViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let leftBarBtn = UIBarButtonItem(title: "", style: .plain, target: self,
                                         action: #selector(backToPrevious))
        leftBarBtn.image = UIImage(named: "back")
        
        //用于消除左边空隙,要不然按钮顶不到最前面
        let spacer = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil,
                                     action: nil)
        spacer.width = -10
        
        self.navigationItem.leftBarButtonItems = [spacer, leftBarBtn]
    }
    
    //返回按钮点击响应
    @objc func backToPrevious(){
        self.navigationController!.popViewController(animated: true)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

2,既需要图片也需要文字

 
这个时候就要通过创建UIButton来实现了
import UIKit

class DetailViewController: UIViewController {
    
    override func viewDidLoad() {
        
        let button =   UIButton(type: .system)
        button.frame = CGRect(x:0, y:0, width:65, height:30)
        button.setImage(UIImage(named:"back"), for: .normal)
        button.setTitle("返回", for: .normal)
        button.addTarget(self, action: #selector(backToPrevious), for: .touchUpInside)
        
        let leftBarBtn = UIBarButtonItem(customView: button)
        
        //用于消除左边空隙,要不然按钮顶不到最前面
        let spacer = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil,
                                     action: nil)
        spacer.width = -10;
        
        self.navigationItem.leftBarButtonItems = [spacer,leftBarBtn]
    }
    
    //返回按钮点击响应
    @objc func backToPrevious(){
        self.navigationController!.popViewController(animated: true)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

三,自定义leftBarButtonItems导致左边缘滑动返回失效问题解决
通常使用 navigationController 跳转到另一页面时,除了可以点击左上角的返回按钮,还可以通过在屏幕左侧向右滑动来返回到上一层。但如果像上面样例一样,自定义了 self.navigationItem.leftBarButtonItems 后会发现,滑动返回(swipe back)失效了。

解决办法:Swift - 自定义导航栏leftBarButtonItems导致滑动返回失效问题解决
评论11
  • 11楼
    2017-08-02 12:15
    痞子

    可以吧返回的哪个箭头的图片发我吗

    站长回复

    我页面上已经有放有原图了,你直接另存为就好了。

  • 10楼
    2016-06-11 17:39
    Kimi

    謝謝你的分享,非常的詳細,十分感激您

    站长回复

    不客气,我会持续更新下去的,欢迎常来看看。

  • 9楼
    2016-03-30 22:54
    poppy

    谢谢你。真的很认真,你必有一个锦绣的前程

    站长回复

    谢谢你的夸奖,欢迎常来看看,我会持续更新下去的。

  • 8楼
    2016-03-25 16:04
    poppy

    系统自带的返回箭头的frame不能改变吗,返回字体调小之后箭头和字体相比有点大啊

    站长回复

    系统箭头没法改大小(至少目前我还没找到方法),只能自己用其他的图标替换了。

  • 7楼
    2016-03-22 09:53
    苦茶。

    航哥,根据上面这位网友的留言,现在一个视图不知为何支持全屏滑动返回,如何设置可以做到只能通过边缘滑动返回呢?

    站长回复

    默认系统只能边缘滑动返回的,要想全屏滑动反而要自己添加滑动手势才行,你检查下是不是代码哪里加了手势了。

  • 6楼
    2016-03-14 11:47
    泡泡

    站长你好:
    系统自带的侧滑返回,只能通过边缘开始滑动才能触发,应该怎么设置才可以其他地方侧滑也能触发?

    站长回复

    全屏滑动返回也是可以做的,我下周写篇相关文章,你可以关注下。

  • 5楼
    2016-03-14 10:53
    苦茶。

    航哥,继续接我上一条的评论。经过测试,发现是由于那个网页本身自带手势,然后两个手势冲突,导致右滑pop失效。因为原先我的webview的frame占据了整个屏幕,然后我将其frame缩小,流出了一块空白区域,在这个区域上右滑能够pop!航哥,那么针对这个问题,有解决方法吗

    站长回复

    参照前面的回复,我下周写篇相关的文章,你可以关注下。

  • 4楼
    2016-03-14 10:22
    苦茶。

    航哥,我自定义返回按钮后,由于右滑手势失效,我用了你的方法实现 UIGestureRecognizerDelegate 协议,并且self.navigationController?.interactivePopGestureRecognizer!.delegate = self。但是不知为何,有些网站却总有问题,现象是网页刚开始加载时(还没加载完毕)可以右滑返回,但是等到网页全部加载完后,右滑也不能pop啊?下面是我的测试网址:http://news.youth.cn/gn/201603/t20160313_7739775.htm,麻烦航哥帮我看下,谢谢!

    站长回复

    这个是webView与外部手势冲突的问题,这周的计划排满了,我下周写篇相关的文章,你可以关注下。

  • 3楼
    2016-03-03 17:08
    苦茶。

    航哥,看了这篇文章,我有两个问题,尤其是第二个问题,希望能得到你的回复。
    1、在你最后“既需要图片也需要文字”的例子中,是自定义了button当做返回按钮没错,但是自定义后,无法默认左滑pop回上一层VC。请问该如何解决这个问题。难道要加上手势识别吗?
    2、我用了你“在父页面中设置”的方法,确实很好用,但是会出现一个问题:当要显示的title的字数很多时,这个“返回”两个字会自动消失,而向左的箭头还存在。虽然不是什么大问题,但我就是想让“返回”两个字不消失,由于不知道怎么限制self.title的字数,我尝试过自定义一个label,将导航栏的titleview设置成这个label,然后把label的宽度设置的足够能够同时放的下向左的箭头还有“返回”,但还是没有成功,我比较懒,就是想用系统自带的这个向左的箭头,请问航哥有办法解决我的问题吗

    站长回复

    1,自定义按钮后,要实现滑动返回,确实需要重新设置手势。不过这个只要一句话就可以了,我文章尾部已更新。
    2,按钮文字消失问题,同你想的一样,确实是可以通过titleview设置成自定义label来解决。前面已经排了几篇文章计划,所以这个我下周迟些会写篇相关文章,你可以关注下。

  • 2楼
    2015-12-23 09:17
    yue

    < 符号的粗细 怎么调?

    站长回复

    默认的返回符号<是系统内部图标,无法调整粗细。你可以通过自定义返回按钮,使用自己提供的图标。

  • 1楼
    2015-12-22 22:29
    yue

    这返回文字的颜色如何修改啊!

    站长回复

    无法直接设置UIBarButtonItem的颜色。但可以自定义一个UIButton,然后设置这个button的颜色(setTitleColor),最后用这个UIButton创建UIBarButtonItem,添加到导航条上