barre de navigation rightbaritem bug du bouton d'image iOS 11

Ce code fonctionne correctement dans ios10. j'obtiens mon étiquette et un bouton d'image qui est le profil de photo d'utilisateur, rond circulaire .. ok. mais lors de l'exécution du simulateur xcode 9 ios11 je l'obtiens étiré. le cadre du bouton doit être 32x32, lors de la vérification de la carte SIM et de l'obtention de la vue et en disant à xcode de décrire la vue que j'obtiens en 170x32 ou quelque chose comme ça.

voici mon 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

    }

Raison

Le problème apparaît car à partir d'ios 11 UIBarButtonItemutilise la mise en page automatique au lieu de traiter les cadres.

Solution

Vous devez ajouter une contrainte de largeur pour ce bouton d'image si vous utilisez Xcode 9.

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

PS

buttonn'est pas UIBarButtonItem, il est à l' UIButtonintérieur UIBarButtonItem. Vous ne devez pas définir de contrainte pour UIBarButtonItem, mais pour les éléments à l'intérieur.

Merci à tous pour votre contribution! vous avez raison!. pour xcode9 ios11, vous devez mettre une contrainte.

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

Le code Objective C est désormais obsolète. Mais pour l'utilisateur qui doit créer / maintenir des projets Objective C dans iOS 11, la traduction suivante de Swift (réponse de Karoly Nyisztor) à Objective C est utile.

//  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];

Eh bien, le nouveau barButtonItemutilise la mise en page automatique au lieu de traiter les cadres.

L'image que vous ajoutiez au bouton est plus grande que la taille du bouton lui-même. C'est pourquoi le bouton lui-même a été étiré à la taille de l'image. Vous devez redimensionner l'image pour qu'elle corresponde à la taille du bouton nécessaire, avant de l'ajouter au bouton.

J'ai écrit une petite extension pour définir les contraintes sur les éléments de la barre de navigation:

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))

J'ai fait cela en objectif en utilisant les lignes suivantes:

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;

Merci Bon codage !!

Ce que j'ai fait?

Dans mon application, j'ai ajouté une image de profil sur navigationBar à l'élément rightBarButton. avant iOS 11, il fonctionnait bien et s'affichait correctement, mais une fois mis à jour vers iOS 11, changez de comportement comme coup

J'ai donc ajouté l' UIViewélément du bouton droit et défini UIButtoncomme sous-vue de UIView? Comme ci-dessous,

Et j'ai défini des contraintes de hauteur et de largeur de UIButton.

Et mon problème est résolu. N'oubliez pas de définir UIViewla couleur d'arrière-plan de la couleur claire .

REMARQUE: Si votre bouton ne fonctionne pas, vérifiez que votre UIView'shauteur peut être de 0 ici, vous devez changer la hauteur de 0 à 44 ou ce que vous voulez. Et faites aussi clipToBound = true, maintenant vous pouvez définir la position de votre bouton et cela fonctionnera bien.

Changer le widthAnchor / heightAnchorne fonctionnera que sur les appareils iOS 11+. Pour les appareils iOS 10, vous devez utiliser la méthode classique de modification manuelle des cadres. Le fait est qu'aucune des deux approches ne fonctionne pour les deux versions, vous devez donc absolument alterner par programme en fonction de la version d'exécution, comme ci-dessous:

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
}

Même si iOS 11 utilise Autolayout pour la barre de navigation, il est possible de le faire fonctionner traditionnellement en définissant des cadres. Voici mon code fonctionnant pour ios11 et ios10 ou plus:

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

et voici comment l'élément de barre est composé:

    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

Mettre des contraintes par programme a fonctionné pour moi pour les utilisateurs exécutant iOS 11.X. Cependant, le bouton de la barre était toujours étiré pour les utilisateurs exécutant iOS 10.X.Je suppose que les critiques de l'AppStore exécutaient iOS 11.X et n'ont donc pas pu identifier mon problème, mon application s'est donc préparée pour la vente et a été téléchargée.

Ma solution était de changer simplement les dimensions de mon image en 30x30 dans un autre logiciel (la dimension de l'image précédente était 120x120).

J'ai également eu du succès en implémentant intrinsicContentSizepour renvoyer une taille appropriée pour toute sous-classe UIView personnalisée que j'ai l'intention d'utiliser comme vue personnalisée.

J'ai créé un élément de bouton de barre, puis je l'ai ajouté à la barre de navigation.

    private var addItem: UIBarButtonItem = {
        let addImage = UIImage(named: "add")
        let addButton = UIButton(type: UIButton.ButtonType.custom)
        addButton.setBackgroundImage(addImage, for: UIControl.State())
        addButton.frame = CGRect(x: 0, y: 0, width: (addImage?.size.width)!, height: (addImage?.size.height)!)
        let addItem = UIBarButtonItem(customView: addButton)
        return addItem
    }()

 private var contactsItem: UIBarButtonItem = {
        let contactsImage = UIImage(named: "contacts")
        let contactsButton = UIButton(type: UIButton.ButtonType.custom)
        contactsButton.setBackgroundImage(contactsImage, for: UIControl.State())
        contactsButton.frame = CGRect(x: 0, y: 0, width: (contactsImage?.size.width)!, height: (contactsImage?.size.height)!)
        let contactsItem = UIBarButtonItem(customView: contactsButton)
        return contactsItem
    }()

Dans viewDidLoad ()

let spacerBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.fixedSpace, target: nil, action: nil)
        spacerBarButtonItem.width = 11
        navigationItem.rightBarButtonItems = [addItem, spacerBarButtonItem, contactsItem]

Ici, j'ai l'image de 28x28.