Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
AutoLayout is built on top of a robust algorithm known as the Cassowary linear arithmetic constraint solving algorithm. In this video, let's understand the basic premise of the Cassowary algorithm.

0:00
[MUSIC]

0:04
Layout isn't a simple thing for a computer to solve and

0:07
many people have attempted to solve the problem in different ways.

0:11
Back in 2001, two computer scientists at the University of Washington,

0:15
Greg Badros and Alan Borning, along with Peter Stuckey of the University of

0:20
Melbourne, wrote a paper detailing their approach, and

0:24
called it the Cassowary Linear Arithmetic Constraint Solving Algorithm.

0:29
Cassowary, according to the authors, is an incremental constraint solving toolkit

0:34
that efficiently solves systems of linear equalities and inequalities.

0:39
Does this sound familiar?

0:40
Well it should, because Auto Layout is built on top of the Cassowary algorithm.

0:45
This means that not only is Auto Layout good at solving these relationships

0:49
of linear equalities and inequalities, but it does this in a very efficient and

0:54
rapid manner.

0:55
Perfect for user interfaces.

0:57
Oddly enough, the Cassowary algorithm was developed as a way to augment

1:01
CSS on the web development site.

1:03
But it never really took off.

1:05
Auto layout was introduced in 2012 on iOS and

1:09
is a constraintbased descriptive layout system.

1:13
Much of the system is still based on the original premise of

1:16
the Cassowary algorithm,

1:18
in that the relationships between views can be expressed as linear equations.

1:23
Earlier, we attempted to display views on our screen

1:27
by hardcoding the position using actual coordinate points, or

1:31
as programmers like to call them, magic numbers.

1:33
Because to anyone reading the code, they seem like arbitrary values.

1:37
Rather than specifying the coordinate values,

1:40
we can describe the position of this view in relation to its superView.

1:45
In this case, we can say, we want the view, or

1:47
label, to be centered horizontally in its superView, and

1:52
we want the label to be some distance away from the bottom of its superView.

1:56
Simple descriptions, right?

1:58
We don't care about exact coordinates.

2:00
But we want the view to always be represented in this manner.

2:03
Turns out, using Cassowary, and therefore Auto Layout,

2:06
these descriptions can be easily expressed as linear equations.

2:11
For the first description,

2:12
where we want the label to always be in the horizontal center of the superView, we

2:17
can write an equation that looks something like this at its very basic level.

2:21
Label.centerX = superview.centerX.

2:25
And similarly for

2:26
the second description, we can define a linear equation that looks like this.

2:30
We can see the labels bottom should be equal to the superView's bottom

2:34
minus a certain amount of padding.

2:36
In Auto Layout, these descriptive linear equations are what we call constraints.

2:42
A constraint provides a fluent layout language that allows us to define

2:46
relationships between views in terms of simple linear equations.

2:51
While it might seem like there are many different ways to express these

2:54
view relationships, it actually all boils down to a simple equation.

2:59
The As in this equation refer to view attributes.

3:03
What are attributes?

3:04
Don't worry, we'll get to that.

3:06
If we generically call a view an item, our equation looks like this.

3:11
It would say A1 = (M * A2) +C.

3:13
Constraints are relationships described either between attributes on a view or

3:20
an item or between attributes on two different views.

3:26
So A1 can be an attribute on view one.

3:29
And A2 can be an attribute on view two.

3:32
A2 can also be an attribute on view one itself.

3:35
The next part, M in our equation, refers to a multiplier.

3:39
This allows us to modify the relationship by a certain amount.

3:43
The C in the equation refers to a constant value and

3:47
is used to offset the equation by a certain amount.

3:50
Now people often joke about the fact that the only thing you can change in

3:54
a constraint, once it's created, is this value called constant.

3:58
That is essentially the basic premise underlying Auto Layout,

4:01
the constraint equation.

4:03
Over the next few videos, let's break down each part of this equation

4:06
to understand the different types of constraints that we can write.
You need to sign up for Treehouse in order to download course files.
Sign up