1 00:00:00,310 --> 00:00:06,510 This this is our very first introduction to utterly and utterly as are really great tools that help 2 00:00:06,510 --> 00:00:14,220 us design our different user interfaces that are just to adapt automatically to different orientations 3 00:00:14,250 --> 00:00:16,330 or different device sizes. 4 00:00:16,380 --> 00:00:19,430 So that's going to start to see how we are going to use those. 5 00:00:19,440 --> 00:00:20,580 I'm going to go through. 6 00:00:20,780 --> 00:00:29,430 I'm going to start a new project I'm going to call it out or lay out intro IAB interface. 7 00:00:29,460 --> 00:00:32,360 Been there but I had next here. 8 00:00:35,630 --> 00:00:39,250 Here's the situation where we're going to need to lay out. 9 00:00:39,290 --> 00:00:44,030 Imagine we have this user interface and in it we have a label. 10 00:00:44,600 --> 00:00:50,940 So my label which is in here I'm one of you with a more distinctive color. 11 00:00:53,020 --> 00:00:54,660 Such as this one. 12 00:00:54,670 --> 00:00:56,110 Now here's the thing. 13 00:00:56,170 --> 00:01:03,190 If I stretch this label all the way across the screen and somehow try to make it nice and tidy and say 14 00:01:03,610 --> 00:01:10,050 well the X is 20 then why is 20. 15 00:01:10,410 --> 00:01:18,420 And David is I think 135 or maybe 40 and a height of 44. 16 00:01:18,670 --> 00:01:25,620 So my assumption is that this labor is always going to be on the top of the screen with 20 pixels margins 17 00:01:25,630 --> 00:01:28,640 from the right from the top and from the left. 18 00:01:28,750 --> 00:01:36,280 And if I go ahead and change my orientation say here instead of having a pro-trade more let's go to 19 00:01:36,280 --> 00:01:37,590 landscape. 20 00:01:37,690 --> 00:01:45,450 All of a sudden that system is broken because all this label knows is maintaining these values. 21 00:01:45,590 --> 00:01:51,910 2048 three three five and forty four which is perfectly accurate in here but doesn't justify what I've 22 00:01:51,910 --> 00:01:52,280 wanted. 23 00:01:52,330 --> 00:01:55,240 I want it to have only 20 pixels margin. 24 00:01:55,240 --> 00:01:59,070 In theory I want to have essentially something like this. 25 00:01:59,070 --> 00:02:06,820 I'm going to undo this real soon but I want it to automatically adjust to this size or if I go ahead 26 00:02:06,820 --> 00:02:13,030 and say when I'm on the same more down the post-trade more but I'm using a much smaller device. 27 00:02:13,030 --> 00:02:17,800 Then all of a sudden my label goes outside the boundaries of this device. 28 00:02:17,800 --> 00:02:25,450 So you can see what I'm going with this auto layout is a very useful tool for us to set a group of constrains 29 00:02:25,540 --> 00:02:29,450 which helps us maintain the shape of our outlets. 30 00:02:29,460 --> 00:02:30,700 It's not going to go back here. 31 00:02:30,910 --> 00:02:35,770 I'm going to go to my original design which is iPhone 8 for now. 32 00:02:36,010 --> 00:02:40,910 And here is how we do utterly out how we add utterly out constraints. 33 00:02:41,110 --> 00:02:48,400 We add them by voting the control button and dragging from one outlet to another one when we drive from 34 00:02:48,400 --> 00:02:49,590 one outlet taller than one. 35 00:02:49,600 --> 00:02:55,610 It means I want to set a constraint between the starting one and the ending one. 36 00:02:55,690 --> 00:02:57,300 Let's see how we do that. 37 00:02:57,340 --> 00:03:03,020 And when is going in here let me get myself a little bit you know a large screen so it's easier to see. 38 00:03:03,300 --> 00:03:11,170 And when I go in here hold the control by then drag from here to the view which is the superior view 39 00:03:11,170 --> 00:03:12,430 of this label. 40 00:03:12,610 --> 00:03:15,540 And you can very well do that in your Navigator. 41 00:03:15,550 --> 00:03:16,960 You can go and do that. 42 00:03:17,200 --> 00:03:23,720 So I want to hold the control drive over here and say Give me a constraint which is against the top 43 00:03:23,840 --> 00:03:26,740 space to the safe area. 44 00:03:26,740 --> 00:03:34,570 So it adds this little blue thing that says Val I'm always going to be from the set in the same distance 45 00:03:34,570 --> 00:03:38,600 from the top I'm going to be always at the same distance. 46 00:03:38,640 --> 00:03:44,440 I'll just go ahead and add another one I'm going to hold the control abandon the right side of the screen 47 00:03:44,440 --> 00:03:47,650 and say Give me a leading space. 48 00:03:47,650 --> 00:03:52,020 This is the leading space the space to the left side of the view. 49 00:03:52,030 --> 00:03:54,880 So that's how much it leads from there. 50 00:03:54,880 --> 00:03:57,920 And as we have the leading We obviously have the trailing. 51 00:03:57,920 --> 00:04:06,340 So if I drive from my label to the view using control then I could say give me a trailing space. 52 00:04:06,340 --> 00:04:11,510 So now as you can see my left is set my top is set and it's also my right. 53 00:04:11,560 --> 00:04:15,820 What do you think is going to happen if I switch to the landscape mode. 54 00:04:16,120 --> 00:04:17,290 Let's see that again. 55 00:04:17,410 --> 00:04:23,210 If I go there it's going to show me all the constraints but it doesn't really fit. 56 00:04:23,210 --> 00:04:27,580 It doesn't show me where it has to be and I have this little update. 57 00:04:27,580 --> 00:04:33,530 Why then are they compressed as going to show me where it would be if it was in the landscape. 58 00:04:33,790 --> 00:04:39,860 Now the update button doesn't automatically update itself if there is something missing. 59 00:04:39,910 --> 00:04:42,490 And I will show you what is missing right now. 60 00:04:42,640 --> 00:04:44,760 Let's go back here and what happened. 61 00:04:44,830 --> 00:04:46,450 We had this label. 62 00:04:46,570 --> 00:04:48,340 It is slightly taller. 63 00:04:48,340 --> 00:04:52,520 It used to be actually 44 but now it is not. 64 00:04:52,690 --> 00:05:00,940 And if you notice is this little color down there the hatchet line that shows us that well I know you 65 00:05:00,940 --> 00:05:08,250 are trying to put the label here but this is how it's going to look like because the values are intrinsic. 66 00:05:08,320 --> 00:05:12,950 And when it come back to intrinsic values in a minute but let's just fix this label. 67 00:05:13,000 --> 00:05:18,760 I have the top I have the left I have the right having the left and right means the video of this is 68 00:05:18,760 --> 00:05:23,650 always taking care of having the top space means you always know where it is. 69 00:05:23,650 --> 00:05:27,170 The one we don't know is what is going to be its height. 70 00:05:27,190 --> 00:05:28,930 Now I could do one of two things. 71 00:05:28,960 --> 00:05:35,020 I could actually go ahead and say well there is one kind of stain between this guy and bottom of the 72 00:05:35,020 --> 00:05:41,680 screen which is not really a good idea or I could go ahead and say I'm going to hold the control drag 73 00:05:41,680 --> 00:05:46,430 on from this view on itself and say here's the height. 74 00:05:46,450 --> 00:05:49,840 So always maintain the same height. 75 00:05:49,840 --> 00:05:56,480 Now if you're if you select your and go to the dimensions down here you can actually see the existing 76 00:05:56,480 --> 00:06:04,260 constraints and it says there is a height of 44 trailing 20 leading 20 and a top is spaced 20. 77 00:06:04,260 --> 00:06:11,610 And if now we go to another orientation it automatically adjust itself to show us the right thing. 78 00:06:11,870 --> 00:06:16,880 Or if I go back and I go to a different device it does exactly the same thing. 79 00:06:16,880 --> 00:06:21,440 It maintains the same set of constraints. 80 00:06:21,440 --> 00:06:27,440 Now I'm going to go and select my object and I could go in here at the labels and try to find all of 81 00:06:27,440 --> 00:06:29,280 its constraints manually. 82 00:06:29,300 --> 00:06:30,290 So there's that. 83 00:06:30,310 --> 00:06:34,750 And there are those three I want to delete all of my constraints. 84 00:06:34,790 --> 00:06:40,430 I could go ahead and select them and delete them or I could just go ahead select my outlet and go down 85 00:06:40,430 --> 00:06:44,620 here and that little triangle and say here are kind of strengths. 86 00:06:44,810 --> 00:06:49,850 So I'm going to say clear constraints is going to kill all the constraints for this object. 87 00:06:49,850 --> 00:06:54,950 So once again we back to a situation where we don't have any constraints. 88 00:06:54,980 --> 00:06:57,460 Now here is what I want to show you. 89 00:06:57,530 --> 00:07:05,270 I'm going to go ahead and say Give me a resume like that again control the click or control drag drop 90 00:07:05,300 --> 00:07:10,180 a space to a safe area and the leading space to a safe area. 91 00:07:10,190 --> 00:07:17,340 So it means the top panel left taking care of and the rest of it is left somehow to the intrinsic UV-A 92 00:07:17,350 --> 00:07:17,990 of it. 93 00:07:18,070 --> 00:07:24,970 It means whatever it is the amount of text in it that you have to accommodate make the vet and the heights 94 00:07:24,980 --> 00:07:26,150 based on that. 95 00:07:26,150 --> 00:07:38,150 So if this was a much longer text then tacks in here what would happen is that takes with a stretch 96 00:07:38,240 --> 00:07:42,010 or if this was a phone that was taller. 97 00:07:42,230 --> 00:07:48,270 So that's called an intrinsic value a value that is being found from the content. 98 00:07:48,530 --> 00:07:55,970 But I personally don't really feel like that most of the time I want to be able to specifically say 99 00:07:56,360 --> 00:07:58,800 this is my label is going to be. 100 00:07:58,900 --> 00:08:04,960 So I'm going to say this change that sticks to my label that's clear constraints. 101 00:08:05,360 --> 00:08:06,880 And here's what I want to happen. 102 00:08:06,890 --> 00:08:10,460 I want this to be right in the middle of my screen. 103 00:08:10,700 --> 00:08:19,160 I'm going to hold the control drive over here and say center vertically in the safe area and then I'm 104 00:08:19,160 --> 00:08:25,220 going to say once again Center up that was horizontally so he said the vertically this time. 105 00:08:25,640 --> 00:08:30,270 And now I'm going to say refresh update it shows me right in the middle. 106 00:08:30,410 --> 00:08:39,160 So now my label is right on the center of this screen except that it's Veith and height are intrinsic. 107 00:08:39,410 --> 00:08:40,410 I don't want that. 108 00:08:40,430 --> 00:08:45,350 Here's what I do want and it's going to be a bit of a complicated process. 109 00:08:45,350 --> 00:08:46,580 All right. 110 00:08:46,580 --> 00:08:50,140 I'm going to say my height is going to be 44. 111 00:08:50,470 --> 00:08:50,970 OK. 112 00:08:50,990 --> 00:08:59,750 So that is 44 irrelevant of what device I'm using So I'm using a larger device is 44. 113 00:08:59,750 --> 00:09:07,260 I have I'm using a smaller device still it is 44 and I want to maintain the same relationship. 114 00:09:07,280 --> 00:09:16,880 What I mean by that is if this is 3:56 and my view is six hundred I want to maintain that relationship. 115 00:09:16,890 --> 00:09:19,810 I kind of fun to keep this aspect ratio. 116 00:09:20,060 --> 00:09:26,890 So I will hold the control right from my label to my view and see aspect ratio. 117 00:09:26,900 --> 00:09:30,720 Now when you do an aspect ratio you actually have to manually set it. 118 00:09:30,890 --> 00:09:36,010 So I'm going to go to my aspect ratio and when I double click on it I add this little window pops which 119 00:09:36,010 --> 00:09:41,090 shows me the exact details of my aspect ratio constraint. 120 00:09:41,330 --> 00:09:52,800 And when I say my label height equals supernovae you height with the ratio of forty four to six hundred 121 00:09:52,800 --> 00:09:57,930 sixty seven I can see these two little equal signs in year if you can notice them. 122 00:09:57,930 --> 00:10:02,790 It says this height is proportional to that height. 123 00:10:02,790 --> 00:10:05,940 Now if you go to another orientation 124 00:10:08,310 --> 00:10:10,800 updated it becomes a lot smaller. 125 00:10:11,060 --> 00:10:19,940 If you go to an other one something that is a smaller device obviously it tries to maintain the same 126 00:10:20,450 --> 00:10:25,300 proportions between them maintaining proportion and not always a good idea. 127 00:10:25,310 --> 00:10:27,750 Sometimes you need to do it sometimes. 128 00:10:27,890 --> 00:10:29,890 It's really a judgment call. 129 00:10:30,170 --> 00:10:36,230 I'm going to show you one last thing before we close this introductory lesson and that is let's select 130 00:10:36,230 --> 00:10:42,800 this guide delete it and all of these constraints I'm going to go in here and say Give me a view. 131 00:10:42,920 --> 00:10:52,420 So that is a you I view I want to put my viewers right in the middle and I want to have no margins for 132 00:10:52,420 --> 00:10:53,930 the left and right. 133 00:10:53,980 --> 00:11:02,710 So that's my view and but I give with a bit of a poor distinctive background color say it always has 134 00:11:02,710 --> 00:11:07,870 the same height of 128 so control click height. 135 00:11:07,870 --> 00:11:17,200 So this object always maintains its own height leading space control and trailing space control drunk 136 00:11:17,550 --> 00:11:24,430 and not you will see this little icon shows up the red the one that says there is a missing constraint. 137 00:11:24,580 --> 00:11:31,540 It's essentially telling you Well you have done some of the things but still something is missing. 138 00:11:31,660 --> 00:11:37,510 In the example I made for you is clearly saying what is missing is saying the avoid position is missing 139 00:11:37,980 --> 00:11:43,260 it's telling you I know lots of it because you have aligned it to the left and the right. 140 00:11:43,390 --> 00:11:44,410 I know what's to hide. 141 00:11:44,440 --> 00:11:51,400 Because you have clearly said that what I don't know is very is it going to be is it here or is it here. 142 00:11:51,460 --> 00:11:57,280 Think of it like this it three constraints so they have suggested so far rather than my alts that is 143 00:11:57,280 --> 00:11:59,720 up there or down here. 144 00:11:59,840 --> 00:12:07,530 They are still being satisfied and that's essentially it herem being satisfied the constraints are being 145 00:12:07,540 --> 00:12:09,310 satisfied or not. 146 00:12:09,310 --> 00:12:16,680 Right now the constraints are being satisfied the height is 128 leading and trailing values are working. 147 00:12:16,780 --> 00:12:20,630 But this object could very well be here or be here. 148 00:12:20,650 --> 00:12:26,370 So for that I'm going to go ahead and say this keep it right in the middle and I'm going to confront 149 00:12:26,370 --> 00:12:30,540 it like and say Center it vertically. 150 00:12:30,620 --> 00:12:35,340 And as you can see those are red borders and the red icons they disappear. 151 00:12:35,500 --> 00:12:41,720 It doesn't tell me anymore that you're missing a constraint simply because I'm not missing a constraint. 152 00:12:41,740 --> 00:12:46,550 Everything is in year if I go to a different orientation it knows what to do. 153 00:12:46,720 --> 00:12:50,070 If I go to a different device it knows it has to do. 154 00:12:50,380 --> 00:12:54,870 Now let's say I had a child for this you I. 155 00:12:55,120 --> 00:12:59,120 I had a label which was a child. 156 00:12:59,260 --> 00:12:59,890 All of it. 157 00:12:59,920 --> 00:13:05,070 If you see here's my hierarchy the main view and then the green view. 158 00:13:05,070 --> 00:13:07,420 I would actually call this one. 159 00:13:07,450 --> 00:13:13,850 You mean you're in the view and then waited with have a label. 160 00:13:13,870 --> 00:13:17,080 Now my label has a more distinctive color. 161 00:13:17,560 --> 00:13:18,900 And here's what I want to happen. 162 00:13:18,910 --> 00:13:24,190 I want my label to have 20 pixels and margin from every side. 163 00:13:24,310 --> 00:13:30,030 So 20 from top left right on bottom here is a very very important thing that you have to know. 164 00:13:30,040 --> 00:13:34,380 You can set a constraint between object and itself. 165 00:13:34,720 --> 00:13:38,800 You can set the kind of state between an object and its parent. 166 00:13:38,800 --> 00:13:46,900 If the object has siblings such as what they have in here you can set kind of stains between siblings 167 00:13:47,290 --> 00:13:49,930 but you cannot do it any other way. 168 00:13:50,110 --> 00:13:54,920 So you can't set a stain between this label and that so purview. 169 00:13:55,270 --> 00:14:00,790 It does allow you to do it your put your outfit essentially break or crash. 170 00:14:00,790 --> 00:14:06,530 So you have to make sure that you set the constrains either among siblings or parents. 171 00:14:06,670 --> 00:14:08,870 So here is what I'm going to do. 172 00:14:08,980 --> 00:14:16,860 I'm going to say control drag our trailing controls right leading control right by them and control 173 00:14:16,870 --> 00:14:18,960 that topless face. 174 00:14:18,970 --> 00:14:24,910 Wouldn't it be nice if I had a way of doing all of these automatically so I didn't have to really go 175 00:14:24,910 --> 00:14:26,870 and strike four times. 176 00:14:27,100 --> 00:14:28,560 And we do have that. 177 00:14:28,570 --> 00:14:32,660 So I'm going to go in here and say clear all of these constraints. 178 00:14:32,830 --> 00:14:39,190 Instead click on this little icon that says Are you trying to add new constraints and I'm going to say 179 00:14:39,220 --> 00:14:40,140 yes. 180 00:14:40,390 --> 00:14:41,850 And it says so what do you want to do. 181 00:14:41,860 --> 00:14:45,950 I want to have 20 pixels margin 20 20 and 20. 182 00:14:46,100 --> 00:14:50,240 And the four constraints and that's what it does for me. 183 00:14:50,320 --> 00:14:56,110 So I left an icon down there it adds kind of scenes for you and helps you decide how you want it to 184 00:14:56,110 --> 00:14:56,620 be. 185 00:14:56,620 --> 00:14:58,690 Sometimes it's easier to use this one. 186 00:14:58,720 --> 00:15:04,910 And sometimes it is easier to use the control right and now as you can imagine there. 187 00:15:05,140 --> 00:15:13,000 Read the label is always maintaining its stance against the corners of the green one is relevant of 188 00:15:13,000 --> 00:15:20,890 the kind of device that you are using it adapts itself perfectly to adjust its its corners. 189 00:15:22,630 --> 00:15:29,390 All right so that's about that introduction to how we use auto play out in court in the next lesson. 190 00:15:29,390 --> 00:15:35,660 You're going to have an exercise their views a lot of these things as well as some of the new things 191 00:15:35,660 --> 00:15:36,700 in to lay out.