导航栏 rightbaritem 图像按钮错误 iOS 11

navigation bar rightbaritem image-button bug iOS 11

提问by lorenzo gonzalez

This code works ok in ios10. i get my label and an image button which is the user photo profile, circular round.. ok. but when running xcode 9 ios11 simulator i get it streched out. the button frame has to be 32x32 , when checking on the sim and getting the view and telling xcode to describe the view i get output as 170x32 or somethint like that.

此代码在 ios10 中运行正常。我得到了我的标签和一个图像按钮，它是用户照片配置文件，圆形圆形.. 好的。但是当运行 xcode 9 ios11 模拟器时，我得到了它。按钮框架必须是 32x32 ，当检查 sim 并获取视图并告诉 xcode 描述视图时，我得到的输出为 170x32 或类似的东西。

heres my code.

继承人我的代码。

let labelbutton = UIButton( type: .system)
    labelbutton.addTarget(self, action:#selector(self.toLogin(_:)), for: .touchUpInside)
    labelbutton.setTitleColor(UIColor.white, for: .normal)
    labelbutton.contentHorizontalAlignment = .right
    labelbutton.titleLabel?.font = UIFont.systemFont(ofSize: 18.00)



    let button = UIButton(type: .custom)
     button.addTarget(self, action:#selector(self.toLogin(_:)), for: .touchUpInside)
     button.frame = CGRect(x: 0, y: 0, width: 32, height: 32)
     button.setTitleColor(UIColor.white, for: .normal)
     button.setTitleColor(UIColor.white, for: .highlighted)


    var buttomItem : UIBarButtonItem = UIBarButtonItem()
    buttomItem.customView = button
    buttomItem.target = self
    buttomItem.action = "ToLogin"

    var labelItem : UIBarButtonItem = UIBarButtonItem()
    labelItem.customView = labelbutton
    labelItem.target = self
    labelItem.action = "ToLogin"


    if let user = PFUser.current() {
        print("LOGIN : checkiando si existe usuario ")
            labelbutton.setTitle(USERNAME, for: UIControlState.normal)
            labelbutton.sizeToFit()

        if(user["profile_photo_url"] != nil) {
            print(" ENCONTRO PROFILE PHOTO URL NOT NIL Y ES \(user["profile_photo_url"])")
            let photoURL = user["profile_photo_url"] as! String
            let a = LoginService.sharedInstance
            a.downloadImage(url: photoURL, complete: { (complete) in

                if (complete) {

                    button.setImage(LoginService.sharedInstance.profile_photo! , for: UIControlState.normal)

                    button.layer.cornerRadius = 0.5 * button.bounds.size.width
                   // button.imageView!.contentMode = .scaleAspectFit
                   // button.imageView!.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
                    //button.imageView!.contentMode = .scaleAspectFit
                    //button.imageView!.clipsToBounds = true
                    //button.imageView!.layer.cornerRadius = 60
                    button.clipsToBounds = true
                    self.NavigationItem.rightBarButtonItems = [buttomItem,labelItem]
                }


            })
        } else {
                self.NavigationItem.rightBarButtonItem = labelItem

        }
            print(" EL FRAME DEL BUTTON ES \(button.frame)")

    } else {

        labelbutton.setTitle("Login", for: UIControlState.normal)
        labelbutton.sizeToFit()
        self.NavigationItem.rightBarButtonItem = labelItem

    }

回答by Vlad Khambir

Reason

原因

The problem appears because from ios 11 UIBarButtonItemuses autolayout instead of dealing with frames.

出现问题是因为从 ios 11 开始UIBarButtonItem使用自动布局而不是处理帧。

Solution

解决方案

You should add width constraint for this image-button if you use Xcode 9.

如果您使用 Xcode 9，您应该为此图像按钮添加宽度约束。

 button.widthAnchor.constraint(equalToConstant: 32.0).isActive = true
 button.heightAnchor.constraint(equalToConstant: 32.0).isActive = true

PS

聚苯乙烯

buttonis not UIBarButtonItem, it is UIButtoninside UIBarButtonItem. You should set constraint not for UIBarButtonItem, but for elements inside it.

button不是UIBarButtonItem，它在UIButton里面UIBarButtonItem。您不应为 设置约束UIBarButtonItem，而应为其中的元素设置约束。

回答by lorenzo gonzalez

Thanks all for contributing! you guys are right!. for xcode9 ios11 you need to put a constraint.

感谢大家的贡献！你们是对的！。对于 xcode9 ios11，您需要设置约束。

 let widthConstraint = button.widthAnchor.constraint(equalToConstant: 32)
 let heightConstraint = button.heightAnchor.constraint(equalToConstant: 32)
 heightConstraint.isActive = true
 widthConstraint.isActive = true

回答by Ahmad Farrag

Well, The new barButtonItemuses autolayout instead of dealing with frames.

好吧，新的barButtonItem使用自动布局而不是处理帧。

The image you were adding to the button is larger than the button size itself. That's why the button itself got stretched to the image's size. You have to resize the image to match the needed button's size, before adding it to the button.

您添加到按钮的图像大于按钮本身的尺寸。这就是按钮本身被拉伸到图像大小的原因。在将图像添加到按钮之前，您必须调整图像大小以匹配所需按钮的大小。

回答by SHS

Objective C code is obsolete now. But for the user who has to build/maintain Objective C projects in iOS 11 has following translation from Swift ( Karoly Nyisztor answer ) to Objective C helpful.

Objective C 代码现在已经过时了。但是对于必须在 iOS 11 中构建/维护 Objective C 项目的用户来说，从 Swift（Karoly Nyisztor 的回答）到 Objective C 的以下翻译很有帮助。

//  UIView+Navbar.h

#import <UIKit/UIKit.h>

@interface UIView (Navbar)

- (void)applyNavBarConstraints:(CGFloat)width height:(CGFloat)height;

@end

//----------

//  UIView+Navbar.m

#import "UIView+Navbar.h"

@implementation UIView (Navbar)

- (void)applyNavBarConstraints:(CGFloat)width height:(CGFloat)height
{
    if (width == 0 || height == 0) {
        return;
    }

    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:height];
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:width];
    [heightConstraint setActive:TRUE];
    [widthConstraint setActive:TRUE];
}

//----------

// Usage :-
[button applyNavBarConstraints:33 height:33];

回答by Karoly Nyisztor

I wrote a tiny extension for setting the constraints on navbar items:

我写了一个小扩展来设置导航栏项目的约束：

import UIKit

extension UIView {
    func applyNavBarConstraints(size: (width: CGFloat, height: CGFloat)) {
    let widthConstraint = self.widthAnchor.constraint(equalToConstant: size.width)
    let heightConstraint = self.heightAnchor.constraint(equalToConstant: size.height)
    heightConstraint.isActive = true
    widthConstraint.isActive = true
  }
}

// Usage
button.applyNavBarConstraints(size: (width: 33, height: 33))

回答by Aleem

I done this in objective using following lines:

我使用以下几行客观地做到了这一点：

NSLayoutConstraint * widthConstraint = [customButton.widthAnchor constraintEqualToConstant:40];
NSLayoutConstraint * HeightConstraint =[customButton.heightAnchor constraintEqualToConstant:40];
[widthConstraint setActive:YES];
[HeightConstraint setActive:YES];

UIBarButtonItem* customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];
self.navigationItem.leftBarButtonItem = customBarButtonItem;

Thanks Happy coding!!

谢谢 快乐编码！！

回答by iPatel

What I Did?

我做了什么？

In my app, I added profile image on navigationBar at rightBarButton item. before iOS 11 it was working good and display properly but when updated to iOS 11 then change behaviour like blow

在我的应用程序中，我在导航栏的 rightBarButton 项目上添加了个人资料图片。在 iOS 11 之前，它运行良好并且显示正常，但是当更新到 iOS 11 时，它会改变行为，例如打击

So I added UIViewin right button item and set UIButtonas subview of UIView? Like below,

所以我添加UIView了右键项目并设置UIButton为UIView? 像下面，

And I set height and width constraints of UIButton.

我设置了UIButton.

And my problem is solved. Don't forget to set UIView's background color as clearcolor.

我的问题解决了。不要忘记将UIView的背景颜色设置为清晰的颜色。

NOTE:If your button will not work then check your UIView'sheight might be its 0here you should change height 0to 44or whatever you want. And also do clipToBound = true, Now you can set your button's position and It will be work well.

注意：如果您的按钮不起作用，请检查您的UIView's高度是否为0，您应该将高度0更改为44或任何您想要的。也做clipToBound = true，现在你可以设置按钮的位置，它会很好地工作。

回答by Malloc

Changing the widthAnchor/heightAnchorwill only work on iOS 11+ devices. For iOS 10 devices you need to go the classical way of manually changing the frames. The thing is that none of the two approaches work for both versions, so you absolutely need to programmatically alternate depending on the runtime version, like below:

更改widthAnchor/heightAnchor仅适用于 iOS 11+ 设备。对于 iOS 10 设备，您需要采用手动更改帧的经典方式。问题是这两种方法都不适用于两个版本，因此您绝对需要根据运行时版本以编程方式交替，如下所示：

if #available(iOS 11.0, *)
{
   button.widthAnchor.constraint(equalToConstant: 32.0).isActive = true
   button.heightAnchor.constraint(equalToConstant: 32.0).isActive = true
}else
{
   var frame = button.frame
   frame.size.width = 32.0
   frame.size.height = 32.0
   button.frame = frame
}

回答by Leszek Zarna

Even though iOS 11 uses Autolayout for navigation bar it's possible to make it working traditionally setting frames. Here is my code working for ios11 and ios10 or older:

即使 iOS 11 使用 Autolayout 作为导航栏，它也可以使其以传统方式设置框架。这是我适用于 ios11 和 ios10 或更早版本的代码：

func barItemWithView(view: UIView, rect: CGRect) -> UIBarButtonItem {
    let container = UIView(frame: rect)
    container.addSubview(view)
    view.frame = rect
    return UIBarButtonItem(customView: container)
}

and here is how bar item is composed:

这是酒吧项目的组成方式：

    let btn = UIButton()
    btn.setImage(image.withRenderingMode(.alwaysTemplate), for: .normal)
    btn.tintColor = tint
    btn.imageView?.contentMode = .scaleAspectFit
    let barItem = barItemWithView(view: btn, rect: CGRect(x: 0, y: 0, width: 22, height: 22))
    return barItem

回答by Erik Nguyen

Putting constraints programmatically worked for me for users running iOS 11.X. However, the bar button was still stretched for users running iOS 10.X.I guess the AppStore reviewers was running iOS 11.X thus couldn't identify my problem so my app got ready for sale and uploaded..

对于运行 iOS 11.X 的用户，以编程方式放置约束对我有用。但是，对于运行 iOS 10.X 的用户来说，条形按钮仍然被拉伸。我猜 AppStore 的评论者运行的是 iOS 11.X，因此无法确定我的问题，所以我的应用程序准备出售并上传..

My solution was to simply change my image's dimensions to 30x30 in another software (previous image dimension was 120x120).

我的解决方案是在另一个软件中简单地将我的图像尺寸更改为 30x30（以前的图像尺寸为 120x120）。