CODEWITHSUNDEEP
objective-cxcodeconstraintsuistoryboardautolayout
W Dyson
W Dyson

Reputation: 4634

UIStoryboard autolayout issues with constraints

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?

Upvotes: 0

Views: 1369

Answers (4)

ilmiacs
ilmiacs

Reputation: 2576

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

  1. Introduce empty views that serve as springs between the labels.
  2. Connect all adjacent views with constant distance constraints.
  3. Connect one of the new spring-views with all of the other spring views with equal width constraints.
  4. 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.

Upvotes: 2

sust86
sust86

Reputation: 1870

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

Upvotes: 1

Robert Wagstaff
Robert Wagstaff

Reputation: 2674

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).

Upvotes: 1

Adrian P
Adrian P

Reputation: 6529

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

Upvotes: 1

Related Questions