Use the Pin Menu

I rarely use the Pin Menu, since it doesn’t let me think in a visual sense. But if you need to layout something like a calculator interface with lots of buttons, this can save you a ton of clicks.

There are two different menus, so to use these effectively you need to work a bit differently than you would if you were working on one or two views at a time.

Align Menu

The Align button will allow you to set leading edges, or quickly center content within a container.

Add Constraints Menu

The Add Constraints button will allow you to setup spacing between views in addition to size constraints.

Try using the different approaches as you start to master Auto Layout.

Save Time and Click Less When Adding Constraints

When you use the mouse drag techniques described above, Xcode will only show context sensitive constraints. I have never found this very helpful.

Out of habit when I create constraints between UI elements, either adjacent buttons, or to the bounds of a containing view, I always drag in a diagonal direction to avoid missing the “context sensitive” constraints.

Drag diagonally to get more layout constraints

Drag diagonally when you add constraints and you’ll see more options to choose from, this is very handy when I set both the Leading and Top constraints for an image.

This will save you time and mouse clicks, since it will show you all of the constraints.

Document Outline Reduces Clicks

You can avoid the context sensitive menu if you Right Click and Drag to the Document Outline. When you do this technique, it’ll show you all of the available options.

In my opinion Apple should change the context sensitive constraints menu, since it never shows me what I want, when I want it. I always have to do another click and drag to find the constraint that was hidden.

If you want to see how to apply these skills to an actual user design, signup for one of my upcoming Auto Layout workshops.



1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)