如何使用自動布局使等距黑白UIFields？

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個標簽

2. 設置左右標簽約束（左-前導，頂部，寬度，高度；右-尾隨，頂部，寬度高度）

3. 水平居中居中標簽（頂部約束，寬度，高度，水平居中居中）

4. 這是一些技巧-在左側和中間標簽+中間標簽和右側標簽之間添加兩個容器視圖

5. 此容器的設置約束（前，后約束+頂部+高度）此容器將靈活設置，具體取決於屏幕尺寸

添加約束后，它看起來應該像

6. 最后一步-將其他標簽放到綠色容器中，並設置與中間標簽相同的約束條件（應將其置於容器的中心+添加頂部，寬度，高度約束）

所有約束均以左側尺寸提供，因此您可以根據需要通過代碼輕松地重新創建它

希望這可以幫助

Answer 2

因此，我知道您的問題已得到回答，但是在iOS9中，有專門針對這種情況構建的 UIStackViews。 以下是如何使用它們以備將來參考：

1. 按住Shift並單擊並拖動以選擇所有標簽（請注意，您不必調整它們的大小）

2. 單擊屏幕右下方的StackView按鈕

3. 然后選擇您的StackView並將Alignment設置為“ Fill”，並將Distribution設置為“ Equal Spacing”

4. 然后，在仍然選擇堆棧視圖的情況下，單擊圖釘圖標，並在頂部放置200，在側面放置10和10，在高度放置130。 然后單擊添加4個約束。

5. 最后，單擊三角形圖標，然后選擇更新框架。

瞧！ 您無需使用墊片即可進行布局！