So or come back in this exercise you're supposed to take your iPhone screen divide it into a grid of
equal four by four blocks and then each block you develop a different set of items.
So one block would only have a label.
Another bloke would have a vertical split of a label on a button and either one would have a split of
two buttons on one image view and another one would have an image in the back yard.
So essentially something like this of develop the beginning of it for you.
So there is a label on the top left there.
There is a label on it by then on the top right there are three divisions on the lower left and one
division on the lower right.
Now obviously I have just put these objects in yeah.
And the moment they switch to a different device everything breaks and nothing maintains its proper
size.
So that's essentially your goal to make sure that whichever iPhone that you design everything at the
very beginning it will maintain this design through all different devices and different orientations.
So that's what you have to do.
Pause the video now if you wish and give it a try on your own.
And once you're done you can follow along with my approach.
All right.
So I'm going to go to.
And one thing that I did and I'm not sure if you have followed the same system is that I actually tried
to direct my objects into as many views as to per views as I could.
So essentially I have this one which is left and this one that is right my left object if I move with
a little bit you can actually see it easier on these guys.
Everything is on the left side of the screen and the right one obviously the right one.
And then within the left I have the top section and then I have the bottom section.
Same thing on the right.
And you will see how these will really help me develop my interface.
So let's go ahead in here.
I'm going to go to the left.
The very first thing I want to set constraint for it I'm going to say left against SUPERVALU top his
face so that topis face is now taking care of then left against the super view leading space.
So that's taken care of I'm going to say left against a superb view of the bottom of space.
So now the top left and bottom are taking off the only thing that's left is the vet and I have of my
left is half the width of the super view.
So I'm going to say left against the super of you give me an aspect ratio and I'm going to go find the
aspect asphyxiation double click on it and say left it.
He was so proud of you with and the ratio is 1 to 2.
So by now I should have my left finding its way around the different devices.
So for instance if I go to a larger device that might it more this thing defined on caller maybe the
dark gray.
Yes it is properly adjusting itself and if I go to a different orientation again it just itself properly.
It's just that it's children.
They don't do that and that's OK.
We're going to come back to that in a moment.
So let's go back to the original design in the original design which is this one.
I'm going to say give me the right one the right object against the same thing.
So another leading his space trailing space hyperspace bottom in space and I'm going to say the right
against the left side horizontal spacing between them.
That's essentially like a gap between these two which are maintaining zero for now simply because they
are both exactly at the same.
What happened there was exactly where the left and right is starts.
So now we have both of them taking care of.
And if I go to a different view we can see that both left and right are doing exactly what we wanted
them to do.
If they have a different background color maybe like that that's perfect.
So now what you have to do is we have to assign the constraints for their children.
So I'm going to go in here and say for the left one this fun top so top is doing this against the parents
leading a space tapas space trailing a space.
And it has a height which is an aspect ratio and that aspect ratio is one to two tall half of it's one
to two but it's not too high.
It's rather height to height.
So now if you go to a different iPhone perfect our label is now being taken care of.
So I'm guessing it's becoming more and more expensive arteries so I'm going to go a little bit faster
through the rest of them.
For stands for this one of the lower right corner.
I'm going to say this image of you against the them.
So we have to first take care of the bottom.
So I'm going to say by them against right is the trailing.
It's got a bottom a space.
It's got a leading Ismailis and it has an aspect ratio and that aspect ratio is one to two.
But the outlets are different it's height against height.
So that's taken care of then I'm going to say my emails you got 20 picks those margin from every side.
So 20 20 20 and 20 sts.
So now that's completely taken care of this go ahead to these two guys that is going to be top of
it right top so they gain top is going to be needing a space trailing space top space and that aspect
ratio which is again the same challenges before so height to height with a ratio of one to two.
And then I'm going to go ahead and say within those objects or within the top of the right split by
then is topis face leaving a space training in space and aspect ratio of one half.
So it's just doing the same thing over and over and over and just knowing what you're trying to do otherwise
or even just learning you have already done it and then try this one little bit differently they're
split.
But then I'm going to say the bar then has a leaving a space to its container trailing a space to its
container.
But then the space through its container.
And I'm going to say it has a top vertical spacing to this other label and the vertical spacing.
Automatically try to set it based on intrinsic content's value.
I want to come here and say actually manually make it zero.
So it automatically adjusts itself.
Let's see that's perfect.
So everything is now working except for the lower left corner.
So this is the one that's not working yet.
So let's go back to original design in the original one.
I'm going to say left Bodom which doesn't have any constraints just yet.
So leaving a space filling a space for them a space and an aspect ratio of 1 2 to 4.
Of course the height I have to change this so another part of the left side is actually working on a
Prunty have misspelled that too.
But I don't know what that is but to them.
OK.
So the next thing is I have to split these guys between the bottom part.
So in here I'm going say the first one is that you are you make sure it doesn't really matter in which
order you go because they all kind of work independently.
But if you want to be very very careful you can go in or there.
So in order for make you view leading his face and he made you view trailing space and you made you
view topless face and an image of you against the bottom.
It has an aspect ratio of one to a tree so height to height one two three one to three.
Perfect.
So then I'm like oh I had to walk in to the one at the bottom of the screen say it has a leading edge
space in has a trailing space.
It has a bar them a space and I'm going to say boy then two against an image view equal heights.
So it always keeps its height the same as the EMH view.
That's a that's a new thing that we need right now.
And then finally have the bottom one and I'm going to say this one it actually has a vertical space
from the sky which is set at zero.
It has a vertical space to this Sky-High which is again set to zero and then it has a leading face and
a trailing face.
And if I take it you feel perfectly safe there.
So let's go ahead and try it on all sorts of different devices.
So deaths that there are different orientations.
Everything is working exactly the way you want them.
So that's about that.
With this exercise are like I said it's a lot of repetitious stuff that you have to do but it really
helps that you do some exercise.
So when we get a more complicated way you want to do more complex interfaces you know what you have
to do.
And one thing that I would recommend is maintaining a very good hierarchy of objects and trying to keep
every group as separate as possible.
That really helps you in developing complex stuff.
And yeah I've seen the next lesson.