[MUSIC]

Constraints in code especially when using layout anchors make it very simple to

layout our views.

But it's still often more cumbersome than interface builder because we have to write

out a line of code for every single constraint that we want to add.

And that can quickly add up, even for a very simple way out.

There's one final aspect of auto layout we need to explore

that solves this problem in an interesting way.

This final way we can build constraints is using text based visual strings.

This might sound weird, but Im sure you've seen art work like this at some point.

This is commonly known as ASCII art.

Because it's made from characters defined in the ASCII character standard.

This method of writing constraints is known as a visual format language.

And uses a text string to describe the layout.

Here we have another final empty project, so we can build another simple layout.

Actually, even though you're probably tired of the same example,

we're going to implement the orange, purple and blue view combo but

one last time, so that now we have three different approaches that you can compare.

So, like the last two times, let's go to the view controller, and

we'll start off with some boilerplate code.

So we need three views, let orangeView,

blueView, and a purpleView.

We also need to change their background colors, which we will do in viewDidLoad.

So we use the red, green, blue initializer on UIColor and for

red we're going to say 255/255.0 now this is for the orange view.

Green is 148.

Blue is zero and, that's just zero.

And the float value for alpha is 1.0 as always.

Next we have the purpleVew.

So for red this is 187.

For green, 44.

Blue is 162 and alpha is 1.

And then finally,

we have the blueView.

122 for red, 206 for green.

255 and one.

Okay, remember that whenever we add constraints in code we also need to set

translates auto resizing mask into constraints to false.

So we'll do all of that in the viewDidLoad.

So we'll say orangeView.translates equal false.

And then I'm just going to copy this and change the views.

So that's purple and blue.

And the last thing we need to do for

boilerplate at least, is to add these views as subviews.

So view.addSubview.

OrangeView.

purpleView and blue.

There we go.

Finally we can get started.

Now the first thing we're going to do, and to keep this simple we'll do everything

inside viewDidLoad, the first thing we're going to do is define a dictionary.

Now, this might seem a bit odd, but bear with me.

So we'll call this dictionary views.

And it's going to have a type of String to AnyObject.

The values in this dictionary are going to be the views

that we want to define our constraints on.

The first view we'll be adding constraints to is the orange view.

So the keys in this dictionary will describe the view that is being used

as the value.

So for the orangeView, we'll give a key of orangeView and

the value is the actual instance of UI view, the orangeView.

Now we can use this key orangeView as a string to refer to the actual view.

The benefit of using the visual format language is that we can create several

constraints in a single line of code by writing a sort of visual story.

To write a constraint using a format string we use a method on NS layout

constraint, Constraints with visual format that takes several different arguments.

So, we'll say NSLayoutConstraint.,

because this is a method on the class, constraints with visual format.

The first argument is a format strain.

And for now we're going to pass on an empty strain.

The next parameter, options, describes the attribute and

the direction of layout for all the objects in the visual format string.

We'll touch on this later.

And for now, we're going to put a set of empty brackets in here as an empty set.

The next parameter, named metrics,

takes another dictionary of constants that appears in the visual format string.

We're going to add these at the end so for now we'll just pass nil.

Finally we come to the views argument.

This is where we pass in our dictionary that we created.

So we'll say views.

This allows us to use the key in the format string.

That's this key, orangeView.

In this format string we're about to create to reference the orangeView.

The first constraint we're going to define is the with of the orangeView.

So let's go back to this first argument the format string.

Inside the string write exactly as I do.

So uppercase H colon open bracket then write orangeView,

then open parentheses, 200, and then close the parentheses and close the bracket.

And like that we've define a width constraint on the orangeView.

There's a lot of magic going on here.

So let's parse this string.

The first H and

a colon indicates that this format string specifies a horizontal constraint.

If this were a constraint in the vertical axis, we'd use an uppercase V over here.

If we omit both the H and the V and the colon, so if we did this,

Auto Layout would default to creating constraints in the horizontal direction.

Inside the format string,

after the orientation, we specify a view inside square brackets.

So here we're indicating that we have a constraint that involves the orangeView.

To give the orangeView a with constraint

all that's left to do now is to specify a value in parentheses.

So how does the system know that this is an actual with constraint?

That's because this value is provided in the horizontal axis.

This value inside the parentheses.

If this were a v, this value would be translated into a height constraint.

When we specify orangeView inside the format string, AutoLayout knows which view

we refer to because it uses this string as a key in the views dictionary.

And gets the actual view as a value.

That is the entire purpose of this views dictionary.

The first metric we're using here is the 200 value to specify a width constraint.

200 inside parentheses in a format string isn't a very meaningful description,

so let's improve on this.

To use descriptive names for

constants in the format string we use a metrics dictionary.

So like views this is a string to any object dictionary.

So we'll say string to any object.

And to start we'll pass in an empty dictionary.

Inside, we're going to specify a string that serves as a key for

the constant that we want to specify and a constant for the value.

So will say for example orangeViewWidth and

give it a value a constant value of 200.

Now we can pass in this dictionary as the argument to the metrics parameter.

And use this key instead of a magic number.

So will copy this and paste it here.

Before we move on to specifying more constraints,

we need to add these constraints to the actual view.

Because this method, constraintsWithVisualFormat,

allows us to specify many constraints in a single format string, the return value

on the method is an array of constraints, an array of NSLayoutConstraint.

So we can copy this, or we can pass this method

straight into views addConstraints method that takes an array of constraints.

So we'll view.addConstraints and then we'll pass this right in.

Okay so this was our first horizontal constraint on the orangeView.

There is one more to add in the horizontal direction and

that's the center X constraint on the orangeView.

But unfortunately centering views using the visual format

string method isn't exactly elegant.

So to get around this we're just going to use an anchor solution.

Which shows that we can mix and match different methods of adding constraints.

So right here, I'll say orangeView.centerXAnchor.constraintEqualT-

oAnchor.

And we're going to tie this to the view.centerXAnchor.

Okay, that was a fairly simple example, so let's add a few more.