74
votes

I am building an iOS app in Xcode 5, and I'm having trouble adding layout constraints. In Xcode 4.x, I could just add leading/trailing/top/bottom spaces to container (superview) to any UI element. Now, I only have this option:

enter image description here

I want to add a "bottom space to superview" constraint to my text view. It says "spacing to nearest neighbor", but I don't want to create a constraint to "nearest neighbor", I have something else under my text view, and I don't want to create a constraint with that. If there is no other object under my text view, it adds a constraint to the container correctly. But if I try to change anything, everything messes up: I need to move all the views somewhere else, then add the constraint, then add move the other views back. If I add a constraint between the text view and the UI element (a button, in this case), it doesn't work (everything seems correctly: button has a constraint to superview's bottom, and text view has a vertical spacing constraint with the button, and there are no conflicting constraints). The UI elements appear out of screen bounds in different (3.5 inch) screen orientations. Is there a bug with the Interface Builder, or am I missing something? When I could set everything up correctly, my controls still seem out of bounds when I resize the interface builder screens, but display correctly on simulator/device at 3.5 inches. What is the "best practice" of designing the UI with the new Interface Builder constraints in Xcode 5?

UPDATE: I'm having some more trouble in another project with the same thing. I am trying to fix a view's top to the top layout guide exactly by CTRL-dragging my control to where it says "top layout guide", and it is trying to aling the bottom of my control to the layout guide (by about -470 points) instead of alinging the top of my control, which doesn't make any sense as the control should layout itself in variable height screens (e.g. regular and 4-inch iPhone, and the possible other layouts in the future..). Here is a screenshot of what's happening:

enter image description here

And I'm getting this in constraints:

enter image description here

How can I make Interface Builder align the top of the view to the top layout guide?

UPDATE 2: I've found a workaround. I first resize the view to decrease it's height (so the top of it will not overlap or be very close to the top layout guide) and THEN I CTRL+drag it to the top layout guide. It seems to work correctly. After I connect it, I resize my view again to the desired size and select Update Constraints. It works, but it's still not a solution as it requires resizing the view, connecting, resizing again, and updating constraints.

4
Hey there, have the same bug as you when connecting a view to the Top Layout Guide. It confused me a lot at first but found the same workaround as you. Hopefully this will be fixed in future updates…Taum
I hope so.. Sad to see a company who really does care about design to have design errors in their own product that is used for designing core interfaces.Can Poyrazoğlu
This workaround works !Leszek Zarna

4 Answers

94
votes

To add a constraint between a view and its' superview (like "bottom space to superview") you can use the Document Outline (The left part of the Interface Builder).

In the Document Outline:

  1. Hold the ctrl-key and drag from the view to its' superview (or vice versa).
  2. Select the constraints you want to add (in this example "Bottom Space to Container").

ctrl-drag from the view to its' superview (or vice versa)Select the constraints you want to add

48
votes

The answer By Jarig is good but can sometimes lead to unexpected results as noted in the comments.

Another option is to select the child view and go to:

Editor > Pin > Top Space to Superview

or whichever constraint you want.

1
votes

Seems to be a bottom edge constraint now. Select your view and its superview, tap on "Align" and check the "Bottom edges" thingy

pic

0
votes

If you want to add trailing or leading constraints as in Xcode 4 please CTRL-drag from the center of the view to which you want to add the constraint to the left, right, up or down. You will then be presented a window in which you can select the constraint to add (depending on the direction in which you CTRL-dragged).