UIStoryboard autolayout issues with constraints

Question

very simple (I hope) autolayout problem that I'm banging my head against my iMac over.

I have this in portrait

enter image description here

And this is what happens in landscape.

enter image description here

All I want is for the labels to spread out like they would if you weren't using autolayout. What constraints do I add to evenly space them out?

possible duplicate of [Autolayout Even Spacing](http://stackoverflow.com/questions/13075415/autolayout-even-spacing) — jrturton, Oct 25 '12 at 21:15
If you don't want or need auto layout, turn it off - file inspector in the storyboard, uncheck use auto layout. — jrturton, Oct 25 '12 at 21:16
Can I do that for one View Controller in a Storyboard? And I don't want to turn it off, I want to learn how to correct this. — W Dyson, Oct 25 '12 at 21:39
You can only turn it off for the whole file. As explained in the link, even spacing like this can (IMO) only be achieved by laying your view out in code. If you had variable button widths (or all equal widths) and standard spacing between them, you could do it in storyboard. — jrturton, Oct 26 '12 at 07:06

score 2 · Accepted Answer · answered Apr 09 '13 at 19:40

There is a solution that is somewhat simpler and also more flexible than that of @sust86:

Introduce empty views that serve as springs between the labels.
Connect all adjacent views with constant distance constraints.
Connect one of the new spring-views with all of the other spring views with equal width constraints.
Remove any unneeded constraints.

For me the constraints then look similar to this:

enter image description here

This configuration has the advantage that you do not need to fix any spacings when the width of your labels (buttons in my case) change.

score 1 · Answer 2 · answered Oct 25 '12 at 21:43

1

Using the new constrains in iOS 6 is tricky. There is a good 2 part tutorial on ray's web site related to auto layout in iOS 6. Although it is explaining how to anchor the image holders in auto layout but the principles has helped me understand the whole auto layout. Hope this helps you too. Herer is the link: http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2 Adrian

answered Oct 25 '12 at 21:43

Adrian P

6,479
4
38
55

It's a good tutorial but I didn't see anything in there that directly relates to the question. – W Dyson Oct 26 '12 at 00:59

score 1 · Answer 3 · answered Jan 24 '13 at 05:41

Try this:

#define moneyLabelWidth 20
@property (nonatomic, strong) UILabel* moneyOneLabel;
@property (nonatomic, strong) UILabel* moneyTwoLabel;
@property (nonatomic, strong) UILabel* moneyThreeLabel;
@property (nonatomic, strong) UILabel* moneyFourLabel;
@property (nonatomic, strong) UILabel* moneyFiveLabel;
@property (nonatomic, strong) UILabel* moneySixLabel;
...
[self.view addSubview:moneyOneLabe];
[self.view addSubview:moneyTwoLabe];

moneyOneLabel.translatesAutoresizingMaskIntoConstraints = NO;
moneyTwoLabel.translatesAutoresizingMaskIntoConstraints = NO
etc
...


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_moneyOneLabel(moneyLabelWidth)]-[_moneyTwoLabel(moneyLabelWidth)]-[_moneyThreeLabel(moneyLabelWidth)]-[_moneyFourLabel(moneyLabelWidth)]-[_moneyFiveLabel(moneyLabelWidth)]-[_moneySixLabel(moneyLabelWidth)]-|"
                                                                  options:0
                                                                  metrics:@{@"moneyLabelWidth":@(moneyLabelWidth)}
                                                                    views:NSDictionaryOfVariableBindings(_moneyOneLabel, _moneyTwoLabel, _moneyThreeLabel, _moneyFourLabel, _moneyFiveLabel, moneySixLabel)]];
/*add vertical constraints*/

The above constrainsWithVisualFormat basically says from the left edge to the right edge horizontaly draw the 6 money labels, all with a width of 20, with variable widths in between them all. I haven't run this code, but I think it will work (or at least be close).

score 1 · Answer 4 · edited May 23 '17 at 10:34

The easiest way is to use 2 constraints between each of the views. One with Greater Than or Equal and one with Less Then or Equal. The minimum size (Greater Then or Equal) should be the spacing in portrait mode. The maximum size (Lesser Then or Equal) should be the spacing in landscape mode.

It's the same solution as i provided to this question:

Using Auto Layout to change spaces equally on resizing

UIStoryboard autolayout issues with constraints

4 Answers4