Add spacing constraint to superview in Xcode 5

Question

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:

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:

And I'm getting this in constraints:

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.

Solution 1

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

Solution 2

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

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

Comments

[AlexR]

Would that work too if you would like to put a constraint between a button in a view and a tab bar below the view (assuming the button`s view is contained in a tab bar controller)?

[Jarig]

If you want to put a constrain between a Button and a Tab Bar you can ctrl-drag in the Document Outline from the Button to the Bottom Layout Guide.

[bugloaf]

Whenever I try to add a "top space to top layout guide" constraint like this, it turns it into a "bottom space to top layout" constraint with a big negative value. Is this an Xcode bug, or am I doing something wrong?

[bugloaf]

Just figured out my own problem. The view was above the layout guide (because it came from iOS 6), so xcode tried to be clever instead of doing what it said it was going to. The solution was to select everything and drag it down below the layout guide, although I was trying to get Xcode to do that automatically.

[Can Poyrazoğlu]

@Jarig I'm having another problem with the IB. I've added an update, I'd be glad if you have a look at it.

[Jarig]

Looks like the Vertical Space constraint between the Table View and the Top Layout Guide doesn't want to be zero or negative. Here is what you can do: 1) Move the Table View down at least 1 point so that it is not directly adjacent to the Top Layout Guide. 2) Set the Vertical Space constraint between the Table View and the Top Layout Guide - it should be from the top now. 3) Move your Table View back to the position that is directly adjacent to the Top Layout Guide. 4) Fix the Vertical Space constraints' value to zero.

[levigroker]

This is especially useful to know since trying to achieve the same results from the contextual menus, or control-dragging never present the option "top space to superview" it's always "top space to top layout guide" (Xcode51DP)

[Michael McGuire]

THANK YOU for this. As mentioned directly above, if your parent view is the view for your view controller, Xcode only seems to want to give the "Top space to Top Layout Guide" which isn't always what you want. Especially when dealing with controls that automatically account for the top layout space.

[Paul Solt]

Thanks for the alternative menu. There's three ways to create constraints and they don't all have parity.

[codercat]

it disable mode what can i do

[codercat]

it is disable on my project what can i do

[MIWMIB]

THANK YOU. I was wasting a lot of my time trying to fix the inset of the tableView. I knew I had to pin the top space to superview. But all other ways were disabled. You saved my night, now I can go to sleep.

[MIWMIB]

@codercat You can try selecting the component first. In my case, it was disabled until I selected UITableView.

[SmileBot]

God damn xcode. Unremitting piece of junk. The edit menu is actually the only place to properly set this unless you do it in code.

[jontelang]

@cocoanut Actually, the little menu (first image in OPs text) works also. You just need to pay attention to the text "NEAREST neighbour").

[cwiggo]

Haha, this is great. Why don't they make this obvious in the documentation, it obviously really speeds up any form of process haha! Brilliant. Thank you for this.