High again in one of our previous lessons you spoke of how to make utterly out constraints in Interface
Builder.
In this last century going through the same thing but you're going to do it entirely programmatically.
And there are a lot of reasons why you might want to do with programmatic.
Namely because there are a lot of situations where the outlets are not drawn on the Interface Builder
you end up building the outlets as you go along dynamically.
Let's say you have a number of majors that are being read from some database and you want to post all
of them.
You are not sure how many of them are going to be there.
So you have to essentially write something like a for loop that fetches all of your images and then
applies all of them to your interface.
So you need to know how to do things programmatically more often than we do things in Interface Builder.
So let's go ahead to exclude and here I'm going I start a new app as usual.
It's called it or it's only in coding.
Everything stays the same as always.
So here in my view controller I'm going to have only one outlet.
I'm going to vote on I think constrains to that of one outlet on the that out when I make you my view.
So I'm going to say let us call it the red box as I usually call it.
It's you I view and that is a I view with a frame.
And here's the thing.
Whenever you are doing things that you're doing them inside coding it really helps if you set a CGI
record of zero.
That helps your other developers to know anyone who works on your code to know that this is going to
be set using constraints.
Because if it doesn't have any frame it simply means it's not going to be drawn is going to be a zero
space rectangle for it.
So for us I'm going up with a seizure like zero so anyone else who reads the code is going to know that
hey this is going to be set using constraints.
So that's the bomb.
And I knew that the first thing of course I need to do is sort of you are view I need to out of my red
box there so my view is either in the red box with a chart then that is a very particular instruction
that we have to use and that's called translate to resizing maps into constraints.
And you have to set this too far.
I would explain to you what it means.
So there are two situations.
Either you have made your views a using Interface Builder which is what you have been doing until this
point or you have made them using coding.
And if you have made your objects using coding it will automatically start adding constraints to it
based on the size of it.
Remember that if this wasn't Jurich zero you would have something like this.
I'm going to make a temporary value so let them be CGI records of some values in here and then based
on those values the machine would automatically add some constraints for you would say you have put
the extra 20 and Y to be hundred and then have to be 200 on a height of 200.
For instance the numbers of just you know are throwing in there based on those we'll try to add constraints.
And I'm saying don't do that because I'm going to manually add the constraints myself.
Now if you're your objects or your out this are made using clothing by default the value is true.
So by default these auto resizing is happening unless you explicitly say no because you're going to
make the constraints manually.
Now the other side of it is if you make your outlets in Interface Builder which the default value will
be false simply because the interface field assumes you're going to add constraints manually in there.
So keep that in mind that whenever you make objects you have to set this value to force.
I know I kind of made complicated by saying that there is interface when there are it is coding.
You can keep it like you can always make this false if you want to add things because it either is false
and you're just making it false Once again or it is not false and you have to make it worse.
So that's that.
OK so now we have that you have told the machine we're going to add constraints and I'm going out.
My very first thing and that's going to be my red.
I'm going to say that say height constraint or height I'm sure I'm going to say constrain it to the
very easiest one of all is adding a constant value.
When I say give me a height of 200.
So all that is doing is saying well there is a higher STEINKUEHLER that's going to be 200.
If you want to have a visual representation of that I'm going to do it and other temporary thing in
here real quick.
So if I had you I view and my view was
this would be equivalent of doing is control dragging and saying height and then going to my dimensions
and saying height is 200.
That would be the same thing.
So I'm not going to do that hitting the interface builder I worked with programmatic.
So we got that and I think I had forgotten something crucial or red box God I want to color is you.
I color dot the red so we can actually see.
So that was the easiest of constraint.
I think constant thing that is constant for what I want it to are that other constrain that is based
on something else something that we have been doing so often.
So here I'm going to go in here and say let's have another constraint and I'm going to say let's let's
call it that red X.
That's going to become my red box dot or X anchor.
I'm going to say crusting yourself to equal to and evaluate you it is the center of my view.
So it's going to be self that if you do not center X and curve that may make this a little bit broader
so you can see everything.
So I made a new kind of strength and that is going to be cross-training.
I read the boxes center X to self-view center X and then very important I have to say red X dot is active.
I have to say this constant is actually currently active or function and do the same thing for the Y.
I'm going to say red white becomes red box the center Y anchor dot constrained.
And I want I can stand it to self to view not view that go of view the center.
Why anchor.
And of course then again I'm going to go ahead and say red light is active and that is through as well.
OK so so far we have managed to set our height Aha said its center in terms of x and y and the one thing
we are still missing.
If you wanted to make sure this thing actually shows up is setting a a bit I'm careful and forced to
think about anchoring when I should do it a slightly different B simply because I want to show you how
other things work.
So I'm going to say let's get with constraint with Konst.
I'm trying to save up space because I know it's going to be a very very long year.
So let's lay out constraints and this is essentially initialising constraint This is like the father
of all constraints is is every single bit of information you can add into it.
I'm adding it so it's going to be.
What is the item you are trying to constrain.
What's the that you're saying.
What's the relation to which I am What's the good you're trying to constrain What's the multiplier in
there and what's the Konstantinov if there isn't one.
So let's go ahead and write all of these down and then say the item is obviously red box that's there's
no question about it are really you they want to set it off this guy.
So he's going to be in this layout constraint that attribute that to it.
So bear with me for a second as I try to get myself a little bit more space.
I'm going to call this w OK and maybe it gets you to the other side.
OK.
So now we can actually see everything nice and clean so that I actually keep that name.
So the video kind of thing and then and it's now constant red box art is a tribute to it.
And then he's going to say what is the relation.
So there is going to be and it's Lay constrained.
Dutch relations got equality and then I've got the I'D them actually I'm not going to come to any items.
I'm going to set it to nil.
And then attribute of the other item I'm going to call it to be a normal tribute.
And then the multiplier is going to be one and I Konstantinov who is going to be on one hundred and
fifty.
So essentially I'm saying produce and it's less constrained for red box that takes this.
That makes it equal to one hundred fifty.
I'm not saying to somebody else and I'm not using that that's from somebody else and I'm not multiplying
that value by any numbers.
I'm just saying whatever it is hundred fifty used That's value.
And then I could go ahead and say red box that kind of strains or bad things and then we have two different
types of constrained the one is the one I'm using right now.
And the You also have red marks that constraints prove your form which allows you to add an array of
const things.
So if I want to try out multiple ones I would just put all of them within an array something like that.
You know the first one and the next one the next one so on and so forth.
For now I only have one so I'm only going to use the other singular mode.
But if you want it you could use the plural form as well.
So that's about that.
We made ourselves a red view or red box and that red box doesn't have a frame and instead everything
in it is being declared using constrains.
Now for that kind of stance I have to constrain the height of which apparently forgot to activate it
is active is true.
That's my bad.
And then I had an X envoy and care for it.
Whenever you are adding constraints like this like saying red box or anything off center X anchor constrained
to whatever.
You could either separately put them in a different variable and then activate it or you could just
drop the value but all together like this and then say he's active and there are merits for doing both
of these methods sometimes you want to have access to red white for instance later on you want to animate
it or change it depending on something and sometimes you don't really care about you just want it to
be to be active at all times so it's actually good I made most of these so you can have a look at both
of them.
And then we finally made a conscious thing which we added as a kind of strange.
Whenever you add kind of sense you don't need to really activate them because when you add them they
are active boy by default.
So let's go ahead and run this.
And once my simulator loads up will be able to see a box in the center of the scene.
It's got a vet of one hundred and fifty.
The height of 200 I center is at the center of the view.
So that was a quick introduction to adding Konstanz you'll see more of these when we do more apps.
You will end up doing some programmatic constraints at the end of the day on as much as you can.
You have to try and get away in the interface when there but then there will be times that you need
to do constraints.
And yeah I assume the next lesson.