1 00:00:05,910 --> 00:00:11,990 A what's a better one Mark Price here at Debb slopes dot com and we're going to continue our swoosh 2 00:00:12,020 --> 00:00:12,370 app. 3 00:00:12,380 --> 00:00:19,430 And in this video we're going to talk about the madness of auto layout and constraints and how that 4 00:00:19,430 --> 00:00:25,490 all works and frames and positions and all this crazy stuff that can be confusing or scary. 5 00:00:25,700 --> 00:00:30,900 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,220 --> 00:00:37,280 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,330 --> 00:00:41,780 So let's go ahead and pull open our project. 8 00:00:41,840 --> 00:00:42,420 OK. 9 00:00:42,680 --> 00:00:48,410 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,410 --> 00:00:50,000 version if it has been released. 11 00:00:50,420 --> 00:00:51,620 And I'm going to open up. 12 00:00:51,620 --> 00:00:53,260 So whoosh. 13 00:00:55,370 --> 00:00:55,900 OK. 14 00:00:56,180 --> 00:01:02,180 And then other thing I want to do is this is how I'm managing the lessons and you can do yours however 15 00:01:02,180 --> 00:01:07,520 you want but I'm going to create a new branch for this next lesson or this lesson too so get check out 16 00:01:07,760 --> 00:01:15,800 Dasch be less than 0 2 so the can get branch were clearly unless intune now is going to Lesson one on 17 00:01:15,800 --> 00:01:18,150 the branch would revert to the code. 18 00:01:18,310 --> 00:01:21,710 We finish off with there so we're good to go. 19 00:01:21,890 --> 00:01:25,500 And what we want to do is quickly just fix our images. 20 00:01:26,000 --> 00:01:29,840 So before we didn't have the 2 x and 3 X versions of the swoosh. 21 00:01:29,900 --> 00:01:32,100 So it's using the same one for all three. 22 00:01:32,150 --> 00:01:35,520 And what I want to do is just drag those in here. 23 00:01:35,720 --> 00:01:41,930 So the 2 x and the 2 x slot in the 3 x 3 x slot and you probably didn't notice any visual changes but 24 00:01:41,930 --> 00:01:42,560 that's fine. 25 00:01:42,600 --> 00:01:44,730 It's it's in better condition now. 26 00:01:44,800 --> 00:01:49,830 So cool let's look at our app here. 27 00:01:50,190 --> 00:01:55,620 If you remember when we ran this on the seven plus things were not things were not the way they should 28 00:01:55,620 --> 00:01:56,010 be. 29 00:01:56,040 --> 00:02:00,510 Our app was looking a little bit ugly and our boss is a little bit unhappy because we're building things 30 00:02:00,510 --> 00:02:02,430 that aren't working on all devices. 31 00:02:02,430 --> 00:02:04,150 And this is a big problem to solve. 32 00:02:04,170 --> 00:02:12,330 You need to be able to have an app run on all device types and sizes because that's what a great user 33 00:02:12,330 --> 00:02:13,440 experience calls for. 34 00:02:13,550 --> 00:02:13,770 OK. 35 00:02:13,770 --> 00:02:18,650 And as you can see right here it's kind of boxing everything here in the iPhone 7 screen size. 36 00:02:18,810 --> 00:02:26,460 And so I want to talk about first in this video is how frames and layouts work inside of iOS and I'm 37 00:02:26,460 --> 00:02:32,250 not talking about Ottaway I'm talking about frames and positioning of views in their respective coordinate 38 00:02:32,250 --> 00:02:34,410 space and how things used to be. 39 00:02:34,470 --> 00:02:39,660 And it's important of understanding how things are going on under the hood because there are times when 40 00:02:39,660 --> 00:02:42,360 you will want to move things programmatically. 41 00:02:42,360 --> 00:02:44,460 And so let's look at our device here. 42 00:02:44,640 --> 00:02:46,410 OK we're looking on the iPad here. 43 00:02:46,410 --> 00:02:49,100 As you can see let's zoom out a little bit here. 44 00:02:49,320 --> 00:02:53,490 So this is an iPad and of course our app is definitely not properly supporting iPad. 45 00:02:53,490 --> 00:03:00,590 So what I want to do in this example here is I want to make in an outlet for the logo and the background. 46 00:03:00,780 --> 00:03:02,380 And I want to move them programmatically. 47 00:03:02,510 --> 00:03:02,820 OK. 48 00:03:02,820 --> 00:03:07,530 They show you what what you have control and power over and of course doing things programmatically 49 00:03:07,530 --> 00:03:09,090 gives you the ultimate control and power. 50 00:03:09,090 --> 00:03:11,550 This is where that pixel perfect programming comes in. 51 00:03:11,550 --> 00:03:14,730 I was telling you about if your designer demands it no matter what the cost. 52 00:03:14,760 --> 00:03:20,280 I don't care about the costs just give me pixel perfect because that's what a great designer would say. 53 00:03:20,280 --> 00:03:23,680 And of course all great apps have to be pixel perfect. 54 00:03:24,210 --> 00:03:27,070 No they need to look nice and work nice. 55 00:03:27,140 --> 00:03:29,010 In any case he's demanding pixel perfect. 56 00:03:29,100 --> 00:03:31,380 And so this is how you would do it with programmatic constraints. 57 00:03:31,440 --> 00:03:34,770 But first off we've got to make the outlets for the things that we want to manipulate. 58 00:03:35,130 --> 00:03:40,050 So I've opened up a click this two little wheels here the assistant editor and I've opened it up and 59 00:03:40,050 --> 00:03:45,930 all we're going to do is drag some outlets over so I'm going to click the swoosh icon and I get a control 60 00:03:45,930 --> 00:03:51,640 drag down here inside the View Controller and we're going to call this swoosh. 61 00:03:52,140 --> 00:03:56,440 And then I'm going to grab this background image and drag it in here as well too. 62 00:03:56,670 --> 00:04:00,660 And we're going to call this B.G. AMG for background image. 63 00:04:00,660 --> 00:04:02,370 I'll close the assistant editor. 64 00:04:02,610 --> 00:04:07,310 And what we're going to do now is we are going to go into our view control or swift. 65 00:04:07,530 --> 00:04:08,300 OK. 66 00:04:08,820 --> 00:04:15,780 Also you may notice me increasing and decreasing font size like so and I'm doing that with command plus 67 00:04:15,780 --> 00:04:21,480 and command minus the increases and decreases the font size in the X code nine previous versions did 68 00:04:21,480 --> 00:04:21,950 not allow. 69 00:04:21,960 --> 00:04:23,390 So it's pretty cool. 70 00:04:23,400 --> 00:04:24,840 So what do we have here. 71 00:04:24,840 --> 00:04:26,910 We've got to let's let's clean it up here. 72 00:04:26,970 --> 00:04:29,850 And these are referencing the views in our storyboard. 73 00:04:30,090 --> 00:04:34,850 And currently we are we do we do not have to lay out in action we've not set any constraints. 74 00:04:34,850 --> 00:04:35,930 We just have things sitting here. 75 00:04:35,940 --> 00:04:40,180 Otherwise our app would look really nice which it doesn't look that great on the iPad right now. 76 00:04:40,200 --> 00:04:45,960 So how do we do this how would we make a pixel perfect program how we'd Satta satisfied that anal designer 77 00:04:46,520 --> 00:04:49,590 you know requirements or how would we just have control over. 78 00:04:49,600 --> 00:04:50,760 We'll do that now. 79 00:04:50,910 --> 00:04:54,230 So in you did load what we're going to do is we're going to position things. 80 00:04:54,380 --> 00:04:54,990 OK. 81 00:04:55,260 --> 00:04:59,020 And so bear with me as we code the first few things because it may not make sense. 82 00:04:59,100 --> 00:05:02,540 So let's say we want the swoosh always to be in the center of the screen. 83 00:05:02,580 --> 00:05:08,400 So what we would have to do in times past or if we want full control and power is what we better yet 84 00:05:08,400 --> 00:05:16,700 say what we would have to do without constraints is something like this swoosh frame equal C-g recked 85 00:05:17,820 --> 00:05:21,320 and we'll do this one right here with the x y width and height. 86 00:05:21,540 --> 00:05:27,390 And so we want it in the center of the screen of the exposition right so X goes from left over to right. 87 00:05:27,390 --> 00:05:34,530 And so what we want to do is we want to say view frame size with divided by two minus. 88 00:05:34,520 --> 00:05:35,140 OK. 89 00:05:35,400 --> 00:05:41,000 Swoosh framed sized up with divided by two. 90 00:05:41,040 --> 00:05:42,260 I'll explain that in a second. 91 00:05:42,330 --> 00:05:47,880 And here we want it some type of position from the top so let's just say we want 50 pixels or 50 points 92 00:05:47,880 --> 00:05:50,980 from the top k cause X and Y. 93 00:05:51,090 --> 00:05:52,400 They start at the top left. 94 00:05:52,530 --> 00:05:53,210 OK. 95 00:05:53,550 --> 00:05:54,810 And then the width. 96 00:05:54,870 --> 00:05:56,790 Let's just keep it the same with that it already is. 97 00:05:56,790 --> 00:06:05,310 So we're going to say swoosh frame dot with are that size width and the height is going to be so whoosh 98 00:06:05,450 --> 00:06:09,720 that frame does size height OK. 99 00:06:10,150 --> 00:06:11,680 Yeah there's a lot going on here. 100 00:06:11,750 --> 00:06:14,340 So we'll make this a little bit smaller here. 101 00:06:14,780 --> 00:06:16,070 Oops I forgot the period. 102 00:06:16,080 --> 00:06:18,810 Here we go. 103 00:06:18,830 --> 00:06:21,770 So what's going on here so here's something very important. 104 00:06:21,770 --> 00:06:22,470 Understand. 105 00:06:22,610 --> 00:06:23,010 OK. 106 00:06:23,030 --> 00:06:27,650 The coordinate system in Iowa s it starts 00 starts at top left. 107 00:06:27,680 --> 00:06:34,720 And if you've ever done any type of basic algebra OK you'll know how to work with x and y coordinates 108 00:06:34,720 --> 00:06:35,310 systems. 109 00:06:35,330 --> 00:06:35,760 OK. 110 00:06:35,810 --> 00:06:38,520 If you're working in 3-D space or being X in a Y and Z. 111 00:06:38,690 --> 00:06:45,170 OK so X is horizontal so X is the horizontal axis that starts the top left and it goes from the left 112 00:06:45,170 --> 00:06:46,000 over to the right. 113 00:06:46,130 --> 00:06:46,940 OK. 114 00:06:47,030 --> 00:06:51,210 Starting at zero at the top left and why is vertical and starts from zero. 115 00:06:51,230 --> 00:06:53,220 Also at the top and then goes down. 116 00:06:53,270 --> 00:06:53,810 OK. 117 00:06:53,960 --> 00:06:57,020 So we're looking at the top left corner is 0 0. 118 00:06:57,200 --> 00:07:01,310 And you can move things around based on that coordinate system. 119 00:07:01,310 --> 00:07:01,940 OK. 120 00:07:02,180 --> 00:07:05,840 So a view what where does this coming from. 121 00:07:05,840 --> 00:07:11,600 Well this is the view that is inside of a view controller if we command click this and go to jump the 122 00:07:11,600 --> 00:07:12,480 definition. 123 00:07:12,680 --> 00:07:13,450 OK. 124 00:07:13,550 --> 00:07:16,460 And scroll down in here we've got a property called view. 125 00:07:16,600 --> 00:07:17,420 OK. 126 00:07:17,540 --> 00:07:20,140 And every you view control has a view. 127 00:07:20,210 --> 00:07:25,490 And so we're just accessing the view we're grabbing its frame all views have a frame OK which is their 128 00:07:25,490 --> 00:07:26,800 position and size. 129 00:07:26,890 --> 00:07:27,440 OK. 130 00:07:27,590 --> 00:07:30,580 So we're grabbing its frame and then we're grabbing the sides of that frame. 131 00:07:30,740 --> 00:07:35,150 OK we're not grabbing the position we're grabbing the size and of the width. 132 00:07:35,150 --> 00:07:38,720 And so what we're doing here is we're saying let's get the views with one view controller that's the 133 00:07:38,720 --> 00:07:40,340 entire width of the screen. 134 00:07:40,340 --> 00:07:46,150 OK so it will go to the entire width of the screen on an iPad that might be let's say 768 and two we're 135 00:07:46,160 --> 00:07:52,340 what we're doing is we're saying we want to take the with let's say an iPad 768 divided by two which 136 00:07:52,340 --> 00:07:54,030 puts it right in the center. 137 00:07:54,630 --> 00:07:58,770 So we're taking the entire view with because remember the coordinates start at the top left from 0 0 138 00:07:58,820 --> 00:08:01,170 all the way to the right which is the width. 139 00:08:01,180 --> 00:08:01,680 OK. 140 00:08:01,790 --> 00:08:04,610 So it goes from zero to the width of the view. 141 00:08:04,970 --> 00:08:06,830 And we're dividing it. 142 00:08:06,950 --> 00:08:10,490 We're dividing it by two so we're getting it right in the middle so we take that with we divide it by 143 00:08:10,490 --> 00:08:12,310 two and that's the center of the screen. 144 00:08:12,650 --> 00:08:15,760 And then we have this extra math here for a very specific reason. 145 00:08:15,800 --> 00:08:19,770 And here's the reason why I just told you that all of use. 146 00:08:19,820 --> 00:08:22,270 OK the frames they start at the top left. 147 00:08:22,430 --> 00:08:29,330 So if we look at our our image here see the swoosh OK its own frame actually doesn't start here in the 148 00:08:29,330 --> 00:08:29,780 middle. 149 00:08:29,780 --> 00:08:32,700 You might think that it starts here in the middle the X and the y but it doesn't. 150 00:08:32,840 --> 00:08:35,140 It starts here at the top left zero and zero. 151 00:08:35,360 --> 00:08:40,430 And so if I didn't do this extra math here this swoosh wouldn't be perfectly centered. 152 00:08:40,430 --> 00:08:43,760 What would happen is this swoosh would be right here in the middle. 153 00:08:43,760 --> 00:08:45,810 In fact it's probably better to show you. 154 00:08:46,250 --> 00:08:50,990 So what I'm going to do is I get to go to my storyboard real quick and change the background color of 155 00:08:50,990 --> 00:08:56,160 the view just to a different color so when we're debugging it's more visible. 156 00:08:56,190 --> 00:09:00,700 The problems that we're going to encounter and so back here in view controller does Swift. 157 00:09:00,740 --> 00:09:06,380 So what I remember how I said we wanted by putting this divided by to the frame with the width of the 158 00:09:06,380 --> 00:09:08,650 entire of you divided by two is going to put something in the middle. 159 00:09:08,840 --> 00:09:11,710 Well let's take off the second bit of math here. 160 00:09:12,120 --> 00:09:12,650 OK. 161 00:09:12,680 --> 00:09:16,370 This the minus switch that framed it to X at. 162 00:09:16,430 --> 00:09:17,600 Let's take that off. 163 00:09:17,610 --> 00:09:22,310 What I want to do is I just want to run it and show you what happens when we write this code here. 164 00:09:22,530 --> 00:09:26,810 The view framed a size that with the entire width of the view divided by two. 165 00:09:26,810 --> 00:09:33,380 So notice how it's putting the swoosh icon like the starting of it is in the middle but the middle of 166 00:09:33,380 --> 00:09:34,740 it should be in the middle right. 167 00:09:34,760 --> 00:09:37,190 We want the middle of the image to be in the middle of the screen. 168 00:09:37,210 --> 00:09:39,510 But it's the starting of the image it's in the middle of the screen. 169 00:09:39,710 --> 00:09:43,220 And that's because that's how we coded it because everything starts at 0 0 0. 170 00:09:43,450 --> 00:09:45,540 OK so if I put this back. 171 00:09:45,710 --> 00:09:52,160 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,160 --> 00:09:52,970 by two. 173 00:09:52,970 --> 00:09:57,440 OK so if I take this divided by two it's going to give me those coordinates here in the middle and that's 174 00:09:57,440 --> 00:10:01,460 what we want to put inside of our middle of the screen. 175 00:10:01,520 --> 00:10:03,220 So we take the middle. 176 00:10:03,500 --> 00:10:06,100 We divide it into the main view. 177 00:10:06,380 --> 00:10:12,490 And then we divide the image into and then we subtract that that Delta. 178 00:10:12,530 --> 00:10:19,820 We have to subtract the width of the swooshed about about two out of the width of the image or the view 179 00:10:19,820 --> 00:10:20,510 divided by two. 180 00:10:20,510 --> 00:10:22,000 And that's what's going to put it in the middle. 181 00:10:22,010 --> 00:10:26,880 So if I run it again and you're like oh this is too much math is too confusing. 182 00:10:26,930 --> 00:10:30,010 Well it'll take some time but it's ok. 183 00:10:30,200 --> 00:10:32,960 Notice how it's exactly in the middle of the screen right where we want it. 184 00:10:33,080 --> 00:10:33,350 OK. 185 00:10:33,350 --> 00:10:35,250 And the math is very simple. 186 00:10:35,300 --> 00:10:36,520 You've got to wrap your head around it. 187 00:10:36,510 --> 00:10:40,520 So what I want you to do don't understand this and I want you to look at this code and look at it some 188 00:10:40,520 --> 00:10:45,760 more to understand exactly what is happening I am going to explain it one more time. 189 00:10:45,920 --> 00:10:46,530 OK. 190 00:10:46,730 --> 00:10:48,520 As you can see on the screen here. 191 00:10:48,950 --> 00:10:55,040 OK let's let's say the standard i-Pad with which it is is 768 768 points or pixels. 192 00:10:55,040 --> 00:10:58,340 OK we're not talking about retina display just the regular. 193 00:10:58,520 --> 00:11:02,380 So from the left to the right is 768 pixels. 194 00:11:02,540 --> 00:11:03,830 Well how do we get the center of that. 195 00:11:03,950 --> 00:11:07,150 Well we take 768 or whatever the view with this. 196 00:11:07,190 --> 00:11:13,330 So this green view here view this view you see here is this green view you see here that is 768 points 197 00:11:13,330 --> 00:11:14,840 we're taking divided by two. 198 00:11:14,920 --> 00:11:18,080 We're saying we want our squish logo to be right here in the middle. 199 00:11:18,520 --> 00:11:24,040 But remember when we put it there it puts the beginning of the swish logo there because X and Y start 200 00:11:24,040 --> 00:11:25,420 at the top left. 201 00:11:25,420 --> 00:11:32,050 So what we do then is we find the center point of the swoosh image OK which is its own with divided 202 00:11:32,050 --> 00:11:37,780 by two and we subtract that value from the 768 divided by two which puts it here. 203 00:11:37,780 --> 00:11:42,330 Now again if that's still confusing you'll get over time because that's how you would center things 204 00:11:42,400 --> 00:11:44,220 if you're doing it programmatically. 205 00:11:44,230 --> 00:11:45,050 OK. 206 00:11:45,160 --> 00:11:49,210 And then we just set the width and the height to the existing width and height of the swoosh image so 207 00:11:49,210 --> 00:11:50,740 it stays the same. 208 00:11:50,740 --> 00:11:54,330 One more thing that we want to do is we want to get this background image to fill the whole screen. 209 00:11:54,340 --> 00:11:55,740 This was a little bit easier. 210 00:11:55,990 --> 00:12:04,730 All we have to do with the image is a B.G. image frame equals view frame. 211 00:12:04,770 --> 00:12:11,260 OK so what we're saying is we want the entire frame which is what a frame consists of. 212 00:12:11,540 --> 00:12:14,050 It consists of a position and an origin. 213 00:12:14,150 --> 00:12:15,000 OK. 214 00:12:15,390 --> 00:12:17,720 Or excuse me a position and the size so fine. 215 00:12:17,930 --> 00:12:23,720 If I said B.G. image up frame there's going to be a dot origin. 216 00:12:24,230 --> 00:12:25,280 OK that's the position. 217 00:12:25,310 --> 00:12:27,230 Origin X and origin y. 218 00:12:27,260 --> 00:12:30,230 So every frame has an x and y position or an origin. 219 00:12:30,320 --> 00:12:31,600 And it also has a size. 220 00:12:31,670 --> 00:12:35,620 OK so it has a size that width and the size that height. 221 00:12:35,630 --> 00:12:41,640 So again every frame has a position and it has a size. 222 00:12:41,660 --> 00:12:45,920 OK so what we're doing here is we're saying we want the image of the background to always be the same 223 00:12:46,220 --> 00:12:49,240 size and position as the view itself. 224 00:12:49,250 --> 00:12:50,200 The green image. 225 00:12:50,300 --> 00:12:52,160 OK so let's go ahead and run it. 226 00:12:54,710 --> 00:12:58,930 We should see the image filled the whole entire screen which it does. 227 00:12:58,940 --> 00:13:04,120 Are you starting to see how this works so can you imagine everything on your entire screen. 228 00:13:04,130 --> 00:13:06,790 You'd have to program like this you have to set a position in a size. 229 00:13:06,790 --> 00:13:08,480 And we used to have to do these things. 230 00:13:08,660 --> 00:13:14,210 So we set a position the size of this and a position and size of this and we can make things correspond 231 00:13:14,210 --> 00:13:20,300 to other images or other components I could say you know put this go all in label just below the swoosh 232 00:13:20,300 --> 00:13:22,400 label 50 points below that we could do all that. 233 00:13:22,430 --> 00:13:23,900 And this is what we have to do. 234 00:13:23,930 --> 00:13:27,590 And so like yeah we've programmed the Bakra maybe it's not so bad and we programmed the logo but look 235 00:13:27,590 --> 00:13:27,950 at this. 236 00:13:27,950 --> 00:13:30,540 If I do command right to rotate. 237 00:13:31,150 --> 00:13:31,650 OK. 238 00:13:31,730 --> 00:13:32,600 It's broken right. 239 00:13:32,600 --> 00:13:38,120 We have green on here again because what happened is the size of the view is changed it's now no longer 240 00:13:38,120 --> 00:13:40,200 768 flex 10:24. 241 00:13:40,620 --> 00:13:40,950 OK. 242 00:13:40,970 --> 00:13:46,640 And so what we would have to do now is write code to get our frames and positions of the swoosh and 243 00:13:46,640 --> 00:13:47,750 everything to update. 244 00:13:47,750 --> 00:13:51,680 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,680 --> 00:13:57,170 rotated here and this is all manual and again this is how you do pixel perfect programming because you 246 00:13:57,170 --> 00:14:02,560 can move things exactly where they need to be but there's a reason why we've moved on to auto layout. 247 00:14:02,570 --> 00:14:04,100 Hence the word auto. 248 00:14:04,250 --> 00:14:07,770 OK where you can actually let IO west. 249 00:14:07,940 --> 00:14:13,190 OK you can let it do the work for you and it may not be pixel perfect but it's very close. 250 00:14:13,190 --> 00:14:19,350 And that's what Apple recommends that you use and you can get really close with the pixel perfect thing. 251 00:14:19,370 --> 00:14:24,220 I'm not trying to say you can't but you know guaranteed pixel perfect isn't. 252 00:14:24,320 --> 00:14:26,300 You can't do that with Attilio. 253 00:14:26,330 --> 00:14:31,840 It's just it's not it's not possible or if it is possible it's insane amounts of work even then. 254 00:14:31,840 --> 00:14:33,960 So what have we done. 255 00:14:33,990 --> 00:14:39,260 OK well we've moved things programmatically we've moved the frames we've talked about frames OK which 256 00:14:39,260 --> 00:14:43,620 consists of a origin or a position and a size. 257 00:14:43,730 --> 00:14:49,490 OK and of course you can have frames within frames so our swoosh for instance it lives on top of our 258 00:14:49,490 --> 00:14:50,170 view. 259 00:14:50,210 --> 00:14:50,510 OK. 260 00:14:50,540 --> 00:14:57,500 The green view that you saw or swooshes inside of that so the the parent frame for the swoosh starts 261 00:14:57,500 --> 00:14:59,550 at the top left 0 0. 262 00:14:59,570 --> 00:15:04,620 If I added let's say another image within an image which is kind of silly and you wouldn't do that. 263 00:15:04,940 --> 00:15:10,970 But then the new sub-Q or sub image would inherit the parent coordinates of this image here. 264 00:15:11,090 --> 00:15:11,560 OK. 265 00:15:11,690 --> 00:15:18,160 And wherever that starts and so a views frame is always relative to its parent position. 266 00:15:18,310 --> 00:15:18,820 OK. 267 00:15:18,920 --> 00:15:21,010 It's always relative to its parent position. 268 00:15:21,320 --> 00:15:25,650 So a lot is going on here even though there's only a few lines of code here we ran some math we positioned 269 00:15:25,650 --> 00:15:26,150 some things. 270 00:15:26,150 --> 00:15:29,840 This is what you have to do if you want to put things on the screen pixel perfect as you got to move 271 00:15:29,840 --> 00:15:30,970 things programmatically. 272 00:15:31,010 --> 00:15:31,860 A lot of work. 273 00:15:31,910 --> 00:15:37,820 Nobody typically does this except maybe really old code bases so just showing you here and this is not 274 00:15:37,820 --> 00:15:39,560 irrelevant it's completely irrelevant. 275 00:15:39,560 --> 00:15:40,930 So you need to know these things. 276 00:15:41,030 --> 00:15:45,680 But we're going to call this video done and in the next video I'm going to show you a much better way 277 00:15:46,100 --> 00:15:48,510 which is introducing you to auto layout and constraint. 278 00:15:48,510 --> 00:15:49,580 So that's it for now. 279 00:15:49,580 --> 00:15:51,930 Mark Price a dev slopes dot com. 280 00:15:51,980 --> 00:15:57,120 I know your brain is probably hurting but as we keep going forward it won't see you later.