So I come back in this lesson.
You have to essentially rebuild a you toy that I have provided you with an Interface Builder.
Imagine this is an exercise of your working with a designer and they have come up with the design for
the interface of your app and you have to essentially implement that inside an actual application.
So the design that you have received is this one which is a very simple you know log in and sign an
interface.
It has a two different options for what the user would like to do whether they want to log in or register.
That's obviously a segmented control.
Then there is an email field and a password field.
Assuming they are on the log in most days they forgot your password by then there is a little show characters
by then out there that you can press they can see the password they're entering.
And of course there is an actual log in button or if you're pressed on the register they would go to
the other side of it.
But for now we're not really getting worried about that.
We're only going to deal with the log inside of it.
So take your time try to do it entirely in Interface Builder.
And I'm going to pause the video for a few seconds and then I'm going to get a song that I need on my
own as the
OK.
So I'm going to go to school then get started with this project as well.
I'm going to call it like you or I
and it might like you or at the moment I go to a storyboard I'm actually going to do a little trick
and that is I'm going to add a new View Controller.
View Controller of and it adds my image to this project.
So this particular reference that you have I'm going to add it to the project.
Copy it.
Why not.
And then I'm going to add a large UI image view to this dummy View Controller.
The one I'm not going to use for anything.
And then I'm going to go ahead and say that is going to have my image so I can actually see everything
right next to where I'm trying to design this not only helps me with threats fencing it also helps me
with the colors and everything else something to keep in mind is that this little bar on the top it's
actually a part of the you eye navigation controller and it gets built essentially automatically.
But for the sake of our exercise I'm going to make it manually.
So I'm going to say Give me a new I view added here.
And the height for it is exactly 44 pixels.
And I'm going to say Give me a background color custom color an eyedropper gets from here.
So that part is taken off that next thing is I'm going to have to add a little text up there.
So that's a label and that label I'm going to place it up there.
It is in white color and it does say sign me in.
Now the next thing that you want to know is or you want to do is you want to make sure that everything
you know has proper constraints.
So we set the height has to be always 44.
So a height constraint of 44.
That's the first thing.
Then I'm going to have a leading constraint and a trailing constraint and a top constraint.
So so far I've made sure that this little view on the top will always stick to the top of my view.
So if I go with different orientation Now if you automatically adjust itself exactly what I want it
to be.
So that's good.
The next thing I want to do is I want to say this little text signing in make sure it is always vertically
and horizontally centered to this.
So again if I change orientation the signing will stick up there which is exactly what they wanted to
have.
Now let's go ahead and that this little box.
So for that I'm going to go ahead and say Give me another view and this you my view I'm going to place
it somewhere like here.
I know the starting point is 64 simply because there's 20 pixels or 20 units for the starting spot and
then 44 for the Orange Box.
And then I'm going to bring it all the way to here and apparently it's height is 128.
I have designed this myself and I always stick to this particular numbers 30 to 44 64 96 128.
All the better mathematical numbers.
So there you have a little tricks that you know the numbers are coming exactly from a certain place.
The next thing is I'm going to add a label on display but I'm going to place it right on the center
saying what would you like to do.
What would you like to do.
If I can actually spell things what would you like to do.
Maybe a little smaller not that much.
A little larger it is on the center here then I you segment segmented control segment that control and
then I'm going to place my segment the control right in the center.
It's a little bit longer from the looks of it so maybe something like that.
And the first one says loggin and the second one says register.
And then the tenth caller if it is not blue I'm going to go and say that is the card that I want.
So log in register.
Everything is working.
Then I'll duplicate this bring it down there make it smaller maybe Iran.
That's not that much maybe 10.
And it says like out and of course that takes color it is a game orange.
So now you are.
This looks OK but obviously the moment we change orientation or anything everything is going to break.
So I have to actually work that out.
So something to keep in mind is that whenever you work on Interface Builder you kind of know why you
are doing things in a certain way.
You either have your designer sitting next to you or if you're the designer yourself you know for instance
why this is happening in this particular way or why is it placed in there.
And for this project I can tell you that this project is never meant to be used in landscape mode is
always going to be an apostate.
And the only thing you have to really worry about is having different devices so it's never meant to
be working on and on essentially a horizontal view.
So because of that I'm going to make the height of this you have to be a constant value.
So I'm going to want to control say height is always constrained to be 128 and then it's a living space.
It's got a trailing space and it's got a topless face against the one above it so vertical spacing.
And by now it's always there even though it wasn't our intention it is still working for other orientations
as well.
It's just that in in the landscape orientations for a smaller device says one hundred twenty eight pixels
would actually be a very very large space which is not a good idea but for us like I said I know there's
is not going to be in the landscape so I'm OK with that.
Now there's another thing in your reach I don't know if you can notice it there's a little bit of a
shadow down there and that's something we're going to study in quite a few sections from now.
But if you really want to you know get it done right now I could actually go ahead and say Give me another
view inside this view so I could say you I view give me another one inside this new you I view.
It actually has a different light on color light gray.
It has.
It's actually it's like at the very bottom right there.
It is.
There is only one pixel in the height.
So something like that and it is at one hundred twenty seven.
The next thing I have to do I have to constrain this one as well so I'm going to say view it's height
is always going to be one pixel.
It has a leading space to it so per view a trailing space on a bottom a space with superb view.
So it's always a start at the very bottom of this container essentially.
If you go to the other end station we can easily see that that's happening properly.
Then just go ahead and say these other objects we also have to plan them.
So the first thing is I'm going to say the label that says what would you like to do.
It has a topis space through its container and it is always horizontally Center.
I'm not going to set any other constraints simply because I want it to be based on the intrinsic size
of the text.
So if we go to another orientation it's still right in the center.
If we come back it's perfectly working.
The reason I keep testing between different orientations even though I'm not going to use it is because
that's kind of the best test you can do as you go between landscape and portrait if it works in both
of them.
It simply means it's going to work on other devices as well.
So that's essentially why I keep testing it.
It's like the ultimate test.
Now the next thing I'm going to do I'm going to say there is a vertical spacing between these two between
the segmented control and that label we have on is all these horizontally centered.
So the moment I did that it essentially went ahead and changed the size or the vet of my segment that
control.
I tried to make it based on the content size or the intrinsic size.
And that's not what I want I want to have a fixed rate of let's say one hundred ninety six and what
I'm going to do is I'm going to say it is also a constraint.
Let's update that see what it does for me.
So it's in the right space from the label up there.
It's always horizontally centered and is always at the same Vitt Maybe the weight is too high maybe
100 5:51 wasn't the right number.
Maybe 156 would do.
And if I go to a different orientation everything is working.
Finally the log out which is going to have a vertical spacing and is always centered on horizontally
center or horizontally centered.
So that's about the upper part is not taking care of.
Let's go ahead and deal with this little section in here.
I'm going to have to have this little text email on the box field then password on the text.
And that little one down there.
There are different ways you could do it.
You could either put all of them inside a stack fury could do them manually.
I think what I'm going to do is I'm going to have a container for this entire thing.
And then inside the container I'm going to assign them let's see how we're going to do that.
I'm going to go ahead and say Give me your eye view and this you have you I'm going to play see it.
Twenty pixels margin here.
I get all the way there.
Which is another 20 picks 335 and make it much lower here.
Somebody like that.
That's essentially going to be the container for all of these things.
I could temporarily give it a different color say it has a very distinctive color.
So that is going to be the box that contains all of these guys.
And because of that I'm going to say well you have a vertical is facing you have a leading face you
have a trailing space.
And let's give it a height and the height of it.
I'd like to give with a very specific number.
Two hundred thirty two would be a very good number.
So something like that that obviously you can easily change that later on if if you didn't like it.
So just go ahead and yet on the objects that we have first of all we have this button which is a very
easy one.
So I'm going to say by then this pardon is going to have a height of 40 for the back end of it is the
orange back on that we have for this.
That takes care of it is going to be why it's on its long get in which is very simple.
And then what it does have is at the very bottom in here.
It's much toward longer and I'm going to say leading space trailing a space.
It has a height and against its purview it has a body mass spacing.
So it is stuck to the left right and bottom as got the right height.
Now let me show you a problem that happens in this.
This is a little difficult to try to keep in mind but try to imagine the proportions that you have for
the for the pink box.
Now if I change my view to an iPhone 8 plus that proportion is clearly changed.
Now the pink boxes actually avoid them.
Simply because it's a very it is maintaining itself based on the leading and trailing Esmay says.
But his height is a constant value is 232 irrelevant of the height of the view.
And maybe that's not the best case in here maybe we should maintain it to be always at the same size.
So what I'm going to do is I'm actually going to go ahead and select this height constraint.
Finding it is which not one get deleted.
Say we don't have that height.
What we do have is an aspect ratio.
So if my main view is 667 and this guy is 232 let's say aspect ratio of.
And here are the values
height to a height and the value is 232 to 667 and that's going to maintain the same proportions on
all different devices which is kind of you know what I would like to see.
Keep in mind that if you have a very very you know sharp eye you will notice that the proportions are
still changing.
And that's because 20 pixels that we have given here from the left and right is changing itself.
So if you want it to be absolutely specific about maintaining the proportions then you shouldn't use
Konstanz values for any of them.
So I'm not going to change now but if you want it you would actually make the weight of these folks
proportional to the support of you as well.
So the next thing you want to add are these five or six different elements so one of them is a label
which I'm going to have around here.
Much smaller.
Something like that I says e-mail.
And he's got an asterisk next to it like that.
And then I'm going to add a text field so that takes feat.
I'm going to place it here.
Exactly.
I'm going to say it doesn't have borders.
There's a line center placeholders is e-mail address something like that.
And it's not gone is actually a group table view back on which is kind of a very bright light gray and
its height is actually going to be 32 and I'm going to drive it all the way to here.
Perfect.
Now I know that is a little bit of an affair bordered on that.
That's part of you have to kind of leave it for future because that has to be added programmatically
and something we haven't really studied yet from visual perspective I think the e-mail has to be a little
bit smaller maybe like that.
And I think its color is actually dark gray is not really black.
So something like that's let me make my bank background the false so we can judge them easier.
OK.
So everything is wrong.
So E-Man actually has to be black.
So have one and my email has to be light gray my text the it has to be light.
Or that's too much as are the custom color then maybe about actually I could get the exact color OK.
So that's about the now I'm going to go ahead and say let's duplicate these two put them in here.
And these guys they become Paswan
Asterix.
And within that I'm just going to start with those thoughts are I.
So that part is taken care of.
We have one more label down in here that label it says for got your password and it's color is actually
different so I'm going to actually give it the color of this art which is some sort of an orange is
largish something like that.
OK.
We also have this little icon in the design there was an actual icon that is an image that has been
supplied.
We don't have that here.
So then when it is I'm going to say instead give me a label on that the is a start to the far right
corner of my text field and inside it on my machine you can get control command a space and load up
these emojis and I'm going to search for an R here.
And I could actually use this one.
Why not.
So it looks nice enough OK.
So that is the idea.
I'm going to use for here again when you're working with an actual actual design you will receive the
artwork for this year.
I don't have those and that's why at some places I'm just trying to simplify the process for myself.
Now we have all of these.
The problem obviously is that none of them is constrained properly.
So let's go ahead and do all of these.
One other time I'm going to say let's say they all have the right height.
So BORSHOFF takes will maintain their height and it has a leading space tweets container and it's Frayling
in space and they're both exactly the same thing.
If the leading is eight the trailing is eight as the leading 8 trailing it.
So that's about that.
Then the next thing is you have to somehow decide where they are located vertically and when to go ahead
and say this little guy.
Maybe they make my back on Pinky again so we can actually see a stuff.
So I'm going to go ahead in Yiddish and say My email has a topis space on a living space and that's
about that's my email address of textfield against the label has a vertical facing.
So that's taken care of now.
Password has a leading face and it also has a vertical facing email textfield against you the passport
takes it against a passport as a vertical spacing.
Then we have this little icon the icon the icon I'm going to go ahead and say it has to always keep
the same height.
It has a top that is aligned with that but them that is aligned with it takes it and then let us say
against.
That takes three.
It also has a trailing constraint.
So it's always a start to the four most right side of this textfield and we finally have this one to
deal with.
It has a trailing space to the main page view.
So trailing a space and has a vertical spacing to textfield and that's about that everything I think
is now taking care of.
You can go to a different view and everything is working.
Come back to a smaller one.
Everything is working.
A much smaller one and hopefully everything is still working.
Now the problem with a much smaller one is that the proportions Harden doesn't allow for enough space
to see the forgot your passport thing.
So to fix that I'm actually going to go to this one the pink one.
Go to the aspic three sure that we had an say in the aspect ratio make it larger maybe 200 on 64.
So there is enough space even in the smallest one.
So you out of the pink color so you can see things better.
So clear cut that and here it is.
This is working now on the smallest of the devices.
And on the largest of the devices I'm also working on anything in between.
So that's all that I know is it became a long exercise.
And as you can see a lot of the things that you do with constraint is you have to try to defend your
own solutions.
There's a lot of trial and error before you get it right.
But once you know you get a better hold of what you're trying to do it becomes much easier.
So that's about it.
And let's move on to our next lesson which is an actual assignment.