How do I create a constraints based view that resizes between iPhone 5 and iPhone 4 comparable to Anchor operation? How do I create a constraints based view that resizes between iPhone 5 and iPhone 4 comparable to Anchor operation? xcode xcode

How do I create a constraints based view that resizes between iPhone 5 and iPhone 4 comparable to Anchor operation?


The key to editing constraints in interface builder is never to drag and drop anything once you've added it to the view. Move and arrange things by editing the constraints instead. Use the pinning menu to create new constraints. You can delete unwanted constraints once you've added sufficient new ones to unambiguously replace the automatically added system constraints.

In your case I created the following constraints:

enter image description here

I renamed your views "Green" and "Magenta" to make things clearer in the document navigator. What I have done is:

  • Pin the vertical spacing between the views
  • Pinned each view to the left and right sides
  • Pinned the top view to a set height and a set distance from the top of the superview
  • Pinned the bottom of the bottom view to the bottom of the superview.

This gives you the layout you want, I think. I have written in excruciating detail about this here, if you want to read more.


This is the answer if you don't want to turn off the new iOS6 Auto Layout mode.

If the view mode for the top level view and all the sub-level views is Scale to Fill, you use the anchor mode "less than or equal" in this case, because you can't delete this constraint. The two colored views are not stored in the nib as having a size (width,height) or position (top left corner) instead they are stored with constraints representing their layout. The layout "less than or equal" instead of "equal" can be accessed by clicking on the upper square, then four constraint lines appear, select the bottom one which goes from the lower edge of the control you've selected to the bottom of the view, and change the type from Equal to Less than or Equal.

enter image description here

If the view mode is NOT Scale to fill, other constraint changes would be required. This multi-faceted design is more flexible than the old "springs and struts" but is not exactly as simple to learn.

The more obvious mode you could use is to get a constraint in between two objects. Why this is so difficult (sometimes I can do this and sometimes i can't) I still don't know.

Here's a sample when I was able to get a constraint to appear between two objects instead of from that object to its parent view, but this situation, were I able to always get Interface Builder to co-operate would be a far more intuitive way of creating a situation where the top square is not anchored to the whole view's height:

enter image description here

If the upper color view has an anchor to the view below it, this absolutely means that the reverse constraint cannot be against the same view, or else an ambiguity or "circular reasoning" situation would exist. Thus, we can have A depend on B, but not B simultaneously depend on A. So in that case, the constraint is switched to depend on the absolute height or width of the view. In this particular case that I have found, considerable trial and error seems to be required to recreate what could previously have been done incredibly intuitively before it was improved.

Finally, I find that the instructions above will appear to not work when you end up with extra constraints, which get magically added when you least expect them. Very subtly, you should see two lines instead of one, like this:

enter image description here

I am able to get Interface Builder to keep adding more and more duplicate constraints just by changing a constraint from Equals to Less than or Equal. I believe that's a bug in interface builder in XCode 4.6, and since layout contraints are a relatively new part of CococaTouch, I'm not surprised that the Interface builder support for auto-creating constraints as you drag and move items around, is buggy.