How do I align a view to the top-left side of a window?

Question

When I place a button at the top-left side of the window, it aligns exactly like I would expect:

http://stuf.ro/Button.png

It also doesn't resize along with the window, which is good. If I try to do the same thing with a custom view however, it automatically adds constraints to the bottom and to the right, which makes the view resize along with the window:

http://stuf.ro/View.png

How do I get rid of these? I'd like the view to never resize, and I'd like it to be pinned to the top-left side of the window, just like a button.

If I try to select the constraint and press the Backspace key, nothing happens. The "Delete" option in the edit menu is disabled as well.

Answer 1

Your view resizes because it has constraints saying the space above it, below it, to its left, and to its right should be fixed. These are the lines you can see around your view in the screenshot. The only way to satisfy these constraints as the window resizes is for the view to resize.

You can select the constraint lines to modify or delete them. You might think you could delete the ones below and to the right, and your view will no longer need to resize to satisfy the remaining constraints, but that doesn't work. The view needs a (set of) constraints that specify both size and spacing: having the (automatically created) spacing constraints on either side implies size, but if you got rid of one of them the size would no longer be specified. (This is why you can't get rid of automatically created constraints -- the ones which appear as narrow blue lines in the view and with purple icons in the document outline.)

This isn't a problem for the button because buttons know how to size themselves, and IB knows about how buttons size themselves. IB doesn't know about your custom view, so you have to set up the constraints yourself. With the view selected, choose Editor > Pin > Width to create a width constraint. This both creates a width constraint and turns the existing spacing constraints into user constraints (as opposed to automatic ones) -- they appear as solid lines and have blue icons in the document outline.

Now you can select the spacing constraint on the right and delete it, and your view will keep its width and stick to the left. Repeat for height and space below and your view will stay in the upper left and not resize.

You can read more about the new auto layout system in Apple's guide.