1 00:00:00,510 --> 00:00:02,540 So I come back in this lesson. 2 00:00:02,540 --> 00:00:09,420 You have to essentially rebuild a you toy that I have provided you with an Interface Builder. 3 00:00:09,470 --> 00:00:14,660 Imagine this is an exercise of your working with a designer and they have come up with the design for 4 00:00:14,660 --> 00:00:20,530 the interface of your app and you have to essentially implement that inside an actual application. 5 00:00:20,610 --> 00:00:26,240 So the design that you have received is this one which is a very simple you know log in and sign an 6 00:00:26,240 --> 00:00:27,090 interface. 7 00:00:27,350 --> 00:00:32,910 It has a two different options for what the user would like to do whether they want to log in or register. 8 00:00:33,080 --> 00:00:35,620 That's obviously a segmented control. 9 00:00:35,630 --> 00:00:38,530 Then there is an email field and a password field. 10 00:00:38,540 --> 00:00:45,680 Assuming they are on the log in most days they forgot your password by then there is a little show characters 11 00:00:45,700 --> 00:00:50,060 by then out there that you can press they can see the password they're entering. 12 00:00:50,060 --> 00:00:55,400 And of course there is an actual log in button or if you're pressed on the register they would go to 13 00:00:55,400 --> 00:00:56,370 the other side of it. 14 00:00:56,390 --> 00:00:59,410 But for now we're not really getting worried about that. 15 00:00:59,540 --> 00:01:02,130 We're only going to deal with the log inside of it. 16 00:01:02,390 --> 00:01:07,030 So take your time try to do it entirely in Interface Builder. 17 00:01:07,030 --> 00:01:11,960 And I'm going to pause the video for a few seconds and then I'm going to get a song that I need on my 18 00:01:11,960 --> 00:01:12,510 own as the 19 00:01:17,490 --> 00:01:17,950 OK. 20 00:01:18,030 --> 00:01:21,980 So I'm going to go to school then get started with this project as well. 21 00:01:21,990 --> 00:01:24,830 I'm going to call it like you or I 22 00:01:27,610 --> 00:01:32,880 and it might like you or at the moment I go to a storyboard I'm actually going to do a little trick 23 00:01:33,160 --> 00:01:36,800 and that is I'm going to add a new View Controller. 24 00:01:37,370 --> 00:01:43,150 View Controller of and it adds my image to this project. 25 00:01:43,260 --> 00:01:48,330 So this particular reference that you have I'm going to add it to the project. 26 00:01:48,510 --> 00:01:49,230 Copy it. 27 00:01:49,230 --> 00:01:50,440 Why not. 28 00:01:50,490 --> 00:01:56,110 And then I'm going to add a large UI image view to this dummy View Controller. 29 00:01:56,130 --> 00:01:58,470 The one I'm not going to use for anything. 30 00:02:00,170 --> 00:02:06,200 And then I'm going to go ahead and say that is going to have my image so I can actually see everything 31 00:02:06,260 --> 00:02:13,370 right next to where I'm trying to design this not only helps me with threats fencing it also helps me 32 00:02:13,370 --> 00:02:19,550 with the colors and everything else something to keep in mind is that this little bar on the top it's 33 00:02:19,550 --> 00:02:25,940 actually a part of the you eye navigation controller and it gets built essentially automatically. 34 00:02:26,060 --> 00:02:29,650 But for the sake of our exercise I'm going to make it manually. 35 00:02:29,840 --> 00:02:34,860 So I'm going to say Give me a new I view added here. 36 00:02:36,720 --> 00:02:40,580 And the height for it is exactly 44 pixels. 37 00:02:40,840 --> 00:02:47,880 And I'm going to say Give me a background color custom color an eyedropper gets from here. 38 00:02:48,030 --> 00:02:55,200 So that part is taken off that next thing is I'm going to have to add a little text up there. 39 00:02:55,260 --> 00:03:00,660 So that's a label and that label I'm going to place it up there. 40 00:03:00,960 --> 00:03:09,420 It is in white color and it does say sign me in. 41 00:03:09,630 --> 00:03:14,710 Now the next thing that you want to know is or you want to do is you want to make sure that everything 42 00:03:14,710 --> 00:03:16,930 you know has proper constraints. 43 00:03:17,100 --> 00:03:20,510 So we set the height has to be always 44. 44 00:03:20,700 --> 00:03:23,790 So a height constraint of 44. 45 00:03:24,090 --> 00:03:25,720 That's the first thing. 46 00:03:25,860 --> 00:03:34,190 Then I'm going to have a leading constraint and a trailing constraint and a top constraint. 47 00:03:34,230 --> 00:03:39,840 So so far I've made sure that this little view on the top will always stick to the top of my view. 48 00:03:39,870 --> 00:03:46,020 So if I go with different orientation Now if you automatically adjust itself exactly what I want it 49 00:03:46,020 --> 00:03:46,760 to be. 50 00:03:46,860 --> 00:03:48,270 So that's good. 51 00:03:48,270 --> 00:03:55,530 The next thing I want to do is I want to say this little text signing in make sure it is always vertically 52 00:03:56,070 --> 00:03:58,880 and horizontally centered to this. 53 00:03:59,040 --> 00:04:04,500 So again if I change orientation the signing will stick up there which is exactly what they wanted to 54 00:04:04,500 --> 00:04:05,520 have. 55 00:04:05,520 --> 00:04:08,070 Now let's go ahead and that this little box. 56 00:04:08,070 --> 00:04:15,030 So for that I'm going to go ahead and say Give me another view and this you my view I'm going to place 57 00:04:15,030 --> 00:04:16,510 it somewhere like here. 58 00:04:16,530 --> 00:04:22,950 I know the starting point is 64 simply because there's 20 pixels or 20 units for the starting spot and 59 00:04:22,950 --> 00:04:25,360 then 44 for the Orange Box. 60 00:04:25,800 --> 00:04:31,860 And then I'm going to bring it all the way to here and apparently it's height is 128. 61 00:04:31,860 --> 00:04:41,730 I have designed this myself and I always stick to this particular numbers 30 to 44 64 96 128. 62 00:04:41,730 --> 00:04:43,880 All the better mathematical numbers. 63 00:04:43,920 --> 00:04:50,380 So there you have a little tricks that you know the numbers are coming exactly from a certain place. 64 00:04:50,400 --> 00:04:55,560 The next thing is I'm going to add a label on display but I'm going to place it right on the center 65 00:04:56,130 --> 00:05:00,640 saying what would you like to do. 66 00:05:00,720 --> 00:05:04,770 What would you like to do. 67 00:05:04,770 --> 00:05:08,130 If I can actually spell things what would you like to do. 68 00:05:08,160 --> 00:05:10,800 Maybe a little smaller not that much. 69 00:05:10,800 --> 00:05:19,920 A little larger it is on the center here then I you segment segmented control segment that control and 70 00:05:19,950 --> 00:05:23,000 then I'm going to place my segment the control right in the center. 71 00:05:23,000 --> 00:05:28,050 It's a little bit longer from the looks of it so maybe something like that. 72 00:05:28,340 --> 00:05:34,830 And the first one says loggin and the second one says register. 73 00:05:35,750 --> 00:05:43,020 And then the tenth caller if it is not blue I'm going to go and say that is the card that I want. 74 00:05:43,030 --> 00:05:44,740 So log in register. 75 00:05:44,780 --> 00:05:46,150 Everything is working. 76 00:05:46,460 --> 00:05:53,640 Then I'll duplicate this bring it down there make it smaller maybe Iran. 77 00:05:53,660 --> 00:05:56,490 That's not that much maybe 10. 78 00:05:56,790 --> 00:06:04,100 And it says like out and of course that takes color it is a game orange. 79 00:06:04,100 --> 00:06:06,090 So now you are. 80 00:06:06,150 --> 00:06:11,690 This looks OK but obviously the moment we change orientation or anything everything is going to break. 81 00:06:11,690 --> 00:06:13,830 So I have to actually work that out. 82 00:06:13,850 --> 00:06:19,340 So something to keep in mind is that whenever you work on Interface Builder you kind of know why you 83 00:06:19,340 --> 00:06:21,440 are doing things in a certain way. 84 00:06:21,500 --> 00:06:27,560 You either have your designer sitting next to you or if you're the designer yourself you know for instance 85 00:06:27,560 --> 00:06:32,190 why this is happening in this particular way or why is it placed in there. 86 00:06:32,280 --> 00:06:39,260 And for this project I can tell you that this project is never meant to be used in landscape mode is 87 00:06:39,260 --> 00:06:41,300 always going to be an apostate. 88 00:06:41,510 --> 00:06:47,390 And the only thing you have to really worry about is having different devices so it's never meant to 89 00:06:47,390 --> 00:06:51,070 be working on and on essentially a horizontal view. 90 00:06:51,080 --> 00:06:57,390 So because of that I'm going to make the height of this you have to be a constant value. 91 00:06:57,470 --> 00:07:06,260 So I'm going to want to control say height is always constrained to be 128 and then it's a living space. 92 00:07:06,260 --> 00:07:13,820 It's got a trailing space and it's got a topless face against the one above it so vertical spacing. 93 00:07:14,030 --> 00:07:20,690 And by now it's always there even though it wasn't our intention it is still working for other orientations 94 00:07:20,720 --> 00:07:21,430 as well. 95 00:07:21,590 --> 00:07:28,820 It's just that in in the landscape orientations for a smaller device says one hundred twenty eight pixels 96 00:07:28,820 --> 00:07:36,070 would actually be a very very large space which is not a good idea but for us like I said I know there's 97 00:07:36,070 --> 00:07:40,310 is not going to be in the landscape so I'm OK with that. 98 00:07:40,310 --> 00:07:44,420 Now there's another thing in your reach I don't know if you can notice it there's a little bit of a 99 00:07:44,420 --> 00:07:49,850 shadow down there and that's something we're going to study in quite a few sections from now. 100 00:07:49,850 --> 00:07:55,350 But if you really want to you know get it done right now I could actually go ahead and say Give me another 101 00:07:55,790 --> 00:08:04,800 view inside this view so I could say you I view give me another one inside this new you I view. 102 00:08:04,800 --> 00:08:08,870 It actually has a different light on color light gray. 103 00:08:08,910 --> 00:08:10,230 It has. 104 00:08:10,230 --> 00:08:13,820 It's actually it's like at the very bottom right there. 105 00:08:14,280 --> 00:08:14,780 It is. 106 00:08:14,790 --> 00:08:18,500 There is only one pixel in the height. 107 00:08:18,770 --> 00:08:23,000 So something like that and it is at one hundred twenty seven. 108 00:08:23,010 --> 00:08:27,810 The next thing I have to do I have to constrain this one as well so I'm going to say view it's height 109 00:08:27,870 --> 00:08:30,640 is always going to be one pixel. 110 00:08:30,930 --> 00:08:37,830 It has a leading space to it so per view a trailing space on a bottom a space with superb view. 111 00:08:37,950 --> 00:08:43,340 So it's always a start at the very bottom of this container essentially. 112 00:08:43,470 --> 00:08:48,230 If you go to the other end station we can easily see that that's happening properly. 113 00:08:48,390 --> 00:08:53,670 Then just go ahead and say these other objects we also have to plan them. 114 00:08:53,670 --> 00:08:57,980 So the first thing is I'm going to say the label that says what would you like to do. 115 00:08:58,110 --> 00:09:05,630 It has a topis space through its container and it is always horizontally Center. 116 00:09:05,790 --> 00:09:11,130 I'm not going to set any other constraints simply because I want it to be based on the intrinsic size 117 00:09:11,190 --> 00:09:12,410 of the text. 118 00:09:12,420 --> 00:09:15,970 So if we go to another orientation it's still right in the center. 119 00:09:16,050 --> 00:09:17,940 If we come back it's perfectly working. 120 00:09:17,950 --> 00:09:24,240 The reason I keep testing between different orientations even though I'm not going to use it is because 121 00:09:24,240 --> 00:09:29,700 that's kind of the best test you can do as you go between landscape and portrait if it works in both 122 00:09:29,700 --> 00:09:30,310 of them. 123 00:09:30,390 --> 00:09:33,850 It simply means it's going to work on other devices as well. 124 00:09:33,990 --> 00:09:36,300 So that's essentially why I keep testing it. 125 00:09:36,300 --> 00:09:38,510 It's like the ultimate test. 126 00:09:38,610 --> 00:09:44,760 Now the next thing I'm going to do I'm going to say there is a vertical spacing between these two between 127 00:09:44,770 --> 00:09:51,410 the segmented control and that label we have on is all these horizontally centered. 128 00:09:51,570 --> 00:09:58,380 So the moment I did that it essentially went ahead and changed the size or the vet of my segment that 129 00:09:58,380 --> 00:09:58,920 control. 130 00:09:58,920 --> 00:10:03,640 I tried to make it based on the content size or the intrinsic size. 131 00:10:03,810 --> 00:10:10,730 And that's not what I want I want to have a fixed rate of let's say one hundred ninety six and what 132 00:10:10,740 --> 00:10:14,770 I'm going to do is I'm going to say it is also a constraint. 133 00:10:14,970 --> 00:10:17,990 Let's update that see what it does for me. 134 00:10:18,000 --> 00:10:20,800 So it's in the right space from the label up there. 135 00:10:20,820 --> 00:10:28,360 It's always horizontally centered and is always at the same Vitt Maybe the weight is too high maybe 136 00:10:28,380 --> 00:10:30,910 100 5:51 wasn't the right number. 137 00:10:31,020 --> 00:10:33,020 Maybe 156 would do. 138 00:10:33,060 --> 00:10:36,420 And if I go to a different orientation everything is working. 139 00:10:36,450 --> 00:10:43,200 Finally the log out which is going to have a vertical spacing and is always centered on horizontally 140 00:10:43,200 --> 00:10:45,740 center or horizontally centered. 141 00:10:46,020 --> 00:10:49,440 So that's about the upper part is not taking care of. 142 00:10:49,440 --> 00:10:52,590 Let's go ahead and deal with this little section in here. 143 00:10:52,590 --> 00:10:59,200 I'm going to have to have this little text email on the box field then password on the text. 144 00:10:59,460 --> 00:11:01,020 And that little one down there. 145 00:11:01,190 --> 00:11:03,090 There are different ways you could do it. 146 00:11:03,090 --> 00:11:08,610 You could either put all of them inside a stack fury could do them manually. 147 00:11:08,610 --> 00:11:13,380 I think what I'm going to do is I'm going to have a container for this entire thing. 148 00:11:13,620 --> 00:11:18,470 And then inside the container I'm going to assign them let's see how we're going to do that. 149 00:11:18,480 --> 00:11:24,520 I'm going to go ahead and say Give me your eye view and this you have you I'm going to play see it. 150 00:11:24,660 --> 00:11:26,790 Twenty pixels margin here. 151 00:11:27,800 --> 00:11:29,660 I get all the way there. 152 00:11:30,050 --> 00:11:36,320 Which is another 20 picks 335 and make it much lower here. 153 00:11:36,420 --> 00:11:37,560 Somebody like that. 154 00:11:37,560 --> 00:11:41,200 That's essentially going to be the container for all of these things. 155 00:11:41,380 --> 00:11:47,800 I could temporarily give it a different color say it has a very distinctive color. 156 00:11:48,150 --> 00:11:52,260 So that is going to be the box that contains all of these guys. 157 00:11:52,290 --> 00:11:59,490 And because of that I'm going to say well you have a vertical is facing you have a leading face you 158 00:11:59,490 --> 00:12:01,680 have a trailing space. 159 00:12:01,710 --> 00:12:03,950 And let's give it a height and the height of it. 160 00:12:03,960 --> 00:12:06,440 I'd like to give with a very specific number. 161 00:12:06,440 --> 00:12:08,730 Two hundred thirty two would be a very good number. 162 00:12:08,730 --> 00:12:14,750 So something like that that obviously you can easily change that later on if if you didn't like it. 163 00:12:14,820 --> 00:12:20,100 So just go ahead and yet on the objects that we have first of all we have this button which is a very 164 00:12:20,100 --> 00:12:20,860 easy one. 165 00:12:21,150 --> 00:12:28,860 So I'm going to say by then this pardon is going to have a height of 40 for the back end of it is the 166 00:12:28,920 --> 00:12:31,260 orange back on that we have for this. 167 00:12:31,350 --> 00:12:38,970 That takes care of it is going to be why it's on its long get in which is very simple. 168 00:12:39,270 --> 00:12:43,100 And then what it does have is at the very bottom in here. 169 00:12:43,260 --> 00:12:50,710 It's much toward longer and I'm going to say leading space trailing a space. 170 00:12:51,120 --> 00:12:57,600 It has a height and against its purview it has a body mass spacing. 171 00:12:57,840 --> 00:13:02,610 So it is stuck to the left right and bottom as got the right height. 172 00:13:02,610 --> 00:13:05,450 Now let me show you a problem that happens in this. 173 00:13:05,470 --> 00:13:12,840 This is a little difficult to try to keep in mind but try to imagine the proportions that you have for 174 00:13:12,840 --> 00:13:14,710 the for the pink box. 175 00:13:14,750 --> 00:13:21,690 Now if I change my view to an iPhone 8 plus that proportion is clearly changed. 176 00:13:21,690 --> 00:13:24,530 Now the pink boxes actually avoid them. 177 00:13:24,810 --> 00:13:32,720 Simply because it's a very it is maintaining itself based on the leading and trailing Esmay says. 178 00:13:32,860 --> 00:13:39,720 But his height is a constant value is 232 irrelevant of the height of the view. 179 00:13:39,930 --> 00:13:46,710 And maybe that's not the best case in here maybe we should maintain it to be always at the same size. 180 00:13:46,710 --> 00:13:52,260 So what I'm going to do is I'm actually going to go ahead and select this height constraint. 181 00:13:52,400 --> 00:13:55,600 Finding it is which not one get deleted. 182 00:13:55,710 --> 00:13:57,610 Say we don't have that height. 183 00:13:57,680 --> 00:14:00,130 What we do have is an aspect ratio. 184 00:14:00,270 --> 00:14:10,090 So if my main view is 667 and this guy is 232 let's say aspect ratio of. 185 00:14:10,600 --> 00:14:12,060 And here are the values 186 00:14:14,510 --> 00:14:25,880 height to a height and the value is 232 to 667 and that's going to maintain the same proportions on 187 00:14:25,940 --> 00:14:31,070 all different devices which is kind of you know what I would like to see. 188 00:14:31,070 --> 00:14:37,340 Keep in mind that if you have a very very you know sharp eye you will notice that the proportions are 189 00:14:37,340 --> 00:14:38,600 still changing. 190 00:14:38,840 --> 00:14:46,270 And that's because 20 pixels that we have given here from the left and right is changing itself. 191 00:14:46,280 --> 00:14:52,190 So if you want it to be absolutely specific about maintaining the proportions then you shouldn't use 192 00:14:52,190 --> 00:14:54,720 Konstanz values for any of them. 193 00:14:54,800 --> 00:14:59,780 So I'm not going to change now but if you want it you would actually make the weight of these folks 194 00:15:00,320 --> 00:15:02,820 proportional to the support of you as well. 195 00:15:03,140 --> 00:15:08,990 So the next thing you want to add are these five or six different elements so one of them is a label 196 00:15:10,640 --> 00:15:13,640 which I'm going to have around here. 197 00:15:14,120 --> 00:15:16,140 Much smaller. 198 00:15:16,910 --> 00:15:21,240 Something like that I says e-mail. 199 00:15:21,600 --> 00:15:25,600 And he's got an asterisk next to it like that. 200 00:15:26,360 --> 00:15:30,780 And then I'm going to add a text field so that takes feat. 201 00:15:30,830 --> 00:15:32,260 I'm going to place it here. 202 00:15:32,270 --> 00:15:33,580 Exactly. 203 00:15:33,620 --> 00:15:36,940 I'm going to say it doesn't have borders. 204 00:15:37,410 --> 00:15:44,540 There's a line center placeholders is e-mail address something like that. 205 00:15:44,730 --> 00:15:54,020 And it's not gone is actually a group table view back on which is kind of a very bright light gray and 206 00:15:54,050 --> 00:16:00,690 its height is actually going to be 32 and I'm going to drive it all the way to here. 207 00:16:01,800 --> 00:16:02,660 Perfect. 208 00:16:02,670 --> 00:16:07,010 Now I know that is a little bit of an affair bordered on that. 209 00:16:07,060 --> 00:16:12,460 That's part of you have to kind of leave it for future because that has to be added programmatically 210 00:16:12,460 --> 00:16:18,930 and something we haven't really studied yet from visual perspective I think the e-mail has to be a little 211 00:16:18,930 --> 00:16:21,110 bit smaller maybe like that. 212 00:16:21,120 --> 00:16:25,880 And I think its color is actually dark gray is not really black. 213 00:16:26,100 --> 00:16:34,860 So something like that's let me make my bank background the false so we can judge them easier. 214 00:16:35,050 --> 00:16:35,390 OK. 215 00:16:35,400 --> 00:16:36,710 So everything is wrong. 216 00:16:36,840 --> 00:16:39,770 So E-Man actually has to be black. 217 00:16:40,070 --> 00:16:47,840 So have one and my email has to be light gray my text the it has to be light. 218 00:16:48,810 --> 00:16:59,000 Or that's too much as are the custom color then maybe about actually I could get the exact color OK. 219 00:16:59,070 --> 00:17:09,570 So that's about the now I'm going to go ahead and say let's duplicate these two put them in here. 220 00:17:10,470 --> 00:17:13,090 And these guys they become Paswan 221 00:17:15,820 --> 00:17:16,740 Asterix. 222 00:17:16,940 --> 00:17:24,470 And within that I'm just going to start with those thoughts are I. 223 00:17:24,500 --> 00:17:26,620 So that part is taken care of. 224 00:17:26,870 --> 00:17:40,010 We have one more label down in here that label it says for got your password and it's color is actually 225 00:17:40,010 --> 00:17:45,370 different so I'm going to actually give it the color of this art which is some sort of an orange is 226 00:17:45,380 --> 00:17:47,670 largish something like that. 227 00:17:48,680 --> 00:17:49,480 OK. 228 00:17:49,570 --> 00:17:56,350 We also have this little icon in the design there was an actual icon that is an image that has been 229 00:17:56,350 --> 00:17:57,400 supplied. 230 00:17:57,440 --> 00:17:58,720 We don't have that here. 231 00:17:58,720 --> 00:18:06,220 So then when it is I'm going to say instead give me a label on that the is a start to the far right 232 00:18:06,220 --> 00:18:15,070 corner of my text field and inside it on my machine you can get control command a space and load up 233 00:18:15,070 --> 00:18:19,240 these emojis and I'm going to search for an R here. 234 00:18:19,630 --> 00:18:21,580 And I could actually use this one. 235 00:18:21,580 --> 00:18:22,800 Why not. 236 00:18:22,810 --> 00:18:26,560 So it looks nice enough OK. 237 00:18:26,610 --> 00:18:28,030 So that is the idea. 238 00:18:28,070 --> 00:18:34,400 I'm going to use for here again when you're working with an actual actual design you will receive the 239 00:18:34,400 --> 00:18:35,880 artwork for this year. 240 00:18:35,900 --> 00:18:43,680 I don't have those and that's why at some places I'm just trying to simplify the process for myself. 241 00:18:43,700 --> 00:18:45,460 Now we have all of these. 242 00:18:45,470 --> 00:18:49,310 The problem obviously is that none of them is constrained properly. 243 00:18:49,310 --> 00:18:51,930 So let's go ahead and do all of these. 244 00:18:51,950 --> 00:18:56,110 One other time I'm going to say let's say they all have the right height. 245 00:18:56,150 --> 00:19:05,360 So BORSHOFF takes will maintain their height and it has a leading space tweets container and it's Frayling 246 00:19:05,360 --> 00:19:08,470 in space and they're both exactly the same thing. 247 00:19:08,480 --> 00:19:18,900 If the leading is eight the trailing is eight as the leading 8 trailing it. 248 00:19:19,340 --> 00:19:21,490 So that's about that. 249 00:19:21,650 --> 00:19:27,920 Then the next thing is you have to somehow decide where they are located vertically and when to go ahead 250 00:19:27,920 --> 00:19:29,250 and say this little guy. 251 00:19:29,300 --> 00:19:34,980 Maybe they make my back on Pinky again so we can actually see a stuff. 252 00:19:35,080 --> 00:19:45,040 So I'm going to go ahead in Yiddish and say My email has a topis space on a living space and that's 253 00:19:45,040 --> 00:19:51,800 about that's my email address of textfield against the label has a vertical facing. 254 00:19:51,890 --> 00:19:53,770 So that's taken care of now. 255 00:19:53,950 --> 00:20:03,050 Password has a leading face and it also has a vertical facing email textfield against you the passport 256 00:20:03,050 --> 00:20:06,480 takes it against a passport as a vertical spacing. 257 00:20:07,010 --> 00:20:15,800 Then we have this little icon the icon the icon I'm going to go ahead and say it has to always keep 258 00:20:15,800 --> 00:20:16,870 the same height. 259 00:20:17,000 --> 00:20:25,060 It has a top that is aligned with that but them that is aligned with it takes it and then let us say 260 00:20:25,140 --> 00:20:25,670 against. 261 00:20:25,670 --> 00:20:26,610 That takes three. 262 00:20:26,660 --> 00:20:29,590 It also has a trailing constraint. 263 00:20:29,660 --> 00:20:36,800 So it's always a start to the four most right side of this textfield and we finally have this one to 264 00:20:36,800 --> 00:20:37,580 deal with. 265 00:20:37,760 --> 00:20:42,940 It has a trailing space to the main page view. 266 00:20:43,010 --> 00:20:51,610 So trailing a space and has a vertical spacing to textfield and that's about that everything I think 267 00:20:51,620 --> 00:20:53,100 is now taking care of. 268 00:20:53,360 --> 00:20:56,740 You can go to a different view and everything is working. 269 00:20:56,840 --> 00:20:58,550 Come back to a smaller one. 270 00:20:58,550 --> 00:20:59,710 Everything is working. 271 00:20:59,750 --> 00:21:04,520 A much smaller one and hopefully everything is still working. 272 00:21:04,580 --> 00:21:12,440 Now the problem with a much smaller one is that the proportions Harden doesn't allow for enough space 273 00:21:12,440 --> 00:21:15,140 to see the forgot your passport thing. 274 00:21:15,140 --> 00:21:18,900 So to fix that I'm actually going to go to this one the pink one. 275 00:21:19,070 --> 00:21:28,560 Go to the aspic three sure that we had an say in the aspect ratio make it larger maybe 200 on 64. 276 00:21:28,730 --> 00:21:32,450 So there is enough space even in the smallest one. 277 00:21:32,530 --> 00:21:36,430 So you out of the pink color so you can see things better. 278 00:21:37,290 --> 00:21:41,000 So clear cut that and here it is. 279 00:21:41,000 --> 00:21:44,270 This is working now on the smallest of the devices. 280 00:21:44,440 --> 00:21:50,220 And on the largest of the devices I'm also working on anything in between. 281 00:21:50,730 --> 00:21:54,640 So that's all that I know is it became a long exercise. 282 00:21:54,840 --> 00:22:01,320 And as you can see a lot of the things that you do with constraint is you have to try to defend your 283 00:22:01,320 --> 00:22:02,000 own solutions. 284 00:22:02,000 --> 00:22:05,110 There's a lot of trial and error before you get it right. 285 00:22:05,310 --> 00:22:12,210 But once you know you get a better hold of what you're trying to do it becomes much easier. 286 00:22:12,210 --> 00:22:13,170 So that's about it. 287 00:22:13,200 --> 00:22:17,100 And let's move on to our next lesson which is an actual assignment.