74

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.

Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389
  • 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 Nov 07 '13 at 21:24
  • 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 Nov 08 '13 at 01:03
  • This workaround works ! – Leszek Zarna Feb 09 '14 at 21:17

4 Answers4

94

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

Jarig
  • 1,087
  • 7
  • 7
  • 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)? – AlexR Sep 23 '13 at 19:11
  • 1
    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. – Jarig Sep 23 '13 at 19:21
  • 4
    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 Oct 01 '13 at 02:45
  • 3
    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. – bugloaf Oct 01 '13 at 02:53
  • @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. – Can Poyrazoğlu Oct 15 '13 at 19:03
  • 3
    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. – Jarig Oct 17 '13 at 11:13
  • 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. – cwiggo Feb 26 '15 at 12:24
48

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.

kball
  • 4,923
  • 3
  • 29
  • 31
  • 7
    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) – levigroker Dec 04 '13 at 04:53
  • 7
    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. – Michael McGuire Jan 20 '14 at 20:11
  • Thanks for the alternative menu. There's three ways to create constraints and they don't all have parity. – Paul Solt Feb 10 '14 at 13:51
  • it is disable on my project what can i do – codercat Feb 11 '14 at 08:18
  • 1
    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 Apr 08 '14 at 14:44
  • @codercat You can try selecting the component first. In my case, it was disabled until I selected UITableView. – MIWMIB Apr 08 '14 at 14:46
  • 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. – SmileBot Aug 04 '14 at 15:33
  • @cocoanut Actually, the little menu (first image in OPs text) works also. You just need to pay attention to the text "NEAREST neighbour"). – jontelang Oct 13 '14 at 05:05
1

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

pic

Community
  • 1
  • 1
epolyakov
  • 75
  • 1
  • 4
0

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

AlexR
  • 5,514
  • 9
  • 75
  • 130