AutoLayout Overview

Layout

The two most common way's to layout views is .xib files and storyboard.

To make the UI adaptive in the available space we have two options. The first one, is the old mechanism called struts and springs. You should only need it if you have to support older versions of iOS. Working with struts and springs made the easy tasks very easy, but the tough ones, were almost impossible. Something more powerful was needed, and that’s why autolayout was created.

What's Under The Hood

AutoLayout is a system for finding the best possible outcome for the UI based on a set of constraints. This is dynamic programing in a nutshell. AutoLayout is actually based on a C++ library for dynamic programming, called Cassowary.

Four Way Of Using AutoLayout

• Swift Code (NSLayoutConstraint) - by creating instances of constraints and adding them a view
• Visual Formats Code - in some ways this is like using a micro language different than swift that you insert into string and then feed those to views
• Creating constraints in Interface Builder - this is exactly the same as the first option but using a graphical interface. This is usually a last resource.
• UIStackView - this is the bread and butter and is the easiest to use.

UIStackViews

A stack view is a view that does not display anything by itself. Instead it organizes the views it contains. It uses AutoLayout under the hood but you will not have to mess with constraints.

You can arrange stack views in either horizontal or vertical orientation. By combining stack views together you can create almost any view layout you might need.

Intrinsic Content Size

This is the usual size of a view and depends on the content. i.e. a button with a really long label will have a much large intrinsic content size that and button with a label equal to "the". You will never modify the intrinsic content size of a view except by changing its content.

StackView's rely on intrinsic size of objects

Compression Resistance

This is how much the view will resist being squeezed by the surrounding views when the available space decreases.

Content Hugging

This is the opposite of compression resistance. This is a value that represents the ability to refuse taking more space when the available view space increases.

Axis

Makes the stack view arrange the contains view vertically or horizontally. This can be changes at runtime and can also be animated.

Spacing

Refers to the horizontal or vertical space between the arranged views. The spacing property takes precedence over the view's intrinsic content size. If there is not enough space available AutoLayout will shrink the view rather that shrink the spacing.

The spacing value can be negative which will cause the views to overlap.

Distribution

This property allows you to control the way the views are displayed along the axis of the stack view.

There are two groups of distribution algorithms. Ones that try to preserve the size of the views and those that try to preserve the spacing of the views.

• Equal Spacing - does it's best not to change the intrinsic size of a view. It will distribute the views along the axis with an equal spacing between them. If there is not enough space to do this it will reduce the size of the views staring with the one that has the lowest compression resistance. If all the views have the same compression resistance value it will shrink the first one form the left

• Equal Centering - similar to Equal Spacing but instead of measuring the separation from the edges of the views, it measures them from their sizes.

• Fill Equally - Divides all the available space in equal chunks among the views. It will change the intrinsic content size if it has to

• Fill Proportionally - If the size of the views does not match the available space, it will change the size of the views but will do so with the compression resistance and content hugging values in mind. This can be tweaked as to what view gets modified by changing the compression resistance and hugging priority on the view.

• Fill (default) - This is similar to Fill Proportionally, but when it comes to changing a view's size it will show preference in that it will always try to change the first view.

Alignment

This controls how the views expand perpendicularly to the axis.

In a horizontal stack view it determines how the view will take up vertical space. There are three options, top, middle, and bottom.

In a vertical stack view it determines how the view will take up horizontal space. There are three options, left, center, and right.

Text Based views are aligned on the baseline.

Placing UIElements In A UIStackView

If you click-drag select the elements and click the stack view button in the bottom right of the storyboard screen the elements will be automatically placed in a stack view based on where the elements lie on the screen with the intrinsic size preserved.

In this example the first and last element are anchored to the left and the right side and both are resized to their intrinsic size. The remaining elements are distributed according to their distribution algorithm and the spacing properties.

Principles And Commandments

Anatomy Of A Constraint

A constraint is a relationship between two properties plus a priority.

Y = ax + b

leadingMarginStakView = leadingSpaceView * multiplier + constant

Constant - Apple recommends that the Constant value be set to "Standard".

Priority - how important it is to fulfill this relationship requirement. 1000 is a must

Storyboard View Options

Clicking on the "View as" will allow you to preview your UI on different devices and orientation

StackView Manipulation

If we have two UIElements inside a StackView with constraints set on the leadingMargin and top then add a trailingMargin constraint the value that gets set on the trailingMargin property is equal to the current distance from the StackView edge to the right margin.

To adjust this we need to set the Constant to 0 which matches the leading constraint.

In this case the stack view chose to stretch the text field rather than the label. While both UIElements have the same compression resistance values, the text field has a slightly lower content hugging value so the stack view will chose to stretch text field.

A higher content hugging means a view is more "stubborn" about its size.

Show What AutoLayout Is Doing With Margin

Show Layout Rectangles
Show Involved Views For Selected Constrains

Both of these options will give you a better idea of where views lie on the screen.