Add spacing constraint to superview in Xcode 5

IosXcodeInterface BuilderAutolayoutXcode5

Ios Problem Overview


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.

Ios Solutions


Solution 1 - Ios

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

Solution 2 - Ios

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.

Solution 3 - Ios

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

pic

Solution 4 - Ios

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCan PoyrazoğluView Question on Stackoverflow
Solution 1 - IosJarigView Answer on Stackoverflow
Solution 2 - IoskballView Answer on Stackoverflow
Solution 3 - IosepolyakovView Answer on Stackoverflow
Solution 4 - IosAlexRView Answer on Stackoverflow