AutoLayout to keep view sizes proportional

Solution 1:

I'm probably late in coming up with a solution but this can actually be made very easily in IB.

First, add a UIView and pin in to all four edges of the superview.

Then, Add your first subview and position it accordingly (ig : x = 0, y = 0, height = fixed height, width = The width you would like relative to the UIView we pinned to all four edges).

Select both the UIView and the first subview and add an Equal Widths constraint. Of course, this will show you an error in positioning in the autolayout, but that's OK because this is not (yet) what you want.

Now comes the trick : select the Equal Widths constraint and edit the Multiplier to be the ratio you want (eg : 1:4 if you want the first subview to be 1/4 of the UIView). Repeat steps for the second subview and Tadaaaaaa !

Solution 2:

This can be resolved by adding one more dummy view(dummyView) with its constraints set to Fixed width, height and aligned to centerX of Superview.Then add left view and right view Horizontal spacing constraint to dummyView.

Solution 3:

I'm new to autolayout but came across your question and thought it would be a good challenge. (That's my caveat in case this isn't the ideal solution!)

You'll need to add the width constraints in code. I achieved this by firstly adding the two views in the NIB without width constraints. These are the constraints for the first (left) view:

These are the constraints I had for the second (right) view:

This leaves an extra constraint you don't want on the second view - leading space between superview and the second view as shown below:

You can't remove that constraint in IB as it would leave an ambiguous layout (as we don't have widths on the subviews). However you can remove it in code. Firstly, set up an outlet for it and connect it in IB:

@property (nonatomic, strong) IBOutlet NSLayoutConstraint *view2superviewLeadingConstraint;

Then, in your view controller's viewDidLoad, you can remove it using:

[self.view removeConstraint:self.view2superviewLeadingConstraint];

Finally, add the width constraints. The key here is the multiplier parameter to dicate what percentage you want the widths to be based on the superview width. Also note that you have to set the constant parameters to equal the leading/trailing totals set up in IB:

NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.3 constant:-20];
[self.view addConstraint:constraint1];

NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.7 constant:-40];
[self.view addConstraint:constraint2];

Solution 4:

Just select the aspect ratio :

Solution 5:

As others have mentioned, the key is setting a multiplier on the "Pin Widths Equally" constraint so that the views widths end up being a multiple of each other. XCode 5.1 should add the ability to set this in Interface Builder, but until then you've got another option besides setting it in code. If you create the "Pin Widths Equally" constraint, then go to the Identity Inspector in the Utilities Panel on the right, then look for "User Defined Runtime Attributes". Add a new attribute with key path "multiplier", type "number", and value equal to your desired ratio.

This won't be reflected in Interface Builder, but will apply when your view is used.