Mastering Auto Layout with EasyPeasy II: Basics
In this tutorial we will go though the basics of Auto Layout. How to place an UIView, update a constraint and so on, fundamentally cover the entire lifecycle of a NSLayoutConstraint.
Applying the first constraints
The screenshot below shows a blue UIButton within an UIViewController view. Nothing really complicated, 160px width, 50px height and the view aligned to the vertical and horizontal centers of its superview.
In order to do this, we need to apply four EasyPeasy attributes to the view, one per each one of the dimension and position components mentioned before (width, height, centerX and centerY).
The code above can be squashed into a single line, but we will keep this format thorough the tutorials to make it more clear.
The code itself is quite self-explanatory. For example CenterX(0.0) creates a NSLayoutConstraint that aligns the view to the horizontal center of its parent with a constant value of 0.0. For instance, with a constant value of 20.0 the view would be placed with a slight offset of 20 pixels to the right.
That array of Attributes we have created are applied to button with the easy.layout(_:) method.
Nothing really hard to follow, right? At this stage there is just one caveat to keep in mind: position attributes like CenterX or CenterY won’t be applied unless button has already been added to the view hierarchy (this means button.superview != nil).
Compound Attributes
EasyPeasy also provides a set of special attributes to make the code we have just seen even simpler. These attributes are called CompoundAttributes and can create multiple NSLayoutConstraints by instantiating a single attribute. Making use of these attributes, the previous example would look like this:
Check the list of available attributes here.
Updating a constraint
Weird is the case that an UIView remains with the same size and the same position during its life. Historically, to update a NSLayoutConstraint you would need to keep a reference to it to either change its constant value or deactivate it to create a new one. EasyPeasy reduces this task to simply apply a new Attribute, therefore no references are required.
Conflict resolution
This is possible due to EasyPeasy’s ability to resolve constraint conflicts. The reason why with traditional Auto Layout you need to keep a reference is because, for example, two NSLayoutConstraints of the same kind but different constant will conflict leading to a broken UI.
Instead, EasyPeasy handles these cases and automatically deactivates the previously applied attributes.
Back to our example, let’s imagine that upon tapping the blue button we want the component to be placed at the bottom of the screen, as follows:
To achieve that, we just need to apply the new position attribute we are interested in:
As you can see, no deactivation of existing constraints is required. EasyPeasy figured out that because a Bottom attribute conflicts with a CenterY attribute then the previously applied CenterY attribute has to be deactivated.
The method easy.layout(_:) can also apply a single Attribute to a view, therefore the code above can be reduced to the following:
Caveats
Sometimes you need to force the layout of your views to see your changes taking effect, to do so, you must call layoutIfNeeded.
When the constraints you want to update are dimension constraints (like width or height) then you can call the method directly in your view.
Removing constraints
If for some reason we want to clear the attributes we have applied to a view the library provides a method to deactivate and remove them from a given view.
Next
We will create relationships between views and explain how multipliers work.
Mastering Auto Layout with EasyPeasy III: Relationships
