Search code examples
iosinterface-builderios6autolayoutnslayoutconstraint

AutoLayout to keep view sizes proportional


I'm trying to achieve the following:

  • I have 2 views in my xib that need to stay 20 pixels off the edge (both sides and top)
  • The 2 views that need to resize aren't the same size
  • They have to be 20 pixels apart
  • Their width needs to stay relative to the width of the parent view

I read a tutorial about doing just that and it works but the problem with it is that it requires both views to have the same width and pin Widths equally, which I don't want.

Here's what I tried:

  • Add leading space constraint to left view to be 20 pixels
  • Add top space constraint to left view to be 20 pixels
  • Add top space constraint to right view to be 20 pixels
  • Add tailing space constraint to right view to be 20 pixels
  • Add horizontal spacing constraint to both views to be 20 pixels

The problem I'm running into is that the left view doesn't resize and the right view fills out the space to keep the 20 pixels horizontal space.

Is there a way I can get both views to resize proportionally to the space they should be filling?

Here are the screenshots of my layout and constraints:

xib LayoutConstraints definitions

Thanks!

EDIT

I get the following warning when I try to rotate my device:

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

Solution

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

    enter image description here enter image description here