1
00:00:00,670 --> 00:00:02,270
So well come back again.

2
00:00:02,360 --> 00:00:08,000
This lesson to me is one of the most important lessons when it comes to interface design because it

3
00:00:08,000 --> 00:00:16,370
teaches us how to use hard coded values to build interface items within a programming interface not

4
00:00:16,460 --> 00:00:19,250
inside our interface builder.

5
00:00:19,340 --> 00:00:23,560
And that's a situation that we need to do a lot of different times.

6
00:00:23,630 --> 00:00:25,010
So I'm going to go to school.

7
00:00:25,160 --> 00:00:33,080
I'm going to start a new project called our hard code the interface.

8
00:00:33,140 --> 00:00:40,520
And I want to show you what happens when we develop an interface item here in the Interface Builder.

9
00:00:40,550 --> 00:00:42,670
So there are four stages of happening.

10
00:00:42,710 --> 00:00:47,820
One the you of let's say I want to make a label you find a label.

11
00:00:47,860 --> 00:00:58,770
And you are located and you initialize it and then it automatically sets its size and some content and

12
00:00:59,210 --> 00:01:03,520
automatically makes it a child of a certain SuperValu.

13
00:01:03,920 --> 00:01:05,020
So that's right.

14
00:01:05,030 --> 00:01:08,720
All of these down so that we don't forget them.

15
00:01:08,930 --> 00:01:10,590
So here's the thing.

16
00:01:13,090 --> 00:01:26,580
I wrote it and initialize the site about size add some attributes to a Super.

17
00:01:26,910 --> 00:01:31,390
So that's essentially a process to make a new outlet.

18
00:01:31,500 --> 00:01:34,140
One more time I'm going to show it to you here.

19
00:01:34,200 --> 00:01:42,120
I don't care to initialize the site about the size some attributes which for instance is a label or

20
00:01:42,130 --> 00:01:46,940
hello and then added to a particular Super view.

21
00:01:47,130 --> 00:01:54,900
If we can do all these four steps in programming we can essentially come back to this one here but it

22
00:01:54,900 --> 00:01:57,660
won't be as simple as drag and drop.

23
00:01:57,660 --> 00:02:08,240
So I sort of you can sort of I'm going to go ahead and say well let my label to be AUI label.

24
00:02:08,340 --> 00:02:09,810
I have two flavors.

25
00:02:09,840 --> 00:02:15,800
The one I want to use is using a frame which is essentially very you want it to be.

26
00:02:16,020 --> 00:02:17,360
So with a frame.

27
00:02:17,360 --> 00:02:19,170
Let's see how I'm going to make a frame.

28
00:02:19,200 --> 00:02:28,650
I'm going to set let my frame to be a C direct all the way is the next going to be a more familiar one

29
00:02:28,680 --> 00:02:34,360
is this one x y width and height something we have done so many times before.

30
00:02:34,440 --> 00:02:44,570
I'm going to say give it to me at 20 I'm 40 and 135 and a height of 44 which is very very simple.

31
00:02:44,580 --> 00:02:49,140
So it's saying produce a frame of this origin.

32
00:02:49,200 --> 00:02:53,390
Top left corner is 20 and 40 and a fit and height.

33
00:02:53,400 --> 00:02:56,470
And of course this is the frame I want to use for my label.

34
00:02:56,820 --> 00:02:59,370
I now have to add some attributes.

35
00:02:59,370 --> 00:03:12,220
So I'm going to say my label dot text becomes hello hello and my label Dot thank you and color becomes

36
00:03:12,220 --> 00:03:13,230
the white color.

37
00:03:13,230 --> 00:03:15,620
Dark dark gray.

38
00:03:15,630 --> 00:03:18,120
So now we're kind of done.

39
00:03:18,120 --> 00:03:23,620
We have allocated initialized decided about the size and location.

40
00:03:24,210 --> 00:03:28,890
And we have some attributes we just haven't added to anyone.

41
00:03:29,010 --> 00:03:42,050
So I'm going to go ahead and say so that the you at the top view my latest So find the frame alloca

42
00:03:42,130 --> 00:03:46,030
that initialized based on that frame set some properties.

43
00:03:46,070 --> 00:03:52,690
And I did that to a Super view that let's this application now and see what do we get.

44
00:03:55,390 --> 00:03:55,870
All right.

45
00:03:55,870 --> 00:04:01,840
Now that my simulator is up we can see that our label shows up there.

46
00:04:02,050 --> 00:04:09,380
It has 44 pixels high and it has 335 vet so on and so forth.

47
00:04:09,410 --> 00:04:14,530
Now let's quickly talk about these values or what is X and Y and what is the V.

48
00:04:14,590 --> 00:04:22,780
And height x and y is essentially a point in this space is slitted location on the top left corner.

49
00:04:23,160 --> 00:04:27,620
And that could actually make it using a C.G. point.

50
00:04:27,760 --> 00:04:39,830
So I quit saying let my origin be a C.G. point of the C-g point I want to use is 20 and 40.

51
00:04:40,000 --> 00:04:46,840
So essentially a point in the interface is being declared the boy.

52
00:04:46,990 --> 00:04:54,430
C-g point says your point is a class that helps us find different locations just like home CGI record

53
00:04:54,460 --> 00:05:01,410
is the one that produces a rectangle for us that next one is this width and height.

54
00:05:01,510 --> 00:05:04,080
And what that is is actually size.

55
00:05:04,140 --> 00:05:15,550
So I would say my size to be C.G. size of I tells me Well give me two of these so the values are 335

56
00:05:16,060 --> 00:05:17,980
and 44.

57
00:05:17,980 --> 00:05:20,210
Now here's something interesting that's happening.

58
00:05:20,320 --> 00:05:30,010
I got that 335 because I know they're vits of the iPhone even I'm using iPhone 8.

59
00:05:30,190 --> 00:05:42,280
But what if you didn't know that I could simply say the cell phone to view that frame size dot.

60
00:05:42,970 --> 00:05:47,440
So Dot is the video of the view of the entire view.

61
00:05:47,440 --> 00:05:50,400
I would have 20 pixels margins from each side.

62
00:05:50,590 --> 00:05:52,830
So I'm going to say minus 40.

63
00:05:52,840 --> 00:05:59,220
So as simple as that you can get access to the vet and height of different objects in your view.

64
00:05:59,230 --> 00:06:02,430
I know I could if I wanted to I could rewrite my frame.

65
00:06:02,440 --> 00:06:12,180
I could say in a sort of CGI direct to display it would actually be a CGI act vate origin and size.

66
00:06:12,340 --> 00:06:16,910
So my origin is the sky to the top left corner.

67
00:06:17,200 --> 00:06:20,170
And the size is this guy my size.

68
00:06:20,170 --> 00:06:25,490
So these two particular values I again I'm using the same thing.

69
00:06:25,600 --> 00:06:30,550
If we run this up again nothing is going to be different is going to be exactly the same thing as it

70
00:06:30,660 --> 00:06:32,730
as it was before a few minutes ago.

71
00:06:34,910 --> 00:06:41,520
The only difference is now the vets of this label is dependent on the width of the screen is always

72
00:06:41,520 --> 00:06:42,670
based on data.

73
00:06:42,870 --> 00:06:50,350
Now what if I wanted to put this label in the center of my screen I could go on saying even after I

74
00:06:50,350 --> 00:07:01,490
have to stop you I could say my labor data center which is asking for a C.G. point is C.G. point of

75
00:07:01,490 --> 00:07:02,030
view.

76
00:07:02,620 --> 00:07:07,960
I now I have to find out what is the center in here that would be actually quite difficult right.

77
00:07:07,990 --> 00:07:11,260
I could go ahead and say Well give me this.

78
00:07:11,290 --> 00:07:13,370
They put it there.

79
00:07:13,370 --> 00:07:15,130
Divide it by two.

80
00:07:15,130 --> 00:07:18,700
Give me the highlights and divide it by two done.

81
00:07:18,700 --> 00:07:26,110
That would certainly work but a much easier way would be if I say make the center of my label to be

82
00:07:26,110 --> 00:07:31,740
self do you not center.

83
00:07:31,770 --> 00:07:38,460
So wherever is the center of the view a white Bangon here somewhere about where my mouse pointer is

84
00:07:38,460 --> 00:07:39,230
right now.

85
00:07:39,390 --> 00:07:42,310
Make my label be deaf simple as that.

86
00:07:42,330 --> 00:07:44,690
Let's see if that works.

87
00:07:44,950 --> 00:07:49,190
And now yes is working perfect.

88
00:07:49,200 --> 00:07:55,620
So finally I want to show you one last thing when it comes to dealing with heart Kaupthing interface

89
00:07:55,620 --> 00:08:02,640
items if you're of course going to do more exercises and will be using this quite often throughout this

90
00:08:02,640 --> 00:08:02,960
course.

91
00:08:02,970 --> 00:08:12,210
But for now the only thing I want to show you is this value self that the view frame or in the case

92
00:08:12,210 --> 00:08:20,250
of or object I could actually say my labors got frame and there is another one that's caused my label

93
00:08:20,290 --> 00:08:23,140
or any object that bounce.

94
00:08:23,190 --> 00:08:28,170
And the difference between a boundary and frame sometimes becomes important.

95
00:08:28,170 --> 00:08:31,300
I'm only going to write them down for you as a comment.

96
00:08:31,350 --> 00:08:34,250
So you have that handy if you need them.

97
00:08:34,400 --> 00:08:46,400
So frame includes the origin so in a frame such as this one this frame says my origin is in the case

98
00:08:46,400 --> 00:08:49,700
of the self that view is 0 0.

99
00:08:50,090 --> 00:09:03,930
But a boundary counts as 0 0 origin so a boundary essentially is a very good way of finding a size of

100
00:09:04,000 --> 00:09:13,370
growth for finding sites because it doesn't have the origin and it doesn't understand where the object

101
00:09:13,400 --> 00:09:14,590
belongs to.

102
00:09:14,720 --> 00:09:21,740
So if you get the boundary of my label the boundary of it would be 0 0 and the width and height of it.

103
00:09:21,770 --> 00:09:25,220
In this case 335 and 44.

104
00:09:25,480 --> 00:09:29,430
Let's print both of these shall we say prints.

105
00:09:29,600 --> 00:09:33,380
Our frame is and for the frame.

106
00:09:33,380 --> 00:09:39,870
I'm going to say preens my label got frame and

107
00:09:43,900 --> 00:09:54,340
bounce is baths and if I run this they can see it on here hopefully.

108
00:09:57,600 --> 00:10:05,950
So it says frame is 20 and some number that's the origin of x and y and this is it.

109
00:10:05,970 --> 00:10:13,430
And that's the height but the boundary is always 0 and 0 byte has the width and height so boundary it

110
00:10:13,430 --> 00:10:20,690
depends on the object itself while frame depends on the object and vear it is being placed at.

111
00:10:20,790 --> 00:10:26,490
So keep that in mind that sometimes when the origin is irrelevant for us we use the bounce when the

112
00:10:26,490 --> 00:10:27,540
origin matters.

113
00:10:27,540 --> 00:10:29,310
We use the phrase.

114
00:10:29,690 --> 00:10:30,420
All right then.

115
00:10:30,440 --> 00:10:36,210
So that was about the hard coding interface items in the next lesson we are going to do an exercise

116
00:10:36,210 --> 00:10:36,570
of the.