最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【基本解决】iOS11中导航栏的返回按钮靠右偏移很多

iOS crifan 4069浏览 0评论

之前的代码,在iOS11之前是正常的

但是升级了iOS11后,导航栏上的返回按钮,距离左边边框的距离,大了很多,很难看:

ios11 navi button

ios11 navigation button offset

ios11 导航栏按钮偏移

iOS11 导航栏按钮位置问题的解决 – CSDN博客

iOS11NavigationItem偏移,iOS11适配问题,iOS11导航栏返回偏移,iOS11BarButtonItem偏移,Xcode9遇见的问题 – zhaotao0617的博客 – CSDN博客

iOS11导航栏自定义按钮偏移问题 – guo4114的博客 – CSDN博客

ios11导航栏按钮的问题 | iOS开发 – CocoaChina CocoaChina_让移动开发更简单

iOS 11 – UIBarButtonItem horizontal position | Apple Developer Forums

swift – navigation bar rightbaritem image-button bug iOS 11 – Stack Overflow

swift – Adjust position of bar button item when using large titles with iOS 11 – Stack Overflow

ios11 – iOS 11 UINavigationBar bar button items alignment – Stack Overflow

objective c – How to handle iOS 11 Navigation BarButtonItems bug? – Stack Overflow

ios11 – Custom back indicator image and iOS 11 – Stack Overflow

ios 11 navi fixedSpace offset

How to handle iOS 11 Navigation BarButtonItems bug?

先去搞清楚,如何判断api版本,ios的版本:

【已解决】如何在swift中判断iOS版本

ios11 UIBarButtonItem custom view

iOS11和Xcode9踩坑记录 | HY‘s Blog

UIBarButtonItem Sizing in iOS 11

【总结】

最后用custom的button,设置了imageEdgeInsets,基本上满足了需求。

代码:

        let backImage = UIImage(named: “navi_back”)!
        var backNaviBtnItem = UIBarButtonItem()
        if #available(iOS 11, *) {
            let paddingLeftWidth = 0 – backImage.size.width //-22
//            let paddingLeftWidth = NaviBarTitlePaddingLeft
            let customBackButton = UIButton(type: .custom)
            customBackButton.setImage(backImage, for: UIControlState.normal)
            customBackButton.addTarget(self, action: #selector(self.naviBackButtonPressed(_:)), for: UIControlEvents.touchUpInside)
            customBackButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: paddingLeftWidth, bottom: 0, right: 0)
            backNaviBtnItem = UIBarButtonItem(customView: customBackButton)
            
            //for debug
            customBackButton.backgroundColor = UIColor.blue
        } else {
            backNaviBtnItem = UIBarButtonItem(
                image: backImage,
                style: UIBarButtonItemStyle.plain,
                //target: SingletonRootNC(),
                //target: nil,
                target: self,
                action: #selector(self.naviBackButtonPressed(_:))
            )
        }
                if #available(iOS 11, *) {
                    curVC.navigationItem.setLeftBarButtonItems([backNaviBtnItem], animated: true)
                } else {
                    curVC.navigationItem.setLeftBarButtonItems([getReducedBtnItem(), backNaviBtnItem], animated: true)
                }

基本上达到了想要的效果:

但是此处有个小缺点:

button的点击响应区域只存在于蓝色区域,而返回按钮对应的左边超过蓝色区域外的部分,其实是无法点击的。所以如果用户按照小于号的最左边,则会出现偶尔点击没反应的感觉。

所以其实只算是,界面上看起来效果一致了,但是点击区域有一点点不完美。

去试试:

iOS 11 – UIBarButtonItem horizontal position | Apple Developer Forums

提到的:setContentEdgeInsets

代码设置了:

customBackButton.translatesAutoresizingMaskIntoConstraints = false

但是debug输出却还是true:

(lldb) po customBackButton.translatesAutoresizingMaskIntoConstraints

true

然后代码,同样的位移:

//            customBackButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: paddingLeftWidth, bottom: 0, right: 0)
            customBackButton.translatesAutoresizingMaskIntoConstraints = false
            customBackButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: paddingLeftWidth, bottom: 0, right: 0)
            backNaviBtnItem = UIBarButtonItem(customView: customBackButton)
            
            //for debug
            customBackButton.backgroundColor = UIColor.blue

结果左移的更狠了:

并且诡异的是:背景色都没了。。。

估计是通过contentEdgeInsets导致内容移动了整个图片的宽度,所以看不到背景色了。。。

所以去左移-11(而不是之前宽度-22):

//            let paddingLeftWidth = 0 – backImage.size.width //-22
            let paddingLeftWidth = NaviBarTitlePaddingLeft //-11
            let customBackButton = UIButton(type: .custom)
            customBackButton.setImage(backImage, for: UIControlState.normal)
            customBackButton.addTarget(self, action: #selector(self.naviBackButtonPressed(_:)), for: UIControlEvents.touchUpInside)
//            customBackButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: paddingLeftWidth, bottom: 0, right: 0)
            customBackButton.translatesAutoresizingMaskIntoConstraints = false
            customBackButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: paddingLeftWidth, bottom: 0, right: 0)
            backNaviBtnItem = UIBarButtonItem(customView: customBackButton)
            
            //for debug
            customBackButton.backgroundColor = UIColor.blue

则效果是:

蓝色区域只有一半了。

再去用:

//            let paddingLeftWidth = 0 – backImage.size.width //-22
            let paddingLeftWidth = NaviBarTitlePaddingLeft //-11
            let customBackButton = UIButton(type: .custom)
            customBackButton.setImage(backImage, for: UIControlState.normal)
            customBackButton.addTarget(self, action: #selector(self.naviBackButtonPressed(_:)), for: UIControlEvents.touchUpInside)
//            customBackButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: paddingLeftWidth, bottom: 0, right: 0)
            customBackButton.translatesAutoresizingMaskIntoConstraints = false
//            customBackButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: paddingLeftWidth, bottom: 0, right: 0)
            customBackButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: paddingLeftWidth, bottom: 0, right: 0 – paddingLeftWidth)
            backNaviBtnItem = UIBarButtonItem(customView: customBackButton)
            
            //for debug
            customBackButton.backgroundColor = UIColor.blue

效果:

和之前现象一样

-》所以貌似没法彻底解决这个问题。

抽空继续研究。

转载请注明:在路上 » 【基本解决】iOS11中导航栏的返回按钮靠右偏移很多

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.177 seconds, using 22.09MB memory