So will come back again in this lesson we are going to work on the interface houses for our app a lot
of the interface out there for this app or actually build programmatic Livi essentially the grid of
the tiles all the time.
We have to make them programmatically simply because we don't know how many of them we are going to
have.
But then there are other things that we can do in the storyboard and I personally prefer to do as much
as I can and the Interface Builder.
So it actually gives me a visual feedback.
It also simplifies my life down the track when I am doing programming.
So with that in mind this jump into escort and the first thing I'm going to do is I'm going to add all
the outlets here and then I'm going to try to adjust their sizes and locations so I don't need a label.
That label is going to be saying in game mode.
And let me zoom into here as much as I can because that would actually help us.
So something like that.
And then I need a segmented control because for my segments control I need to have three different situations.
One of them is called for boys for the other one is going to be six eight by six.
And the last one is going to be an 8 5 8 8 way.
And then I would need a reset button that's going to be a of them so that's the burden that perhaps
has a different background color as this course is primarily about programming.
I'm not going to really worry about the design models.
I'll leave that to you guys to have your own creative flavor essentially added to it.
So for me I'm just going to give it distinctive colors that I can see what they're going to do.
So that's a result why then and then all these when the actual game.
So that's going to be a view that's going to help me actually visualize the game.
Let me zoom out a little bit give this one perhaps a little light gray background color placement here
and then below all of those.
I'm going to have another label.
That label is going to be the time label.
I'm going to make it a little bit larger.
Such as like this.
And then below all of those I'm going to have another label which is essentially my game Vuna situation.
So with that I'm when I actually go ahead and adjust the size of all of these.
I know I'm going to be using constraints in auto lay out but it really helps me have a better numbers
in mind when I'm going for the constraints.
So I'm actually going to change this manually myself.
When to get this game mode.
I'm going to make it a little bit smaller perhaps and I'm going to play see 20 from left and 40 from
top and then I'm going to get this one and the segmented contours.
They have a default height of 29 so you can change that but we can change their voice so I'm going to
put them at 40 and I want it to be roughly at about 20 pixels or 20 points from the game mode.
So when I actually say move it to about here and of course we'll change this value with the constrains
in the next lesson.
I'm going to change also the height of my game to match the segment it's controlled to be 29 even though
it doesn't really make a difference.
But it really helps me first align them vertically to each other and also visually it helps me to see
my items better.
Then finally I have this guide which is my reset button.
I'm going to play that somewhere but I feel like it is about 20 points.
It has a height of twenty nine and it is up to 40 from the vine.
And I tried to push it all the way to Sunbird that I feel like it's 20 points.
Again if you're going to use constraint so we don't need to be so specific about it but it helps to
get some sort of a play there you know visualization and going to push the game butu about there.
I know that my game is going to be a square shape so it's going to have a kind of strange for Witan
height.
My timer.
I'm going to change the values on it to show something like this.
So it's going to be 0 0 and then columns Ciro's hero and then sign of a second.
So minutes and seconds and it's going to be right on the center quite large and maybe a different color.
Maybe this one.
And then this is the game Move-On start so essentially says you want or something to that effect and
we'll figure this out in the programming side.
And I'm going to give this one a different background color as well.
And like I said I leave the design those to to you guys because I think that you are better designers
than I am and this course is only dealing with the programming topics.
So this is it.
That's all I'm going to have for this lesson.
I have all the outlets in the next us and we are going to essentially add all the constraints so we
make sure they stay in the same place as you well know by now if we switch from this view to a different
type of i-Pad everything was messed up essentially.
So we have to make sure that we add all the constraints so they maintain their position RTT compared
to or against the other corners and against the other outlets.
So let's keep it up to here and we move on to our next lesson.
I add the constraints.