如何使用自动布局在屏幕中水平和垂直居中 UILabel？

Posted 2023-02-23

【中文标题】如何使用自动布局在屏幕中水平和垂直居中 UILabel？

【英文标题】：How to center UILabel horizontally and vertically in screen using auto layout?

【发布时间】：2015-04-30 19:07:05

【问题描述】：

我已经使用自动布局几天了，我试图在屏幕上垂直和水平地居中 UILabel，但我没有太多运气让标签居中。

我希望实现如下所示，

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

我在 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];

【问题讨论】：

NSLayoutConstraint constraintWithItem:myLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:myLabel.superview attribute:NSLayoutAttributeCenterX multiplier:1.f constant:0.f];对中心 Y 做同样的事情

【参考方案1】：

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

更新：Apple 现在希望您使用 [NSLayoutConstraint activateConstraints:] 和 [NSLayoutConstraint deactivateConstraints:] 而不是使用 [UIView addConstraint:] 和 [UIView removeConstraint:]。

2017 年 8 月 24 日更新：

一个更简单的版本可以使用布局锚来完成：

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

【讨论】：

如果我使用以下行将myLabel 添加到视图层次结构中会有所不同吗，[self.view addSubview:myLabel]; ？

不，它不会，只要您将标签添加为子视图，然后添加约束。否则，label.superview 可能为 nil。