Autolayout在故事板中設置3個方塊

Question

我有下圖中描繪的視圖。我想設置兩個海軍廣場具有相等的高度和寬度，然後灰色的中間欄應該填充剩下的空間。

我在故事板模式嘗試設置這樣了，我不能讓它正常工作。我對汽車佈局非常陌生，並且很喜歡關於如何讓它工作的解釋:)

Answer 1

如果您只是設置藍色視圖以在三面擁抱它們的容器並將它們的高度設置爲相等，則您的佈局不明確。無限多種視圖配置滿足「藍色視圖相同高度，灰色視圖佔據其餘部分」的條件。您需要添加一個附加約束 - 它可以是其中一個藍色視圖的灰色視圖的高度，或者高度或縱橫比（在iOS 8上）。

更新：這裏有一個如何對此進行設置，使用Visual Format Language樣本：

NSDictionary *metrics = @{ @"grayHeight" : @30 }; 
NSDictionary *views = @{ @"topBlue" : topBlueView, 
         @"gray" : grayView, 
         @"bottomBlue" : bottomBlueView }; 

// First, set each view to hug its superview horizontally 
[self.view addConstraints:[NSLayoutConstraints constraintsWithVisualFormat:@"|[topBlue]|" options:0 metrics:nil views:views]]; 
[self.view addConstraints:[NSLayoutConstraints constraintsWithVisualFormat:@"|[gray]|" options:0 metrics:nil views:views]]; 
[self.view addConstraints:[NSLayoutConstraints constraintsWithVisualFormat:@"|[bottomBlue]|" options:0 metrics:nil views:views]]; 

// Then, set the gray view to a fixed height and 
// the blue ones to a variable height 
[self.view addConstraints:[NSLayoutConstraints constraintsWithVisualFormat:@"V:|[topBlue][gray(grayHeight)][bottomBlue]|" options:0 metrics:metrics views:views]]; 

// Finally, set the top and bottom blue views to equal heights 
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:topBlueView 
                 attribute:NSLayoutAttributeHeight 
                 relatedBy:NSLayoutRelationEqual 
                 toItem:bottomBlueView 
                 attribute:NSLayoutRelationHeight 
                multiplier:1 
                 constant:0]]