1
00:00:05,970 --> 00:00:11,930
Hey what's up everyone Mark Price here at Davis slopes dot com and we're going to continue our swoosh

2
00:00:11,990 --> 00:00:12,320
app.

3
00:00:12,320 --> 00:00:19,370
And in this video we're going to talk about the madness of auto layout and constraints and how that

4
00:00:19,370 --> 00:00:25,640
all works and frames and positions and all this crazy stuff that can be confusing or scary.

5
00:00:25,640 --> 00:00:31,140
But we're going to make it really easy and it really is very easy once you get the basics down.

6
00:00:31,160 --> 00:00:37,180
And so now we're going to do that and we're also going to fix a few things in her app as well too.

7
00:00:37,280 --> 00:00:41,780
So let's go ahead and pull open our project.

8
00:00:41,780 --> 00:00:42,360
OK.

9
00:00:42,620 --> 00:00:48,350
So I want to do the swoosh app and make sure that you're using X cotinine whether it's the beta or release

10
00:00:48,350 --> 00:00:51,560
version if it has been released and I'm an open up.

11
00:00:51,560 --> 00:00:53,210
So whoosh.

12
00:00:55,320 --> 00:00:55,850
OK.

13
00:00:56,130 --> 00:01:02,130
And then other thing I want to do is this is how I'm managing the lessons and you can do yours however

14
00:01:02,130 --> 00:01:06,050
you want but I'm going to create a new branch for this next lesson or this lesson too.

15
00:01:06,060 --> 00:01:14,940
So get check out Dasch be less than 0 2 so you can get branch were clearly on Lesson 2 now and going

16
00:01:14,940 --> 00:01:21,700
to Lesson 1 on the branch would revert to the code we finish off with there so we're good to go.

17
00:01:21,810 --> 00:01:25,460
And what we want to do is quickly just fix our images.

18
00:01:25,950 --> 00:01:29,790
So before we didn't have the 2 x and 3 X versions of the swoosh.

19
00:01:29,850 --> 00:01:32,050
So it's using the same one for all three.

20
00:01:32,100 --> 00:01:35,550
And what I want to do is just drag those in here.

21
00:01:35,670 --> 00:01:39,780
So the 2 x and the 2 x slot and the 3 x 3 ex-law.

22
00:01:39,780 --> 00:01:42,500
Now you probably didn't notice any visual changes but that's fine.

23
00:01:42,550 --> 00:01:44,490
It's it's in better condition now.

24
00:01:44,740 --> 00:01:49,480
So cool let's look at our app here.

25
00:01:50,130 --> 00:01:55,560
If you remember when we ran this on the seven plus things were not things were not the way they should

26
00:01:55,560 --> 00:01:55,980
be.

27
00:01:56,010 --> 00:02:00,450
Arap was looking a little bit ugly and our boss is a little bit unhappy because we're building things

28
00:02:00,450 --> 00:02:02,370
that aren't working on all devices.

29
00:02:02,370 --> 00:02:04,090
And this is a big problem to solve.

30
00:02:04,110 --> 00:02:12,270
You need to be able to have an app run on all device types and sizes because that's what a great user

31
00:02:12,270 --> 00:02:13,380
experience calls for.

32
00:02:13,500 --> 00:02:18,640
OK and as you can see right here it's kind of boxing everything here in the iPhone 7 screen size.

33
00:02:18,760 --> 00:02:26,400
And so I want to talk about first in this video is how frames and layouts work inside of iOS and I'm

34
00:02:26,400 --> 00:02:32,190
not talking about Ottaway I'm talking about frames and positioning of views in their respective coordinate

35
00:02:32,190 --> 00:02:34,350
space and how things used to be.

36
00:02:34,410 --> 00:02:39,630
And it's important of understanding how things are going on under the hood because there are times when

37
00:02:39,630 --> 00:02:42,110
you will want to move things programmatically.

38
00:02:42,300 --> 00:02:44,440
And so let's look at our device here.

39
00:02:44,610 --> 00:02:46,190
OK we're looking on the iPad here.

40
00:02:46,350 --> 00:02:49,040
As you can see let's zoom out a little bit here.

41
00:02:49,260 --> 00:02:53,460
So this is an iPad and of course our map is definitely not properly supporting iPad.

42
00:02:53,460 --> 00:03:00,330
So what I want to do in this example here is I want to make in an outlet for the logo and the background

43
00:03:00,740 --> 00:03:02,760
and I want to move them programmatically OK.

44
00:03:02,760 --> 00:03:07,470
They show you what what you have control and power over and of course doing things programmatically

45
00:03:07,470 --> 00:03:09,020
gives you the ultimate control and power.

46
00:03:09,030 --> 00:03:11,490
This is where that pixel perfect programming comes in.

47
00:03:11,490 --> 00:03:14,670
I was telling you about if your designer demands it no matter what the cost.

48
00:03:14,700 --> 00:03:19,990
I don't care about the cost just give me pixel perfect because that's what a great designer would say.

49
00:03:20,250 --> 00:03:23,930
And of course all great apps have to be pixel perfect.

50
00:03:24,220 --> 00:03:26,990
No need to look nice and work nice.

51
00:03:27,080 --> 00:03:28,940
In any case he's demanding pixel perfect.

52
00:03:29,040 --> 00:03:31,410
And so this is how you would do it with programmatic constraints.

53
00:03:31,410 --> 00:03:34,710
But first off we got to make the outlets for things that we want to manipulate.

54
00:03:35,070 --> 00:03:40,230
So I've opened up a this two little wheels here the assistant editor and I've opened it up and all we're

55
00:03:40,230 --> 00:03:46,530
going to do is drag some ibl over so I'm going to click the swoosh icon and I get a control drag down

56
00:03:46,530 --> 00:03:52,950
here inside the view controller and we're going to call this swoosh and then I'm going to grab this

57
00:03:52,950 --> 00:03:56,410
background image and drag it in here as well too.

58
00:03:56,610 --> 00:04:00,320
And we're going to call this B.G. AMG for background image.

59
00:04:00,600 --> 00:04:02,290
I'll close the assistant editor.

60
00:04:02,550 --> 00:04:06,900
And what we're going to do now is we are going to go into our view control or swift.

61
00:04:07,470 --> 00:04:08,760
OK.

62
00:04:08,760 --> 00:04:15,720
Also you may notice me increasing and decreasing font size like so and I'm doing that with command plus

63
00:04:15,750 --> 00:04:21,420
in command minus and that increases and decreases the font size in X code 9 previous X conversions did

64
00:04:21,420 --> 00:04:21,890
not allow.

65
00:04:21,900 --> 00:04:23,340
So it's pretty cool.

66
00:04:23,340 --> 00:04:26,910
So what do we have here we've got to be outlet's let's clean up here.

67
00:04:26,910 --> 00:04:29,690
And these are referencing the views in our storyboard.

68
00:04:30,030 --> 00:04:34,800
And currently we are we do we do not have auto layout in action we've not set any constraints.

69
00:04:34,800 --> 00:04:35,880
We just have things sitting here.

70
00:04:35,880 --> 00:04:39,950
Otherwise our app would look really nice which it doesn't look that great on iPad right now.

71
00:04:40,140 --> 00:04:43,500
So how do we do this how will we make a pixel perfect program.

72
00:04:43,500 --> 00:04:46,240
How do we have to satisfied that anal designer.

73
00:04:46,470 --> 00:04:48,200
You know requirements or how.

74
00:04:48,210 --> 00:04:50,850
We just have control over app bullets do that now.

75
00:04:50,850 --> 00:04:54,320
So you did load what we're going to do is we're going to position things.

76
00:04:54,340 --> 00:04:54,850
OK.

77
00:04:55,200 --> 00:04:58,840
And so bear with me as we code the first few things because it may not make sense.

78
00:04:59,040 --> 00:05:02,520
So let's say we want the swoosh always to be in the center of the screen.

79
00:05:02,520 --> 00:05:08,340
So what we would have to do in times past or if we want full control and power is what we better yet

80
00:05:08,340 --> 00:05:16,610
say what we would have to do without constraints is something like this swoosh frame equal C-g recked

81
00:05:17,790 --> 00:05:21,260
and we'll do this one right here with the x y width and height.

82
00:05:21,480 --> 00:05:27,270
And so we want it in the center of the screen of the exposition right so X goes from left over to right.

83
00:05:27,330 --> 00:05:34,440
And so what we want to do is we want to say view frame size dealt with divided by two minus.

84
00:05:34,450 --> 00:05:35,170
OK.

85
00:05:35,340 --> 00:05:41,000
Swoosh framed sized up with divided by two.

86
00:05:40,990 --> 00:05:42,220
I'll explain that in a second.

87
00:05:42,300 --> 00:05:47,460
And here we want to add some type of position from the top so let's just say we want 50 pixels or 50

88
00:05:47,460 --> 00:05:52,480
points from the top k because X and Y they start at the top left.

89
00:05:52,500 --> 00:05:53,140
OK.

90
00:05:53,490 --> 00:05:54,800
And then the width.

91
00:05:54,810 --> 00:05:56,710
Let's just keep it the same with that it already is.

92
00:05:56,710 --> 00:06:04,780
So we're going to say swoosh up frame dot with are that size width and the height is going to be so

93
00:06:04,860 --> 00:06:07,740
whoosh that frame does size height.

94
00:06:08,940 --> 00:06:09,550
OK.

95
00:06:10,080 --> 00:06:11,650
Yeah there's a lot going on here.

96
00:06:11,710 --> 00:06:14,290
So we'll make this a little bit smaller here.

97
00:06:14,710 --> 00:06:16,430
Oops I forgot the period.

98
00:06:16,460 --> 00:06:18,260
Here we go.

99
00:06:18,790 --> 00:06:21,710
So what's going on here so here's something very important.

100
00:06:21,720 --> 00:06:22,440
Understand.

101
00:06:22,570 --> 00:06:22,990
OK.

102
00:06:22,990 --> 00:06:27,610
The coordinate system in Iowa s it starts 00 starts at top left.

103
00:06:27,640 --> 00:06:34,630
And if you've ever done any type of basic algebra OK you'll know how to work with X and Y coordinate

104
00:06:34,630 --> 00:06:35,250
system.

105
00:06:35,280 --> 00:06:35,690
OK.

106
00:06:35,740 --> 00:06:38,480
If you're working in 3-D space the Rhian X and a Y and Z.

107
00:06:38,650 --> 00:06:45,100
OK so X is horizontal case x is the horizontal axis so starts the top left and it goes from the left

108
00:06:45,100 --> 00:06:45,960
over to the right.

109
00:06:46,090 --> 00:06:46,890
OK.

110
00:06:46,990 --> 00:06:49,810
Starting at zero at the top left and why is vertical.

111
00:06:49,830 --> 00:06:51,150
And starts from zero.

112
00:06:51,160 --> 00:06:53,160
Also at the top and then goes down.

113
00:06:53,200 --> 00:06:53,770
OK.

114
00:06:53,920 --> 00:07:00,370
So we're looking at the top left corner is 0 0 0 and you can move things around based on that coordinate

115
00:07:00,370 --> 00:07:01,080
system.

116
00:07:01,240 --> 00:07:01,860
OK.

117
00:07:02,140 --> 00:07:05,780
So a view where it is coming from.

118
00:07:05,770 --> 00:07:10,360
Well this is the view that is inside of a view controller if we command.

119
00:07:10,480 --> 00:07:12,450
Click this and go to jump the definition.

120
00:07:12,590 --> 00:07:13,330
OK.

121
00:07:13,510 --> 00:07:17,370
And scroll down in here we've got a property called view OK.

122
00:07:17,500 --> 00:07:20,080
And every you I do control has a view.

123
00:07:20,140 --> 00:07:25,420
And so we're just accessing the view we're grabbing its frame all views have a frame OK which is their

124
00:07:25,420 --> 00:07:26,830
position and size.

125
00:07:26,830 --> 00:07:27,340
OK.

126
00:07:27,550 --> 00:07:30,660
So we're grabbing its frame and then we're grabbing the sides of that frame.

127
00:07:30,880 --> 00:07:35,080
We're not grabbing the position we're grabbing the size and of the width.

128
00:07:35,080 --> 00:07:38,350
And so what we're doing here is we're saying let's get the views with one a view controller.

129
00:07:38,350 --> 00:07:40,170
That's the entire width of the screen.

130
00:07:40,300 --> 00:07:45,360
OK so it will go to the entire width of the screen on an iPad that might be let's say 768.

131
00:07:45,640 --> 00:07:51,520
And we're what we're doing is we're saying we want to take the with let's say an iPad 768 divided by

132
00:07:51,520 --> 00:07:54,520
two which puts it right in the center.

133
00:07:54,560 --> 00:07:58,930
So we're taking an interview with because remember the coordinates start at the top left from 0 0 all

134
00:07:58,930 --> 00:08:01,570
the way to the right which is the with OK.

135
00:08:01,720 --> 00:08:04,570
So it goes from zero to the width of the view.

136
00:08:04,930 --> 00:08:06,770
And we're dividing it.

137
00:08:06,880 --> 00:08:07,850
We're dividing it by two.

138
00:08:07,850 --> 00:08:11,350
So we're getting it right in the middle so we take that with we divide it by 2 and that's the center

139
00:08:11,350 --> 00:08:12,250
of the screen.

140
00:08:12,580 --> 00:08:15,710
And then we have this extra math here for a very specific reason.

141
00:08:15,730 --> 00:08:19,710
And here's the reason why I just told you that all of use.

142
00:08:19,750 --> 00:08:20,220
OK.

143
00:08:20,290 --> 00:08:22,380
The frames they start at the top left.

144
00:08:22,390 --> 00:08:25,940
So if we look at our our image here see the swoosh.

145
00:08:26,240 --> 00:08:29,710
Okay it's own frame actually doesn't start here in the middle.

146
00:08:29,740 --> 00:08:32,620
You might think that it starts here in the middle the X in the y but it doesn't.

147
00:08:32,790 --> 00:08:35,080
It starts here at the top left zero and zero.

148
00:08:35,320 --> 00:08:40,380
And so if I didn't do this extra math here this swoosh wouldn't be perfectly centered.

149
00:08:40,390 --> 00:08:43,710
What would happen is this swoosh would be right here in the middle.

150
00:08:43,720 --> 00:08:45,740
In fact it's probably better to show you.

151
00:08:46,180 --> 00:08:50,650
So what I'm going to do is I'm going go to my storyboard real quick and I might change the background

152
00:08:50,650 --> 00:08:56,090
color of the view just to a different color so when we're debugging it's more visible.

153
00:08:56,130 --> 00:08:57,770
The problem is that we're going to encounter.

154
00:08:57,970 --> 00:09:00,620
And so back here in view toward us swift.

155
00:09:00,710 --> 00:09:06,590
So remember how I said we won by putting this divided by two the frame with the width of the entire

156
00:09:06,590 --> 00:09:08,610
of you divided by two is going to put something in the middle.

157
00:09:08,800 --> 00:09:11,550
Well let's take off the second bit of math here.

158
00:09:12,070 --> 00:09:12,590
OK.

159
00:09:12,720 --> 00:09:15,960
This minus swish that framed about a bit too.

160
00:09:15,980 --> 00:09:16,360
Cetera.

161
00:09:16,390 --> 00:09:17,480
Let's take that off.

162
00:09:17,540 --> 00:09:22,520
What I want to do is I just want to run it and show you what happens when we write this code here.

163
00:09:22,610 --> 00:09:26,740
View framed size with the entire width of the view divided by two.

164
00:09:26,740 --> 00:09:33,310
So notice how it's putting the swish icon like the starting of it is in the middle but the middle of

165
00:09:33,310 --> 00:09:34,700
it should be in the middle right.

166
00:09:34,720 --> 00:09:38,380
We went the middle of the image to be in the middle of the screen but it's the starting of the image

167
00:09:38,380 --> 00:09:39,640
that's in the middle of the screen.

168
00:09:39,640 --> 00:09:43,170
And that's because that's how we coded it because everything starts at 0 0 0.

169
00:09:43,390 --> 00:09:44,080
OK.

170
00:09:44,260 --> 00:09:45,540
So if I put this back.

171
00:09:45,670 --> 00:09:52,090
So if I say the frame the size that with divided by two minus the width of the swoosh I can divide it

172
00:09:52,090 --> 00:09:52,760
by two.

173
00:09:52,930 --> 00:09:56,840
OK so if I take this divided by two it's going to give me those coordinates here in the middle.

174
00:09:56,950 --> 00:10:01,390
And that's what we want to put inside of our middle of the screen.

175
00:10:01,450 --> 00:10:03,490
So we take the middle.

176
00:10:03,490 --> 00:10:05,560
We divide it into the main view.

177
00:10:05,670 --> 00:10:06,260
OK.

178
00:10:06,340 --> 00:10:15,660
And then we divide the image into and then we subtract that Delta us we subtract the width of the to

179
00:10:15,660 --> 00:10:20,470
about about two out of the width of the image or the view divided by two.

180
00:10:20,470 --> 00:10:21,960
And that's what's going to put it in the middle.

181
00:10:21,970 --> 00:10:26,780
So if I run it again and you're like oh this is too much math is too confusing.

182
00:10:26,780 --> 00:10:30,130
Well it'll take some time but it's ok.

183
00:10:30,130 --> 00:10:32,910
Notice how it's exactly in the middle of the screen right where we want it.

184
00:10:33,010 --> 00:10:33,280
OK.

185
00:10:33,280 --> 00:10:35,210
And the math is very simple.

186
00:10:35,260 --> 00:10:36,460
You've got to wrap your head around it.

187
00:10:36,460 --> 00:10:37,530
So what I want you to do.

188
00:10:37,580 --> 00:10:42,580
Don't understand this and I want you to look at this code and look at it some more to understand exactly

189
00:10:42,820 --> 00:10:43,560
what is happening.

190
00:10:43,570 --> 00:10:45,720
I'm going to explain it one more time.

191
00:10:45,880 --> 00:10:46,640
OK.

192
00:10:46,690 --> 00:10:48,480
As you can see on the screen here.

193
00:10:48,910 --> 00:10:54,960
OK let's let's say the standard iPad with which it is 768 768 points or pixels.

194
00:10:54,970 --> 00:10:58,430
OK we're not talking about retina display just the regular.

195
00:10:58,480 --> 00:11:02,470
So from the left to the right is 768 pixels.

196
00:11:02,470 --> 00:11:03,900
Well how do we get the center of that.

197
00:11:04,000 --> 00:11:07,150
We take 768 or whatever the view with this.

198
00:11:07,150 --> 00:11:13,050
So this green view here the view this viewer you see here is the screen view you see here that is 768

199
00:11:13,050 --> 00:11:14,780
points were taking divided by two.

200
00:11:14,850 --> 00:11:20,040
We're saying we want our squish logo to be right here in the middle but remember when we put it there

201
00:11:20,220 --> 00:11:25,380
it puts the beginning of the swish logo there because X and Y start at the top left.

202
00:11:25,380 --> 00:11:31,600
So what we do then is we find that the center point of the swoosh image OK which is its own with.

203
00:11:31,610 --> 00:11:37,720
Divided by two and we subtract that value from the 768 divided by two which puts it here.

204
00:11:37,740 --> 00:11:42,480
Now again if that's still confusing you'll get overtime because that's how you would center things if

205
00:11:42,480 --> 00:11:44,060
you're doing it programmatically.

206
00:11:44,190 --> 00:11:44,980
OK.

207
00:11:45,090 --> 00:11:49,140
And then we just set the width and the height to the existing width and height of the swoosh image so

208
00:11:49,140 --> 00:11:50,670
it stays the same.

209
00:11:50,670 --> 00:11:54,280
One more thing that we want to do is we want to get this background image to fill the whole screen.

210
00:11:54,300 --> 00:11:55,940
This one's a little bit easier.

211
00:11:55,950 --> 00:12:03,600
All we have to do with the image is a B.G. image frame equals view frame.

212
00:12:04,730 --> 00:12:09,180
OK so what we're saying is we want the entire frame.

213
00:12:09,320 --> 00:12:11,450
Which is what does the frame consist of.

214
00:12:11,480 --> 00:12:14,000
It consists of a position and an origin.

215
00:12:14,090 --> 00:12:14,980
OK.

216
00:12:15,330 --> 00:12:17,210
Or excuse me a position and the size.

217
00:12:17,210 --> 00:12:24,170
So if I if I said B.G. image frame there's going to be a dot origin.

218
00:12:24,220 --> 00:12:25,230
OK that's the position.

219
00:12:25,250 --> 00:12:27,020
Origin X and origin y.

220
00:12:27,200 --> 00:12:30,180
So every frame has an x and y position or an origin.

221
00:12:30,270 --> 00:12:31,600
And it also has a size.

222
00:12:31,610 --> 00:12:35,260
OK so it has a size that width and a size that height.

223
00:12:35,570 --> 00:12:41,430
So again every frame has a position and it has a size.

224
00:12:41,600 --> 00:12:45,860
OK so what we're doing here is we're saying we want the image of the background to always be the same

225
00:12:46,160 --> 00:12:49,190
size and position as the view itself.

226
00:12:49,190 --> 00:12:50,230
The green image.

227
00:12:50,250 --> 00:12:52,050
OK so let's go ahead and run it.

228
00:12:54,660 --> 00:12:58,850
We should see the image filled the entire screen which it does.

229
00:12:58,860 --> 00:13:04,070
Are you starting to see how this works so can you imagine everything on your entire screen.

230
00:13:04,080 --> 00:13:06,720
You'd have to program like this you have to set a position in a size.

231
00:13:06,720 --> 00:13:08,480
And we used to have to do these things.

232
00:13:08,610 --> 00:13:14,190
So we set a position the size of this and a position and size of this and we can make things correspond

233
00:13:14,190 --> 00:13:15,990
to other images or other components.

234
00:13:15,990 --> 00:13:21,720
I could say you know put this go all in label just below the swoosh label 50 points below that we could

235
00:13:21,720 --> 00:13:22,340
do all that.

236
00:13:22,380 --> 00:13:23,790
And this is what we use have to do.

237
00:13:23,880 --> 00:13:27,390
And so like yeah we've programmed the Bakra maybe it's not so bad and we've programmed the logo but

238
00:13:27,390 --> 00:13:27,870
look at this.

239
00:13:27,870 --> 00:13:34,530
If I do command right to rotate OK it's broken right we have green on here again because what happened

240
00:13:34,530 --> 00:13:40,120
is the size of the view is changed it's now no longer 768 10:24.

241
00:13:40,550 --> 00:13:40,910
OK.

242
00:13:40,920 --> 00:13:46,890
And so what we would have to do now is write code to get our frames and positions of the swish and everything

243
00:13:46,890 --> 00:13:47,700
to update.

244
00:13:47,700 --> 00:13:51,630
I would have to write and I would have to write code to do a refresh on my positioning when these things

245
00:13:51,630 --> 00:13:54,720
rotated here and this is all manual.

246
00:13:54,720 --> 00:13:58,500
Again this is how you do pixel perfect programming because you can move things exactly where they need

247
00:13:58,500 --> 00:14:02,510
to be but there's a reason why we've moved on to auto layout.

248
00:14:02,520 --> 00:14:04,060
Hence the word auto.

249
00:14:04,200 --> 00:14:07,710
OK where you can actually let IO west.

250
00:14:07,890 --> 00:14:13,470
OK you can let it do the work for you and it may not be pixel perfect but it's very deep and close and

251
00:14:13,770 --> 00:14:19,270
that's what Apple recommends that you use and you can get really close with the pixel perfect thing.

252
00:14:19,280 --> 00:14:24,190
I'm not trying to say you can't but you know guaranteed pixel perfect isn't.

253
00:14:24,270 --> 00:14:26,250
You can't do that with Attilio.

254
00:14:26,280 --> 00:14:31,790
It's just it's not it's not possible or if it is possible it's insane amounts of work even then.

255
00:14:31,790 --> 00:14:33,880
So what have we done.

256
00:14:33,910 --> 00:14:39,210
OK well we've moved things programmatically we've moved the frames we've talked about frames OK which

257
00:14:39,210 --> 00:14:43,560
consists of a origin or a position and a size.

258
00:14:43,650 --> 00:14:49,410
OK and of course you can have frames and then frame so our swoosh for instance it lives on top of our

259
00:14:49,410 --> 00:14:50,120
view.

260
00:14:50,160 --> 00:14:50,460
OK.

261
00:14:50,490 --> 00:14:57,450
The green view that you saw or swooshes inside of that so the the parent frame for the swoosh starts

262
00:14:57,450 --> 00:14:59,500
at the top left 0 0.

263
00:14:59,520 --> 00:15:04,720
If I added let's say another image within an image which is kind of silly and you wouldn't do that.

264
00:15:04,890 --> 00:15:10,920
But then the new sub view or sub image would inherit the parent coordinates of this image here.

265
00:15:11,040 --> 00:15:11,510
OK.

266
00:15:11,610 --> 00:15:18,110
And wherever that starts and so a views frame is always relative to its parent position.

267
00:15:18,260 --> 00:15:18,780
OK.

268
00:15:18,870 --> 00:15:20,950
It's always relative to its parent position.

269
00:15:21,270 --> 00:15:24,960
So a lot is going on here even though there's only a few lines of code here ran some math.

270
00:15:25,040 --> 00:15:26,100
We positioned some things.

271
00:15:26,100 --> 00:15:29,790
This is what you have to do if you want to put things on the screen pixel perfect as you got to move

272
00:15:29,790 --> 00:15:30,920
things programmatically.

273
00:15:30,960 --> 00:15:31,810
A lot of work.

274
00:15:31,860 --> 00:15:37,770
Nobody typically does this except maybe really old code bases so just showing you here and this is not

275
00:15:37,770 --> 00:15:39,510
irrelevant it's completely irrelevant.

276
00:15:39,510 --> 00:15:40,860
So you need to know these things.

277
00:15:40,950 --> 00:15:45,630
But we're going to call this video done and in the next video I'm going to show you a much better way

278
00:15:46,020 --> 00:15:48,450
which is introducing you to auto layout and constraint.

279
00:15:48,450 --> 00:15:49,530
So that's it for now.

280
00:15:49,540 --> 00:15:51,850
Marc price advice slopes dot com.

281
00:15:51,900 --> 00:15:57,240
I know your brain is probably hurting but as we keep going forward it wants to see you later.