The Complete iOS9 Auto Layout Course

In this lesson , we will use Auto Layout to design a pattern resembling the flag of England.

Lets now visualize the individual components of this pattern. We have:

a. 1 background red rectangle and

b. 4 white rectangles

The white rectangles are of equal width and height

And yes, each white rectangle is pinned to one of the 4 corners of the red rectangle.

And of course there is this equal gap running between the white rectangles that gives us the illusion of a red cross.

We will use a concept called design by intent while creating our layout for this pattern.

In this video we will look at Constraint Priorities

Let’s take an example:

Say we have a button placed at a certain distance from the bottom of the container.

To be more specific, we have set a vertical constraint of 10.

Now I add a similar constraint to the button, setting its vertical distance to 15.

And to confound things a bit more, I set a third constraint, similar in nature , with a vertical distance of 20.

This does not make sense since all 3 constraints cannot be satisfied simultaneously

But what if we could assign priorities to each of these constraints , say, high, medium and low.

In this case the High priority will kick in and not the other 2.

And if for some reason, the high priority constraint is unable to kick in, the MEDIUM priority would take its place and so on. In this lesson we will look at an example that demonstrates constraint priorities

Consider this scenario:

2 labels sit side by side on an App

You have enabled constraints to pin the labels to the sides of the container

Now you rotate your phone into the landscape mode

The labels should stretch to fill the screen right? Do they? If yes, which one or ones?

Let’s take another scenario

You have an image and button one beneath the other on an App

Once again, constraints are enabled to pin the elements to the sides of the container.

And again you rotate the phone into the landscape model.

Something has to compress right? Which element or elements compress?

To get a better sense of these questions, this video will focus on constraint priorities.

In particular we will focus on Content Hugging and Compression Resistance priorities.

Now here is a pretty common scenario

You have a label and you want it positioned at the top left corner of your App

With your current Auto Layout knowledge, that should be simple

Now you pause and think : Should I be setting the width and height of the label?

Well you need not since the label has an intrinsic content size. And so do other elements such as text fields and buttons.

In this lesson we will learn more about this key topic

So by now you should now have a decent idea of what constraints are and how they are used to forge relations between the different views.

In this lesson, we will use most of the concepts learnt in previous videos, in one place, to build a more complex design.A design also having another level of view hierarchy

By building this app we will have a better perspective of constraint hierarchies as well as view relationships.

So far all our lessons have focussed on adding various constraints.

In this lesson we will look at an entity, that while reducing the number of constraints needed, helps us quickly and easily design user interfaces. This entity is the StackView.

As the name suggests, a stack view helps us Stack views both horizontally and vertically.

Our lesson will first demonstrate a single vertical stack view to lay out 2 labels and an image view.

We will then add a text field and a search button to our layout and thus demonstrate a horizontal stack view.

And by the way, we certainly will use constraints. But not as many as you may expect