web-dev-qa-db-fra.com

Ajouter par programme des contraintes CenterX / CenterY

J'ai un UITableViewController qui n'affiche aucune section s'il n'y a rien à afficher. J'ai ajouté une étiquette pour indiquer à l'utilisateur qu'il n'y a rien à afficher avec ce code:

label = UILabel(frame: CGRectMake(20, 20, 250, 100))
label.text = "Nothing to show"
self.tableView.addSubview(label)

Mais maintenant, je veux que ce soit centré horizontalement et verticalement. Normalement, je choisirais les deux options mises en évidence (plus celles de la hauteur et de la largeur) dans la capture d'écran:

enter image description here

J'ai essayé le code suivant pour ajouter les contraintes, mais l'application se bloque avec une erreur:

label = UILabel(frame: CGRectMake(20, 20, 250, 100))
label.text = "Nothing to show"

let xConstraint = NSLayoutConstraint(item: label, attribute: .CenterX, relatedBy: .Equal, toItem: self.tableView, attribute: .CenterX, multiplier: 1, constant: 0)
let yConstraint = NSLayoutConstraint(item: label, attribute: .CenterY, relatedBy: .Equal, toItem: self.tableView, attribute: .CenterY, multiplier: 1, constant: 0)

label.addConstraint(xConstraint)
label.addConstraint(yConstraint)

erreur:

When added to a view, the constraint's items must be descendants of that view (or the view itself). This will crash if the constraint needs to be resolved before the view hierarchy is assembled. Break on -[UIView _viewHierarchyUnpreparedForConstraint:] to debug.
2014-12-23 08:17:36.755 [982:227877] *** Assertion failure in -[UILabel _layoutEngine_didAddLayoutConstraint:roundingAdjustment:mutuallyExclusiveConstraints:], /SourceCache/UIKit/UIKit-3318.16.21/NSLayoutConstraint_UIKitAdditions.m:560

L'étiquette doit toujours se centrer horizontalement et verticalement, car l'application prend en charge la rotation de l'appareil.

Qu'est-ce que je fais mal? Comment ajouter ces contraintes avec succès?

Merci!

iosxcodeswiftautolayoutnslayoutconstraint
66
Mario A Guzman

Mise à jour pour Swift 3/Swift 4:

Depuis iOS 8, vous pouvez et devez activer vos contraintes en définissant leur propriété isActive sur true. Cela permet aux contraintes de s’ajouter aux vues appropriées. Vous pouvez activer plusieurs contraintes à la fois en passant un tableau contenant les contraintes à NSLayoutConstraint.activate()

let label = UILabel(frame: CGRect.zero)
label.text = "Nothing to show"
label.textAlignment = .center
label.backgroundColor = .red  // Set background color to see if label is centered
label.translatesAutoresizingMaskIntoConstraints = false
self.tableView.addSubview(label)

let widthConstraint = NSLayoutConstraint(item: label, attribute: .width, relatedBy: .equal,
                                         toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 250)

let heightConstraint = NSLayoutConstraint(item: label, attribute: .height, relatedBy: .equal,
                                          toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100)

let xConstraint = NSLayoutConstraint(item: label, attribute: .centerX, relatedBy: .equal, toItem: self.tableView, attribute: .centerX, multiplier: 1, constant: 0)

let yConstraint = NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal, toItem: self.tableView, attribute: .centerY, multiplier: 1, constant: 0)

NSLayoutConstraint.activate([widthConstraint, heightConstraint, xConstraint, yConstraint])

Meilleure solution:

Depuis que cette question a été résolue à l'origine, des ancres de présentation ont été introduites, facilitant ainsi la création des contraintes. Dans cet exemple, je crée les contraintes et les active immédiatement:

label.widthAnchor.constraint(equalToConstant: 250).isActive = true
label.heightAnchor.constraint(equalToConstant: 100).isActive = true
label.centerXAnchor.constraint(equalTo: self.tableView.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: self.tableView.centerYAnchor).isActive = true

ou la même chose en utilisant NSLayoutConstraint.activate():

NSLayoutConstraint.activate([
    label.widthAnchor.constraint(equalToConstant: 250),
    label.heightAnchor.constraint(equalToConstant: 100),
    label.centerXAnchor.constraint(equalTo: self.tableView.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: self.tableView.centerYAnchor)
])

Remarque: ajoutez toujours vos sous-vues à la hiérarchie des vues avant de créer et d'activer les contraintes.

Réponse originale:

Les contraintes font référence à self.tableView. Puisque vous ajoutez l'étiquette en tant que sous-vue de self.tableView, Les contraintes doivent être ajoutées à "l'ancêtre commun":

   self.tableView.addConstraint(xConstraint)
   self.tableView.addConstraint(yConstraint)

Comme @mustafa et @kcstricks l'ont souligné dans les commentaires, vous devez définir label.translatesAutoresizingMaskIntoConstraints Sur false. Dans ce cas, vous devez également spécifier les paramètres width et height de l’étiquette avec contraintes, car le cadre n’est plus utilisé. Enfin, vous devez également définir textAlignment sur .Center Afin que votre texte soit centré dans votre étiquette.

    var  label = UILabel(frame: CGRectZero)
    label.text = "Nothing to show"
    label.textAlignment = .Center
    label.backgroundColor = UIColor.redColor()  // Set background color to see if label is centered
    label.translatesAutoresizingMaskIntoConstraints = false
    self.tableView.addSubview(label)

    let widthConstraint = NSLayoutConstraint(item: label, attribute: .Width, relatedBy: .Equal,
        toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 250)
    label.addConstraint(widthConstraint)

    let heightConstraint = NSLayoutConstraint(item: label, attribute: .Height, relatedBy: .Equal,
        toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 100)
    label.addConstraint(heightConstraint)

    let xConstraint = NSLayoutConstraint(item: label, attribute: .CenterX, relatedBy: .Equal, toItem: self.tableView, attribute: .CenterX, multiplier: 1, constant: 0)

    let yConstraint = NSLayoutConstraint(item: label, attribute: .CenterY, relatedBy: .Equal, toItem: self.tableView, attribute: .CenterY, multiplier: 1, constant: 0)

    self.tableView.addConstraint(xConstraint)
    self.tableView.addConstraint(yConstraint)
129
vacawama

Centre en conteneur

enter image description here

Le code ci-dessous fait la même chose que centrer dans Interface Builder.

override func viewDidLoad() {
    super.viewDidLoad()

    // set up the view
    let myView = UIView()
    myView.backgroundColor = UIColor.blue
    myView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(myView)

    // Add code for one of the constraint methods below
    // ...
}

Méthode 1: Style d'ancrage 

myView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
myView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

Méthode 2: Style NSLayoutConstraint 

NSLayoutConstraint(item: myView, attribute: NSLayoutConstraint.Attribute.centerX, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerX, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: myView, attribute: NSLayoutConstraint.Attribute.centerY, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerY, multiplier: 1, constant: 0).isActive = true

Remarques

  • Le style d'ancrage est la méthode préférée par rapport à NSLayoutConstraint Style. Toutefois, il est uniquement disponible à partir d'iOS 9. Par conséquent, si vous prenez iOS 8 en charge, vous devez toujours utiliser NSLayoutConstraint Style.
  • Vous devrez également ajouter des contraintes de longueur et de largeur.
  • Ma réponse complète est ici .
32
Suragch

L'équivalent d'ObjectiveC est:

    myView.translatesAutoresizingMaskIntoConstraints = NO;

    [[myView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor] setActive:YES];

    [[myView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor] setActive:YES];
10
Paul Gee

Par programme, vous pouvez le faire en ajoutant les contraintes suivantes.

NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self  
                                                                      attribute:NSLayoutAttributeCenterX 
                                                                      relatedBy:NSLayoutRelationEqual 
                                                                         toItem:self.superview 
                                                                      attribute:attribute 
                                                                     multiplier:1.0f 
                                                                       constant:0.0f];

NSLayoutConstraint *constraintVertical = [NSLayoutConstraint constraintWithItem:self
                                                                        attribute:NSLayoutAttributeCenterY 
                                                                        relatedBy:NSLayoutRelationEqual
                                                                           toItem:self.superview 
                                                                        attribute:attribute 
                                                                       multiplier:1.0f
                                                                         constant:0.0f];
8
YaBoiSandeep

Si vous ne vous souciez pas de cette question concernant spécifiquement une table, et que vous souhaitez simplement centrer une vue sur une autre, voici comment procéder:

    let horizontalConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: parentView, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
    parentView.addConstraint(horizontalConstraint)

    let verticalConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: parentView, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)
    parentView.addConstraint(verticalConstraint)
1
Adam Kalnas

Dans Swift 5, cela ressemble à ceci:

label.translatesAutoresizingMaskIntoConstraints = false
label.centerXAnchor.constraint(equalTo: vc.view.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: vc.view.centerYAnchor).isActive = true
0
PiKey

Une solution pour moi était de créer un UILabel et de l'ajouter au UIButton en tant que sous-vue. Enfin, j'ai ajouté une contrainte pour la centrer sur le bouton.

UILabel * myTextLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 75, 75)];
myTextLabel.text = @"Some Text";
myTextLabel.translatesAutoresizingMaskIntoConstraints = false;

[myButton addSubView:myTextLabel];

// Add Constraints
[[myTextLabel centerYAnchor] constraintEqualToAnchor:myButton.centerYAnchor].active = true;
[[myTextLabel centerXAnchor] constraintEqualToAnchor:myButton.centerXAnchor].active = true;
0
coletrain