如何使用自动布局制作相同的空间b / w UIField？

Question

我是iOS自动布局的初学者，我在视图控制器上添加了五个标签，所以对于每件事情都可以。 （这里五个标签的宽度和高度是不变的。）

我的主要要求是如何使五个标签的水平间距相等。我可以设置中间标签和左右角标签，它们是完美的。但我不明白如何添加第二个左右第二个标签，以及如何制作相同的空格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）

1. 创建5个标签



1. 设置左右标签约束（左 - 前，上，宽，高;右 - 尾，上，宽高）



1. 中心水平中间标签（顶部约束，宽度，高度，中心水平）



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



1. 此容器的设置约束（前导和尾随约束+顶部+高度）此容器将根据屏幕大小灵活设置



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



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

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



希望这有帮助

Answer 2

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

1. 按住Shift并单击并拖动以选择所有标签（请注意，您不必调整尺寸）

2. 单击屏幕右下方的StackView按钮

3. 然后选择您的StackView并将对齐设置为＆＃34;填充＆＃34;和分配到＆＃34;等间距＆＃34;

4. 然后在您的堆栈视图仍处于选中状态时，单击图钉图标，将200放在顶部，将10和10放在两侧，将130放置在高度上。然后单击添加4个约束。

5. 最后点击三角形图标，然后选择更新框架。

瞧！无需使用垫片即可获得布局！