AutoLayout to save view sizes proportionally

I am trying to achieve the following:

  • I have 2 views in my xib that should remain at a distance of 20 pixels from the edge (on both sides and top).
  • The 2 species that need to be resized do not have the same size.
  • They should be at a distance of 20 pixels.
  • Their width should remain relative to the width of the parent view

I read a tutorial on how to do this and it works, but the problem is that it requires both views to have the same width and the Widths equally output Widths equally , which I don't want.

Here is what I tried:

  • Add a limit of the leading space to the left to 20 pixels.
  • Add a top space limit for viewing left to 20 pixels.
  • Add a top space limit to the right view of up to 20 pixels.
  • Add a tail space limit to the right view of up to 20 pixels.
  • Add a horizontal distance limit for both views to 20 pixels.

The problem I am facing is that the left image does not change, and the right view fills the space in order to maintain a 20-pixel horizontal space.

Is there a way that both species can resize proportionally to the space they need to fill?

Here are screenshots of my layout and limitations:

xib layoutConstraints definitions

Thank!

EDIT

When I try to rotate my device, I get the following warning:

 2012-10-11 08:59:00.435 AutolayoutTest[35672:c07] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>", "<NSLayoutConstraint:0x8a68ad0 H:[UIView:0x8a69430(90)]>", "<NSLayoutConstraint:0x8a6ba40 H:[UIView:0x8a69430]-(20)-[UIView:0x8a6b1d0]>", "<NSLayoutConstraint:0x8a6ba00 H:[UIView:0x8a6b1d0]-(20)-| (Names: '|':UIView:0x8a6b7e0 )>", "<NSLayoutConstraint:0x8a6b940 H:|-(20)-[UIView:0x8a69430] (Names: '|':UIView:0x8a6b7e0 )>", "<NSAutoresizingMaskLayoutConstraint:0x7199aa0 h=--& v=--& V:[UIView:0x8a6b7e0(568)]>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]> 
+47
ios autolayout nslayoutconstraint ios6 interface-builder
Oct 11
source share
9 answers

This can be solved by adding another dummy view ( dummyView ) with its restrictions set to Fixed width, height and aligned to centerX of Superview. Then add a left view and a right view. Limit horizontal distance to dummyView .

enter image description hereenter image description here

+10
Jun 18 '14 at 7:36
source share

Maybe a solution will come to me soon, but it really can be done very easily in IB .

First add a UIView and insert all four edges of the supervisor.

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

Select the UIView and the first view and add the Equal Width constraint. Of course, this will show you an error in positioning in autorun, but this is normal, because that is not all that you want.

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

enter image description here

+75
Oct. 15 '14 at 12:44
source share

I'm new to startup, but stumbled upon your question and thought it would be a good challenge. (This is my warning if this is not an ideal solution!)

You will need to add width limits in the code. I achieved this by first adding two views to the NIB with no width limits. These are the restrictions for the first (left) view:

enter image description here

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

enter image description here

This leaves an additional limitation that you do not want in the second view - the leading space between the supervisor and the second view, as shown below:

enter image description here

You cannot remove this restriction in IB, since it will leave an ambiguous layout (since we have no width in subviews). However, you can remove it in code. First, install a power outlet for it and plug it into IB:

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

Then in your viewDidLoad controller viewDidLoad you can remove it using:

 [self.view removeConstraint:self.view2superviewLeadingConstraint]; 

Finally, add width limits. The key here is the multiplier parameter to determine what percentage you want the width to be based on the width of the supervisor. Also note that you must set the constant parameters to the start / end totals set 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]; 
+10
Oct. 24
source share

Just select the aspect ratio:

enter image description here

+8
Oct 23 '14 at 13:38 on
source share

As already mentioned, the key sets the multiplier to the restriction “The width of the pins is equal to”, so that the width of the representations is a multiple of each other. Xcode 5.1 should add the ability to install this in Interface Builder, but before that you have another option, besides installing it in your code. If you create a "Contact Width Equal" restriction, go to the "Identity Inspector" in the "Utilities" panel on the right, and then find the "User Defined Attributes". Add a new attribute with the key "multiplier", enter "number" and a value equal to the desired ratio.

Multiplier set as a runtime attribute, as described above.

This will not be reflected in Interface Builder, but will apply when using your view.

+6
Mar 01 '14 at 11:14
source share
  • Remove the two width limits in the code or lower their priorities in IB, otherwise you are too limited.
  • Add a constraint to describe the width relationship between the green and blue views in the code:

     // Assuming the ratio you want is green_view_width : blue_view_width = 1 : 2 NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5f constant:0.f]; [commonSuperview addConstraint:c]; 
+1
Apr 19 '13 at 21:48
source share

This is now possible in Xcode 6 with aspect ratio

+1
Oct 15 '14 at 15:52
source share

I'm not sure how familiar you are with auto-layout, so apologize if this is what you already know:

When using automatic layout, you can assign several restrictions to the same property. Under certain circumstances, these restrictions may conflict. This is what triggers the warning you see.

From the screen that you published, it’s clear that you have set several restrictions, for example, your green left view has a restriction that means “Width (90)”, which means that the width should be exactly 90 points.

It is not clear only in the screenshot what your other restrictions are tied to, but what probably happens here is the obvious limitations that cause problems. You have autoresistant constraints that say that views must expand or contract to fit their available area, but those same views have constraints that require them to be exact width.

This can be fixed in several ways - you can either remove these visibility limits in your views or change your priority (by default, the restrictions are “required”, but you can change them as optional).

0
Oct 11
source share

In the Builder interface, drag the view with the right button (just a little to display a black popup).
From the pop-up menu, select Aspect Ratio .

0
Jul 01 '14 at 14:12
source share



All Articles