使用約束以編程方式布局多個視圖

Question

如何使用Objective-C中的約束以編程方式創建2 x 2的UIView網格？

例如，根據下圖，我有四個UIView，其名稱對應於它們的行/列位置（oneOne，oneTwo，twoOne，twoTwo）。

這是我當前正在使用的代碼：

-(void)buildGrid {

    [self.view setTranslatesAutoresizingMaskIntoConstraints:NO];

    UIView *oneOne = [UIView new];
    [oneOne setBackgroundColor:[UIColor redColor]];
    [oneOne setTranslatesAutoresizingMaskIntoConstraints:NO];

    UIView *oneTwo = [UIView new];
    [oneTwo setBackgroundColor:[UIColor greenColor]];
    [oneTwo setTranslatesAutoresizingMaskIntoConstraints:NO];

    UIView *twoOne = [UIView new];
    [twoOne setBackgroundColor:[UIColor blueColor]];
    [twoOne setTranslatesAutoresizingMaskIntoConstraints:NO];

    UIView *twoTwo = [UIView new];
    [twoTwo setBackgroundColor:[UIColor purpleColor]];
    [twoTwo setTranslatesAutoresizingMaskIntoConstraints:NO];

    [self.view addSubview:oneOne];
    [self.view addSubview:oneTwo];
    [self.view addSubview:twoOne];
    [self.view addSubview:twoTwo];

    NSDictionary *viewsDict = NSDictionaryOfVariableBindings(oneOne, oneTwo, twoOne, twoTwo);



    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[oneOne]-10-[twoOne]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:viewsDict]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[oneOne]-10-[twoOne]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:viewsDict]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[oneTwo]-10-[twoTwo]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:viewsDict]];


    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[twoOne]-10-[twoTwo]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:viewsDict]];

}

我已經看了幾本教程，但是（到目前為止）都沒有描述如何創建這種“網格”布局，它們比UIViews的一個“列”要簡單得多，但是當我有更多的“列”時，我會得到關於能夠保持約束：

Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.

如果我使四個UIView下降或橫穿屏幕，則此代碼可以正常工作，但如果我將其制成2 x 2，則此代碼不能正常工作。我在做什么錯？

更新資料

根據公認的答案，約束應為：

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[oneOne]-10-[twoOne(==oneOne)]-10-|"
                                                                  options:0
                                                                  metrics:nil
                                                                    views:viewsDict]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[oneTwo]-10-[twoTwo(==oneTwo)]-10-|"
                                                                  options:0
                                                                  metrics:nil
                                                                    views:viewsDict]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[oneOne]-10-[oneTwo(==oneOne)]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:viewsDict]];


    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[twoOne]-10-[twoTwo(==twoOne)]-10-|"
                                                                  options:0
                                                                  metrics:nil
                                                                    views:viewsDict]];

Answer 1

首先，您在第二個約束中有錯誤。 它應該是：

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[oneOne]-10-[oneTwo]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:viewsDict]];

同樣，您的布局仍然不包含有關子視圖大小（寬度和高度）的任何信息。 您必須添加這樣的約束（以偽代碼）

 oneOne.width = oneTwo.width = twoOne.width = twoTwo.width
 oneOne.height = oneTwo.height = twoOne.height = twoTwo.height