CODEWITHSUNDEEP
iosautolayout
Aziz
Aziz

Reputation: 1614

Autolayout setup 3 squares into storyboard

I have the view as portrayed in the image below. I want to setup the two navy squares to have equal heights and widths and then the grey middle bar should fill in the rest of the space.

enter image description here

I have tried setting this up in the storyboard model and I can not get it to work correctly. I am very new to auto layout and would love an explanation about how to get this to work :)

Upvotes: 0

Views: 81

Answers (1)

Zev Eisenberg
Zev Eisenberg

Reputation: 8148

If you just set the blue views to hug their containers on three sides and set their heights equal, you have ambiguous layout. There are infinitely many configurations of the views that satisfy the conditions "the blue views are equal heights and the gray view takes up the rest". You need to add an additional constraint - it could be the height of the gray view, or the height or aspect ratio (on iOS 8) of one of the blue views.

Update: here’s a sample of how you might set this up, using the 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]]

Upvotes: 2

Related Questions