2017-04-13 10:54:40 Mango_ios 阅读数 6611

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

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

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

test1

从上面我们可以看到,导航栏返回处左边是一个返回箭头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

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

test2

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

test3

有些人就郁闷了,为什么我设置的是 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]

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

图一

test4

图二

test5

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

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

  • 注意点一

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

test6

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

2019-01-05 20:17:07 qq_41408081 阅读数 2217

由于首页不需要导航栏,标题等,而连接的子页面又要有返回按钮,子页面做了有返回按钮,首页的导航留了一段空白,很不好看;所以要把它隐藏掉,做了隐藏之后,发现子页面的返回按钮也跟着隐藏掉了。

swift 本来是要有返回按钮,父页面要存在导航栏的(我刚入门,不知道这是不是真的)

我就想 :swift 有没有把首页导航栏隐藏而子页面的返回按钮又可以存在的 ?

找了很多文章,大部分都是怎么隐藏返回按钮的,或者是隐藏导航栏的;

终于,在简书找到了找到这篇文章时,很久都不敢确定,兜兜转转之后,把它死马当活马医,拷贝进去,咦,真的可以耶!

没办法(一个web 的前后端的开发跑来学移动开发),刚学 swift 不久 ,都是拖拉拽,对swift 代码不是很熟悉(幸好有web代码的基础在),还是能看懂一部分的,把注释补充完整,方便自己理解的同时还方便他人!

好了,以下的是代码:

import UIKit
class ViewController: UIViewController {
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
            // 隐藏首页的导航栏 true 有动画
            self.navigationController?.setNavigationBarHidden(true, animated: true)
    }
    
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        // 跳转页面的导航 不隐藏 false
        self.navigationController?.setNavigationBarHidden(false, animated: true)
    }
    
    // 跳转到下一个页面
    func viewToSecond() {
        // 下一个页面返回首页,隐藏导航栏  需要动画
         let nextVC = self.storyboard?.instantiateViewController(withIdentifier: "NextVC")
        self.navigationController?.pushViewController(nextVC!, animated: true)
    }

}

有什么问题,可以留言,方便你我他,共同成长!

2018-11-02 17:43:12 weizhengzhou520 阅读数 590

原文链接:http://www.hangge.com/blog/cache/detail_957.html

笔记:

let item = UIBarButtonItem(title: "返回", style: .plain, target: self, action: nil)
self.navigationItem.backBarButtonItem = item
2015-11-08 11:25:54 u014455765 阅读数 4596

// 设置导航栏的背景颜色
self.navigationController.navigationBar.barTintColor = UIColor.redColor()

// 设置导航栏标题的字体颜色(1)
self.navigationController.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white, NSFontAttributeName: UIFont("字体名", ofSize: 15)]

// 设置导航栏标题的字体颜色(2)
设置navigationItem的titleView 通过view中的label属性去改变字体和颜色  self.navigationItem.titleView

// 设置导航栏的按钮图标等的颜色(ToolBar)
self.navigationController.navigationBar.tintColor = UIColor.orangeColor()


2017-08-14 10:34:00 weixin_30563319 阅读数 81

// 重写导航栏返回按钮方法

    func configBackBtn() -> Void {

        // 返回按钮

        let backButton = UIButton(type: .custom)

        // 给按钮设置返回箭头图片

        backButton.setImage(UIImage(named: "NavigationBar_goBack_icon"), 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]

    }

转载于:https://www.cnblogs.com/crazygeek/p/7356466.html

没有更多推荐了,返回首页