Search code examples
iosobjective-cautolayout

How to center UILabel horizontally and vertically in screen using auto layout?


I've been using auto layout for a couple of days now, and I am trying to center a UILabel in the screen vertically and horizontally, but I am not having much luck with getting the label centered.

I am hoping to achieve something that looks like the following,

  ---------------
 |               |
 |               |
 |               |
 |               |
 |    Label      |
 |               |
 |               |
 |               |
 |               |
 | SIGNIN   REG  |
  ---------------

I added the following constraints to the UILabel,

NSLayoutConstraint *myLabelConstraintHeight = [NSLayoutConstraint constraintWithItem:myLabel
                                                                          attribute:NSLayoutAttributeHeight
                                                                          relatedBy:NSLayoutRelationEqual toItem:nil
                                                                          attribute:NSLayoutAttributeNotAnAttribute
                                                                         multiplier:1.0f
                                                                           constant:100];

            [myLabel addConstraint:myLabelConstraintHeight];


            NSLayoutConstraint *myLabelConstraintWidth = [NSLayoutConstraint constraintWithItem:myLabel
                                                                                      attribute:NSLayoutAttributeWidth
                                                                                      relatedBy:NSLayoutRelationEqual toItem:nil
                                                                                      attribute:NSLayoutAttributeNotAnAttribute
                                                                                     multiplier:1.0f
                                                                                       constant:100];
            [myLabel addConstraint:myLabelConstraintWidth];

Solution

  • NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:label
                                                               attribute:NSLayoutAttributeCenterX
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:label.superview
                                                               attribute:NSLayoutAttributeCenterX
                                                              multiplier:1.0
                                                                constant:0.0];
    NSLayoutConstraint *centerY = [NSLayoutConstraint constraintWithItem:label
                                                               attribute:NSLayoutAttributeCenterY
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:label.superview
                                                               attribute:NSLayoutAttributeCenterY
                                                              multiplier:1.0
                                                                constant:0.0];
    
    // No longer using [label addConstraints:@[centerX, centerY];
    [NSLayoutConstraint activateConstraints:@[centerX, centerY]];
    

    UPDATE: Apple now wants you to use [NSLayoutConstraint activateConstraints:] and [NSLayoutConstraint deactivateConstraints:] instead of using [UIView addConstraint:] and [UIView removeConstraint:].

    UPDATE 8/24/17:

    A simpler version of this can be done using layout anchors:

    [label.centerXAnchor constraintEqualToAnchor:label.superview.centerXAnchor].active = YES;
    [label.centerYAnchor constraintEqualToAnchor:label.superview.centerYAnchor].active = YES;