如何使用自动布局使 space b/w UIFields 相等？

Question

我是 iOS 自动布局的初学者，我在我的视图控制器上添加了五个标签，所以一切都很好。（这里五个标签的宽高是固定的。）

我的主要要求是如何使五个标签的水平间距相等b/w。我可以设置中间标签和左右角标签，它们很完美。但我不明白如何添加第二个左标签和第二个右标签，以及如何使它们相等 space B/W，就像另一个标签一样？

我的要求和下图完全一样，请帮帮我。

我的代码：

#import "ViewController2.h"

@interface ViewController2 ()
{
    UILabel * left1;
    UILabel * left2;
    UILabel * middle;
    UILabel * right1;
    UILabel * right2;
}

@end

@implementation ViewController2

- (void)viewDidLoad {
    [super viewDidLoad];

    left1 = [[UILabel alloc] init];
    left1.backgroundColor = [UIColor grayColor];
    left1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:left1];

    left2 = [[UILabel alloc] init];
    left2.backgroundColor = [UIColor grayColor];
    left2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:left2];

    middle = [[UILabel alloc] init];
    middle.backgroundColor = [UIColor grayColor];
    middle.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:middle];

    right1 = [[UILabel alloc] init];
    right1.backgroundColor = [UIColor grayColor];
    right1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:right1];

    right2 = [[UILabel alloc] init];
    right2.backgroundColor = [UIColor grayColor];
    right2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:right2];


    //Applying autolayouts for middle lable

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:middle
                                                            attribute:NSLayoutAttributeTop
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:self.view
                                                            attribute:NSLayoutAttributeTop
                                                           multiplier:1.0
                                                             constant:100]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:middle
                                                            attribute:NSLayoutAttributeCenterX
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:self.view
                                                            attribute:NSLayoutAttributeCenterX
                                                           multiplier:1.0
                                                             constant:10]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:middle
                                                            attribute:NSLayoutAttributeHeight
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:nil
                                                            attribute:0
                                                           multiplier:1.0
                                                             constant:50]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:middle
                                                            attribute:NSLayoutAttributeWidth
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:nil
                                                            attribute:0
                                                           multiplier:1.0
                                                             constant:20]];

    //Appying autolayouts for left1 labe1

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:left1
                                                          attribute:NSLayoutAttributeTop
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeTop
                                                         multiplier:1.0
                                                           constant:100]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:left1
                                                          attribute:NSLayoutAttributeLeading
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeLeading
                                                         multiplier:1.0
                                                           constant:10]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:left1
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:0
                                                         multiplier:1.0
                                                           constant:50]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:left1
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:0
                                                         multiplier:1.0
                                                           constant:20]];

    //Appying autolayouts for right1 labe1

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:right1
                                                          attribute:NSLayoutAttributeTop
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeTop
                                                         multiplier:1.0
                                                           constant:100]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:right1
                                                          attribute:NSLayoutAttributeTrailing
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeTrailing
                                                         multiplier:1.0
                                                           constant:-10]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:right1
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:0
                                                         multiplier:1.0
                                                           constant:50]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:right1
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:0
                                                         multiplier:1.0
                                                           constant:20]];


}

@end

Answer 1

这是适合您的步骤（通过 IB）

创建 5 个标签

设置左右标签约束（对于左 - 前导、顶部、宽度、高度；对于右 - 尾随、顶部、宽度和高度）

居中水平中间标签（顶部约束、宽度、高度、水平居中）

这里有一些技巧 - 在左标签和中间标签 + 中间标签和右标签之间添加两个容器视图

此容器的设置约束（前导和尾随约束 + 顶部 + 高度）此容器将根据屏幕尺寸灵活调整

添加约束后它应该看起来像

最后一步-将其他标签放入绿色容器中并设置中间标签的约束（它应该在容器中居中+添加顶部、宽度、高度约束）

所有约束均以左侧大小提供，因此您可以根据需要通过代码轻松重新创建它

希望对您有所帮助

Answer 2

所以我知道您的问题已得到解答，但在 iOS9 中有 UIStackViews 专门针对这种情况 构建。以下是如何使用它们以供将来参考：

Shift + 单击并拖动到 select 所有标签（请注意，您不必调整它们的大小）
单击屏幕右下方的 StackView 按钮
然后 select 您的 StackView 并将 Alignment 设置为 "Fill"，并将 Distribution 设置为 "Equal Spacing"
然后在您的 stackview 仍然 selected 的情况下单击图钉图标，然后将 200 放在顶部，将 10 和 10 放在两侧，将 130 放在高度。然后单击添加 4 个约束。
最后点击三角图标，select更新帧。

瞧！您无需使用垫片即可拥有自己的布局！

如何使用自动布局使 space b/w UIFields 相等？

How to make equal space b/w UIFields using auto-layouts?

objective-c

ios

autolayout

nslayoutconstraint