Xcode Constraints for newbies (with examples)
I’m Xcode newbie too but this is so easy and fun!
When I started to build my first iOS App I was pretty amazed by design part of that process. I dived into Storyboards and immediately started to have fun along with obvious progress of App growth. I’m noob at Xcode environment but have lot a of experience with website layout building (front end engineering) so I thought I will share how I managed to quickly learn Xcode Constraints and how I built my Auto Layout UI.
Treat Constraints as anchors which sticks to another element/view.
Ctrl — Drag and release from UI element to another element and select desired type of constraint.
Image on the left is showing example how to position Description Label under Today Label. Let’s say I need that position with 10pt distance.
Every element should have two X based and two Y based constraints.
I dragged and select “Vertical Spacing”. My constraint has been created, I can change its values later in Size Inspector. Lets call it Y Constraint. We need X Constraint to complement the requirements.
As seen on the image, we need to stick Description Label to left and right side of the view (our X Constraints). CTRL — drag Description Label to Cell View and select “Leading space to container margin”. Basically we stick our element to the left edge of view. CTRL — drag again and select “Trailing space container margin”. That’s it.
All constraints of selected element resides in Size Inspector Tab.
You can select single constraint and change its values or even whole connection. Just double click on single row.
You see the -10.000000 value ? Yes, that is the distance between those elements.
Examples & common solutions
Here are basic constraints configurations for most common UI problems.
Rows centered horizontally
CTRL — Drag first row to the top of view and select “Vertical spacing to top layout guide”. Drag again and select “Leading space to container margin” and again selecting “Trailing space to container margin”. You’ve got X Constraints (left and right )and one Y Constraint (top). To complement requirements add second Y Constraint — height. Drag and drop on element itself and select “Height”. Done.
Side by side columns (one fixed width, second auto)
CTRL — Drag blue element to left edge of view and select “Leading space to container margin”. Drag again to top of the view and select “Vertical spacing to top layout guide”. Set the width of this element by dragging onto itself and selecting “Width”. Grab second, grey element and drag to top of the view and select “Vertical spacing to top layout guide” (You can also drag to blue element and select “Equal heights”). Drag again to right edge of the view and select “Trailing space to container margin”. Now drag for the last time to blue element and select “Horizontal spacing”.
Side by side columns (auto width)
In this case we create layout that scales automatically based on its contents. You need some another element inside that fills given element (I use Label as seen in image). So based on the Label element size (text size) the view will stretch itself.
First of all click on Label element and click on little button at the bottom of Xcode window and set all four constraints by clicking on red dotted lines in scheme (look at screenshot below):
Then CTRL — Drag blue element (with Label inside) to left edge of the view and select “Leading space to container margin”, then drag again to top edge of view and select “Vertical spacing to top layout guide”. Then set a height by dragging onto self and selecting “Height”. Grab second, grey element and drag to top of the view and select “Vertical spacing to top layout guide”, drag again to right edge of view and select “Trailing space to container margin”. Set a “Height” as before. Finishing, drag grey element on blue element and select “Horizontal spacing”. Done.
Hope You learn something ❤