Come back again in this lesson without all the constraints in order to lay out to make sure that all
of our outlets.
They essentially represent the same thing in different devices.
So this is going to be a little bit of a you know boring lesson unfortunately was something that we
have to do.
So the first thing I'm going to do is this I'm going to say game mode and that's going to have a space
a topic a space or the safe area and it's going to be having a leading space the safe area and is also
going to have a height that is always 29.
So those are the values that we have so far.
Then I'm going to let this size the vets of it to be inferred from the text I'm on so I'm not going
to apply a vet constrained whether I'm going to do is I'm going to say the segmented control against
the game your game mode.
It has a horizontal is facing of 20.
So that's always going to be 20.
And then it has the same thing from the top at top spacing of a gain of 14 here which is 22 a safe area
or 40.
The superb view and I'm going to actually let it have a vit which is currently set 246 to make it to
40 and I'm going to say the weight of it always stays intact and the height of it you don't have to
give it a constant simply because it automatically adjust itself to be 29 no matter what then the next
thing is my reset button.
There is a then asked to be from 20 pixels from the top which is the 20 points from the safe area.
I wide to be from 20 horizontal spacing from the segmented control.
So that's another number.
I'm going to go ahead and say that is 20.
I want to have a twenty nine pixels height.
So that is going to be 29.
And then I want it to have a trailing space of a gain having 20 Veach.
It is there.
So what I had placed it it automatically had ended up being 20.
So that's all we have to do for these four or three items on the top.
What you could do is you could select either of them and press the update button so you get them in
their updated location.
So where they are going to be this is how they're going to be.
And then the next thing is I'm going to go to my game view and for the game view I'm going to say it
has a leading space of 20 which is good.
I'm going to say it has a tapas space against any of these three objects because they're all in the
exact same space.
So I'm going to say against the segment segmented control it has a vertical spacing of 20 again.
So that number and when been increasing to 20 and then I'm going to say it has a trailing space of once
again 20.
So as you can see in 20 is the measure I have for almost everything.
Most margins are 20 in this in this application.
Now by now our object or your view as a distance from the top from the left and from the right having
that gap from left and right it means it's a it is already set.
If that is the case I'm going to go ahead and say Give me a kind of strange aspect ratio which does
this.
I'm going to go in here double click on this one and say given that it's a vet is set by default because
of the left and right.
Say height or reversing say height equals Vitt you know 1 to 1 ratio 1 to 1 ratio.
So it means Infeld went from left and right and make the height equivalent to that which is what we
wanted.
I automatically updates itself.
So it's exactly placed where we wanted it to be.
The next thing is these two labels label been a lot of them a little bit the time Laban Aponte I have
a spelling mistake and it's number so I'm going to change that to show Minutes and also I'm going to
say it's a bet is always set as don't know 200 for instance.
So width and height and let's make the height 50.
I like to use bigger numbers numbers that are more accurate and more precise.
So I'm going to say there is a kind of strange phrase vet and there is a constant for its height and
it is always at the vertical space of 20 from the game view.
And it is always horizontally centered in the superb view.
So we got that part taken care of and then we go to this last one the last one I want to have the same
shin as the game view.
When it comes to the left and the right margins.
So I'm going to say a leading space of 20 I'm going to say it's frailing a space of a gain 20 and we
to set it's height to be maybe 40.
So it's always has a constrained height 40 and it is just spacing vertically is facing of 20 against
the time and that's all we have to do.
I apologize if this is a little bit boring.
I personally don't really enjoy doing Konstanz maybe you do but it's quite necessary.
And now that we have all of these we can simply go to any kind of device and everything will stay the
way that we wanted it.
So whether you're using IPART the largest one or the smallest one they all maintain the aspect ratio.
This isn't obviously the best design of what you probably wanted to do was you want to make sure that
this label or that button is essentially proportional to the height of the view.
Because as you can imagine right now when I go to an iPad Pro A largest one will see a much wider bar
then and it's thickness or is height essentially it stays intact.
Maybe that wasn't what you wanted but these are the basics of it and you can just go around and design
this stuff on your own or if you want it you could just you know even not have any of the constraints
and just work on the functionality of these once it works you can decide about the looks of it and how
you want to redesign them.
For me however I'm not going to spend any more time on that and I'm going to assume that this is the
interface that I have and I have to make outlet's of these.
And once they make that up that's about it.
I can actually start working with my with my code and the programming side of it.
So let's go ahead to our system window and in the system.
And when I go ahead and say I need these outlets one of them is called the actual thing is called Game
view.
So this is the you view that contains the actual pieces of my game.
Then I have this one which is time label so it shows us time.
I have this one which is game worn label which shows us when we win the game and then we have two functions.
One of those functions is reset.
So this one I'm going to control that I get here say reset action and then I have the last one which
is the game mode action.
So again I'm going that much zoom into here maybe it's better.
I'm going to control right from here and say this is Game Mode action and that's about that.
I have all of my outlets.
Keep in mind I don't want this to be a surprise later on.
Keep in mind that later on.
And because of the advanced part of the scores I'm going to actually remove these resets Baden's constraints
and I'm going to add a few more objects in here.
I'm going to the game type and a game type segmented control.
But since that is coming up in four further in the future I'm not going to do it right now.
And this is what we need for for the time being.
So that's it.
With that in mind this move on to our next lesson where we begin working with the game objects actually.