Swift自定义导航栏返回按钮
如何去除swift系统自带的导航栏返回按钮?可以自定义返回按钮
在swift中,怎么替换系统自带的导航栏返回按钮?比如说我要替换成一张返回按钮图片,点击返回到上一页
首先,看一下系统自带的导航栏返回按钮的样式
从上面我们可以看到,导航栏返回处左边
是一个返回箭头icon,右边
是一个Back文字,这就构成了系统的导航栏返回按钮,那么现在,我不想使用系统的这个样式,想自定义一个带箭头icon的按钮,不需要文字,而且返回按钮距离父superView左边为15的距离,怎么做呢?
首先,有人说,简单呀,自定义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
但是,就这样真的就可以了吗?我们来看一下效果图
咦?貌似达到要求了呀,好的,我们来打印一下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)// 设置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]
接着我们看一下两张效果图
图一
图二
这样, 我们就真正实现了自定导航栏返回按钮的正确需要
注意事项,见如下代码注释
- 注意点一
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], 然后直接看打印的效果图
总结, 这么小的一个问题,却花了不少的时间来完成这个问题的讲解,是因为我觉得,在项目开发过程中,导航栏自定义返回按钮是要经常用到的,并且一般而言,产品的需求很少说直接使用系统自带的就可以,因此希望将这篇文章写出来, 也算是完成以后在开发中再遇到类似的一个长期性的问题,以后完全可以按上面的按部就班!
Swift自定义导航栏返回按钮相关推荐
- Swift - 重写导航栏返回按钮
// 重写导航栏返回按钮方法 func configBackBtn() -> Void { // 返回按钮 let backButton = UIButton(type: .custom) // ...
- ios开发返回按钮消失_iOS开发之自定义导航栏返回按钮右滑返回手势失效的解决...
我相信针对每一个iOS开发者来说~除了根视图控制器外~所有的界面通过导航栏push过去的界面都是可以通过右滑来返回上一个界面~其实~在很多应用和APP中~用户已经习惯了这个功能~然而~作为开发者的我们 ...
- 去掉 iOS 导航栏返回按钮文本三种方案
作者 | 街角仰望 责编 | 欧阳姝黎 方案一 自定义 UINavigationController 遵守 UINavigationBarDel 协议 实现下面方法: #pragma ma ...
- 小程序自定义导航栏返回主页
小程序自定义导航栏返回主页 效果图 在app.js中获取状态栏的高度statusBarHeight 自定义组件navbar.wxml 自定义组件navbar.wxss 自定义组件navbar.json ...
- IOS设置导航栏返回按钮,并添加事件返回主页面
IOS设置导航栏返回按钮,并添加事件返回主页面 前提是已经push了一个viewController了.才能使用. XXXTableViewController 里面书写 - (void)viewDi ...
- 微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
- uni-app 自定义导航栏 图片按钮
按钮据右边边框距离设置: document.getElementsByClassName('uni-btn-icon')[2].style.marginRight = '22px' 监听按钮状态: o ...
- IOS 自定义导航栏标题和返回按钮标题
IOS中自定义导航栏标题: UILabel *titleText = [[UILabel alloc] initWithFrame: CGRectMake(160, 0, 120, 50)]; tit ...
- 自定义导航栏左上角胶囊按钮返回、首页小房子
示例项目地址:https://github.com/Shay0921/header-navbar 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平 ...
最新文章
- 自定义webpart显示Lync状态球
- python三十七:xml模块
- VTK:Qt之RenderWindowNoUiFile
- 【Spring学习】IoC、DI、AOP入门学习
- java gui 按键 数组_java GUI分配数组值
- 华为谷歌互利合作曝光:或将推Nexus手表
- 综合技术 --web.xml
- 画出计算机网络的一般组成,计算机网络习题(有答案).pdf
- python装饰器详解-如何更通俗地讲解Python的装饰器?
- python剑指offer数组中出现次数超过一半的数字
- 解决conda install速度慢
- robots协议文件的几种写法及示例
- svg基础+微信公众号交互(一)
- java导出用什么_Java导出Excel
- 《我的世界》JAVA版本需使用微软账号登录
- 流程设计建模方法:流程的需求梳理之流程级别梳理
- 搞 AI 建模预测都在用 Python,其实入门用 SPL 也不错
- 【读图】揭密大卖家们的钻展制作流程
- 二维码解码芯片最新三款的二维码芯片MCU不同之处
- 怎么注册成为滴滴快车的司机?
热门文章
- SaaSBase:最受欢迎的CRM软件有哪些
- 【Linux运维——TOP命令】 UID、PID和PPID的介绍
- unity 消除 trial version水印
- hive截取字段中一部分
- html页面解析json,JavaScript如何解析json?
- ArcGIS基础:分级色彩和换行标注(VbCrLf)操作(以制作社会经济分析图为例)
- python turtle画四叶草的步骤_用Python的turtle作画(1)——花树
- python:关于三维装箱问题的算法研究-2
- Lua 协程和线程区别
- oppo reno 10倍变焦版