1
00:00:01,410 --> 00:00:07,860
So will come back again in this lesson we are going to work on the interface houses for our app a lot

2
00:00:07,860 --> 00:00:13,860
of the interface out there for this app or actually build programmatic Livi essentially the grid of

3
00:00:13,860 --> 00:00:15,560
the tiles all the time.

4
00:00:15,570 --> 00:00:19,530
We have to make them programmatically simply because we don't know how many of them we are going to

5
00:00:19,530 --> 00:00:20,030
have.

6
00:00:20,190 --> 00:00:25,260
But then there are other things that we can do in the storyboard and I personally prefer to do as much

7
00:00:25,260 --> 00:00:26,950
as I can and the Interface Builder.

8
00:00:27,060 --> 00:00:29,930
So it actually gives me a visual feedback.

9
00:00:29,930 --> 00:00:34,110
It also simplifies my life down the track when I am doing programming.

10
00:00:34,230 --> 00:00:39,000
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

11
00:00:39,000 --> 00:00:47,660
the outlets here and then I'm going to try to adjust their sizes and locations so I don't need a label.

12
00:00:47,670 --> 00:00:53,200
That label is going to be saying in game mode.

13
00:00:53,700 --> 00:00:58,910
And let me zoom into here as much as I can because that would actually help us.

14
00:00:59,310 --> 00:01:00,940
So something like that.

15
00:01:01,320 --> 00:01:11,210
And then I need a segmented control because for my segments control I need to have three different situations.

16
00:01:11,220 --> 00:01:19,470
One of them is called for boys for the other one is going to be six eight by six.

17
00:01:19,470 --> 00:01:24,530
And the last one is going to be an 8 5 8 8 way.

18
00:01:24,660 --> 00:01:31,730
And then I would need a reset button that's going to be a of them so that's the burden that perhaps

19
00:01:31,730 --> 00:01:37,230
has a different background color as this course is primarily about programming.

20
00:01:37,250 --> 00:01:39,760
I'm not going to really worry about the design models.

21
00:01:39,770 --> 00:01:45,730
I'll leave that to you guys to have your own creative flavor essentially added to it.

22
00:01:45,740 --> 00:01:51,280
So for me I'm just going to give it distinctive colors that I can see what they're going to do.

23
00:01:51,470 --> 00:01:56,460
So that's a result why then and then all these when the actual game.

24
00:01:56,480 --> 00:02:02,360
So that's going to be a view that's going to help me actually visualize the game.

25
00:02:02,360 --> 00:02:09,200
Let me zoom out a little bit give this one perhaps a little light gray background color placement here

26
00:02:09,620 --> 00:02:11,230
and then below all of those.

27
00:02:11,240 --> 00:02:13,010
I'm going to have another label.

28
00:02:13,100 --> 00:02:15,550
That label is going to be the time label.

29
00:02:15,560 --> 00:02:17,630
I'm going to make it a little bit larger.

30
00:02:17,840 --> 00:02:20,610
Such as like this.

31
00:02:20,780 --> 00:02:28,260
And then below all of those I'm going to have another label which is essentially my game Vuna situation.

32
00:02:28,350 --> 00:02:33,530
So with that I'm when I actually go ahead and adjust the size of all of these.

33
00:02:33,530 --> 00:02:40,280
I know I'm going to be using constraints in auto lay out but it really helps me have a better numbers

34
00:02:40,280 --> 00:02:43,000
in mind when I'm going for the constraints.

35
00:02:43,010 --> 00:02:46,760
So I'm actually going to change this manually myself.

36
00:02:46,900 --> 00:02:48,770
When to get this game mode.

37
00:02:48,890 --> 00:02:56,510
I'm going to make it a little bit smaller perhaps and I'm going to play see 20 from left and 40 from

38
00:02:56,510 --> 00:03:01,250
top and then I'm going to get this one and the segmented contours.

39
00:03:01,250 --> 00:03:07,640
They have a default height of 29 so you can change that but we can change their voice so I'm going to

40
00:03:07,640 --> 00:03:14,440
put them at 40 and I want it to be roughly at about 20 pixels or 20 points from the game mode.

41
00:03:14,450 --> 00:03:21,560
So when I actually say move it to about here and of course we'll change this value with the constrains

42
00:03:21,590 --> 00:03:23,000
in the next lesson.

43
00:03:23,000 --> 00:03:29,330
I'm going to change also the height of my game to match the segment it's controlled to be 29 even though

44
00:03:29,330 --> 00:03:30,920
it doesn't really make a difference.

45
00:03:31,100 --> 00:03:37,970
But it really helps me first align them vertically to each other and also visually it helps me to see

46
00:03:38,060 --> 00:03:39,630
my items better.

47
00:03:39,710 --> 00:03:43,510
Then finally I have this guide which is my reset button.

48
00:03:43,700 --> 00:03:47,900
I'm going to play that somewhere but I feel like it is about 20 points.

49
00:03:47,900 --> 00:03:52,410
It has a height of twenty nine and it is up to 40 from the vine.

50
00:03:52,670 --> 00:03:58,010
And I tried to push it all the way to Sunbird that I feel like it's 20 points.

51
00:03:58,190 --> 00:04:03,410
Again if you're going to use constraint so we don't need to be so specific about it but it helps to

52
00:04:03,410 --> 00:04:09,980
get some sort of a play there you know visualization and going to push the game butu about there.

53
00:04:10,070 --> 00:04:15,310
I know that my game is going to be a square shape so it's going to have a kind of strange for Witan

54
00:04:15,310 --> 00:04:15,900
height.

55
00:04:16,370 --> 00:04:18,030
My timer.

56
00:04:18,050 --> 00:04:23,560
I'm going to change the values on it to show something like this.

57
00:04:23,690 --> 00:04:31,770
So it's going to be 0 0 and then columns Ciro's hero and then sign of a second.

58
00:04:32,130 --> 00:04:39,620
So minutes and seconds and it's going to be right on the center quite large and maybe a different color.

59
00:04:39,650 --> 00:04:41,320
Maybe this one.

60
00:04:41,540 --> 00:04:51,060
And then this is the game Move-On start so essentially says you want or something to that effect and

61
00:04:51,060 --> 00:04:53,890
we'll figure this out in the programming side.

62
00:04:54,420 --> 00:04:58,340
And I'm going to give this one a different background color as well.

63
00:04:58,340 --> 00:05:04,520
And like I said I leave the design those to to you guys because I think that you are better designers

64
00:05:04,520 --> 00:05:10,100
than I am and this course is only dealing with the programming topics.

65
00:05:10,100 --> 00:05:11,240
So this is it.

66
00:05:11,240 --> 00:05:13,820
That's all I'm going to have for this lesson.

67
00:05:13,850 --> 00:05:19,820
I have all the outlets in the next us and we are going to essentially add all the constraints so we

68
00:05:19,820 --> 00:05:27,530
make sure they stay in the same place as you well know by now if we switch from this view to a different

69
00:05:27,530 --> 00:05:31,810
type of i-Pad everything was messed up essentially.

70
00:05:31,820 --> 00:05:38,810
So we have to make sure that we add all the constraints so they maintain their position RTT compared

71
00:05:38,810 --> 00:05:43,090
to or against the other corners and against the other outlets.

72
00:05:43,100 --> 00:05:46,030
So let's keep it up to here and we move on to our next lesson.

73
00:05:46,050 --> 00:05:47,510
I add the constraints.