1 00:00:00,210 --> 00:00:06,990 High again in one of our previous lessons you spoke of how to make utterly out constraints in Interface 2 00:00:06,990 --> 00:00:07,700 Builder. 3 00:00:07,950 --> 00:00:13,550 In this last century going through the same thing but you're going to do it entirely programmatically. 4 00:00:13,800 --> 00:00:17,480 And there are a lot of reasons why you might want to do with programmatic. 5 00:00:17,610 --> 00:00:23,820 Namely because there are a lot of situations where the outlets are not drawn on the Interface Builder 6 00:00:24,090 --> 00:00:28,850 you end up building the outlets as you go along dynamically. 7 00:00:29,070 --> 00:00:34,950 Let's say you have a number of majors that are being read from some database and you want to post all 8 00:00:34,950 --> 00:00:35,540 of them. 9 00:00:35,550 --> 00:00:38,600 You are not sure how many of them are going to be there. 10 00:00:38,730 --> 00:00:44,160 So you have to essentially write something like a for loop that fetches all of your images and then 11 00:00:44,160 --> 00:00:46,090 applies all of them to your interface. 12 00:00:46,230 --> 00:00:53,270 So you need to know how to do things programmatically more often than we do things in Interface Builder. 13 00:00:53,580 --> 00:00:59,550 So let's go ahead to exclude and here I'm going I start a new app as usual. 14 00:00:59,740 --> 00:01:04,530 It's called it or it's only in coding. 15 00:01:05,040 --> 00:01:07,550 Everything stays the same as always. 16 00:01:08,720 --> 00:01:12,560 So here in my view controller I'm going to have only one outlet. 17 00:01:12,590 --> 00:01:20,020 I'm going to vote on I think constrains to that of one outlet on the that out when I make you my view. 18 00:01:20,030 --> 00:01:24,600 So I'm going to say let us call it the red box as I usually call it. 19 00:01:24,750 --> 00:01:30,100 It's you I view and that is a I view with a frame. 20 00:01:30,320 --> 00:01:31,420 And here's the thing. 21 00:01:31,460 --> 00:01:38,120 Whenever you are doing things that you're doing them inside coding it really helps if you set a CGI 22 00:01:38,120 --> 00:01:39,840 record of zero. 23 00:01:40,070 --> 00:01:46,220 That helps your other developers to know anyone who works on your code to know that this is going to 24 00:01:46,220 --> 00:01:48,350 be set using constraints. 25 00:01:48,350 --> 00:01:54,440 Because if it doesn't have any frame it simply means it's not going to be drawn is going to be a zero 26 00:01:54,860 --> 00:01:57,200 space rectangle for it. 27 00:01:57,200 --> 00:02:02,240 So for us I'm going up with a seizure like zero so anyone else who reads the code is going to know that 28 00:02:02,570 --> 00:02:06,830 hey this is going to be set using constraints. 29 00:02:06,830 --> 00:02:07,950 So that's the bomb. 30 00:02:08,080 --> 00:02:16,850 And I knew that the first thing of course I need to do is sort of you are view I need to out of my red 31 00:02:16,850 --> 00:02:25,490 box there so my view is either in the red box with a chart then that is a very particular instruction 32 00:02:25,490 --> 00:02:32,040 that we have to use and that's called translate to resizing maps into constraints. 33 00:02:32,240 --> 00:02:33,910 And you have to set this too far. 34 00:02:33,950 --> 00:02:36,290 I would explain to you what it means. 35 00:02:36,290 --> 00:02:38,720 So there are two situations. 36 00:02:38,720 --> 00:02:45,740 Either you have made your views a using Interface Builder which is what you have been doing until this 37 00:02:45,740 --> 00:02:49,160 point or you have made them using coding. 38 00:02:49,160 --> 00:02:57,200 And if you have made your objects using coding it will automatically start adding constraints to it 39 00:02:57,200 --> 00:02:59,540 based on the size of it. 40 00:02:59,540 --> 00:03:04,240 Remember that if this wasn't Jurich zero you would have something like this. 41 00:03:04,330 --> 00:03:13,820 I'm going to make a temporary value so let them be CGI records of some values in here and then based 42 00:03:13,820 --> 00:03:20,120 on those values the machine would automatically add some constraints for you would say you have put 43 00:03:20,120 --> 00:03:25,670 the extra 20 and Y to be hundred and then have to be 200 on a height of 200. 44 00:03:25,700 --> 00:03:32,290 For instance the numbers of just you know are throwing in there based on those we'll try to add constraints. 45 00:03:32,300 --> 00:03:38,130 And I'm saying don't do that because I'm going to manually add the constraints myself. 46 00:03:38,150 --> 00:03:47,530 Now if you're your objects or your out this are made using clothing by default the value is true. 47 00:03:47,720 --> 00:03:54,230 So by default these auto resizing is happening unless you explicitly say no because you're going to 48 00:03:54,230 --> 00:03:56,120 make the constraints manually. 49 00:03:56,360 --> 00:04:02,930 Now the other side of it is if you make your outlets in Interface Builder which the default value will 50 00:04:02,930 --> 00:04:09,920 be false simply because the interface field assumes you're going to add constraints manually in there. 51 00:04:10,220 --> 00:04:16,070 So keep that in mind that whenever you make objects you have to set this value to force. 52 00:04:16,160 --> 00:04:22,100 I know I kind of made complicated by saying that there is interface when there are it is coding. 53 00:04:22,160 --> 00:04:29,630 You can keep it like you can always make this false if you want to add things because it either is false 54 00:04:29,720 --> 00:04:35,070 and you're just making it false Once again or it is not false and you have to make it worse. 55 00:04:35,210 --> 00:04:37,290 So that's that. 56 00:04:37,840 --> 00:04:42,500 OK so now we have that you have told the machine we're going to add constraints and I'm going out. 57 00:04:42,500 --> 00:04:45,990 My very first thing and that's going to be my red. 58 00:04:46,420 --> 00:04:54,200 I'm going to say that say height constraint or height I'm sure I'm going to say constrain it to the 59 00:04:54,200 --> 00:04:59,060 very easiest one of all is adding a constant value. 60 00:04:59,090 --> 00:05:01,840 When I say give me a height of 200. 61 00:05:02,090 --> 00:05:07,700 So all that is doing is saying well there is a higher STEINKUEHLER that's going to be 200. 62 00:05:07,850 --> 00:05:13,400 If you want to have a visual representation of that I'm going to do it and other temporary thing in 63 00:05:13,400 --> 00:05:14,620 here real quick. 64 00:05:14,900 --> 00:05:20,110 So if I had you I view and my view was 65 00:05:23,480 --> 00:05:30,110 this would be equivalent of doing is control dragging and saying height and then going to my dimensions 66 00:05:30,160 --> 00:05:32,670 and saying height is 200. 67 00:05:32,720 --> 00:05:35,080 That would be the same thing. 68 00:05:35,180 --> 00:05:39,510 So I'm not going to do that hitting the interface builder I worked with programmatic. 69 00:05:39,740 --> 00:05:46,840 So we got that and I think I had forgotten something crucial or red box God I want to color is you. 70 00:05:46,850 --> 00:05:51,170 I color dot the red so we can actually see. 71 00:05:51,350 --> 00:05:53,430 So that was the easiest of constraint. 72 00:05:53,470 --> 00:05:58,700 I think constant thing that is constant for what I want it to are that other constrain that is based 73 00:05:58,760 --> 00:06:02,650 on something else something that we have been doing so often. 74 00:06:02,870 --> 00:06:09,230 So here I'm going to go in here and say let's have another constraint and I'm going to say let's let's 75 00:06:09,230 --> 00:06:11,120 call it that red X. 76 00:06:11,120 --> 00:06:19,390 That's going to become my red box dot or X anchor. 77 00:06:19,410 --> 00:06:27,460 I'm going to say crusting yourself to equal to and evaluate you it is the center of my view. 78 00:06:27,470 --> 00:06:36,130 So it's going to be self that if you do not center X and curve that may make this a little bit broader 79 00:06:36,140 --> 00:06:37,830 so you can see everything. 80 00:06:38,270 --> 00:06:43,490 So I made a new kind of strength and that is going to be cross-training. 81 00:06:43,710 --> 00:06:55,770 I read the boxes center X to self-view center X and then very important I have to say red X dot is active. 82 00:06:56,090 --> 00:07:03,440 I have to say this constant is actually currently active or function and do the same thing for the Y. 83 00:07:03,440 --> 00:07:11,780 I'm going to say red white becomes red box the center Y anchor dot constrained. 84 00:07:12,170 --> 00:07:20,380 And I want I can stand it to self to view not view that go of view the center. 85 00:07:20,520 --> 00:07:21,680 Why anchor. 86 00:07:21,880 --> 00:07:28,750 And of course then again I'm going to go ahead and say red light is active and that is through as well. 87 00:07:29,060 --> 00:07:37,370 OK so so far we have managed to set our height Aha said its center in terms of x and y and the one thing 88 00:07:37,370 --> 00:07:38,480 we are still missing. 89 00:07:38,480 --> 00:07:45,290 If you wanted to make sure this thing actually shows up is setting a a bit I'm careful and forced to 90 00:07:45,290 --> 00:07:50,720 think about anchoring when I should do it a slightly different B simply because I want to show you how 91 00:07:50,780 --> 00:07:51,710 other things work. 92 00:07:51,710 --> 00:07:57,370 So I'm going to say let's get with constraint with Konst. 93 00:07:57,470 --> 00:08:02,720 I'm trying to save up space because I know it's going to be a very very long year. 94 00:08:02,730 --> 00:08:09,920 So let's lay out constraints and this is essentially initialising constraint This is like the father 95 00:08:09,920 --> 00:08:14,840 of all constraints is is every single bit of information you can add into it. 96 00:08:14,870 --> 00:08:17,430 I'm adding it so it's going to be. 97 00:08:17,630 --> 00:08:20,060 What is the item you are trying to constrain. 98 00:08:20,060 --> 00:08:22,430 What's the that you're saying. 99 00:08:22,460 --> 00:08:28,940 What's the relation to which I am What's the good you're trying to constrain What's the multiplier in 100 00:08:28,940 --> 00:08:32,070 there and what's the Konstantinov if there isn't one. 101 00:08:32,210 --> 00:08:37,650 So let's go ahead and write all of these down and then say the item is obviously red box that's there's 102 00:08:37,670 --> 00:08:42,760 no question about it are really you they want to set it off this guy. 103 00:08:42,770 --> 00:08:49,520 So he's going to be in this layout constraint that attribute that to it. 104 00:08:49,580 --> 00:08:56,050 So bear with me for a second as I try to get myself a little bit more space. 105 00:08:56,060 --> 00:09:02,570 I'm going to call this w OK and maybe it gets you to the other side. 106 00:09:02,780 --> 00:09:03,130 OK. 107 00:09:03,140 --> 00:09:09,350 So now we can actually see everything nice and clean so that I actually keep that name. 108 00:09:09,500 --> 00:09:16,380 So the video kind of thing and then and it's now constant red box art is a tribute to it. 109 00:09:16,460 --> 00:09:18,680 And then he's going to say what is the relation. 110 00:09:18,680 --> 00:09:21,710 So there is going to be and it's Lay constrained. 111 00:09:21,760 --> 00:09:30,230 Dutch relations got equality and then I've got the I'D them actually I'm not going to come to any items. 112 00:09:30,230 --> 00:09:31,700 I'm going to set it to nil. 113 00:09:32,120 --> 00:09:38,340 And then attribute of the other item I'm going to call it to be a normal tribute. 114 00:09:38,570 --> 00:09:44,290 And then the multiplier is going to be one and I Konstantinov who is going to be on one hundred and 115 00:09:44,300 --> 00:09:45,440 fifty. 116 00:09:45,440 --> 00:09:51,780 So essentially I'm saying produce and it's less constrained for red box that takes this. 117 00:09:51,820 --> 00:09:57,050 That makes it equal to one hundred fifty. 118 00:09:57,080 --> 00:10:04,100 I'm not saying to somebody else and I'm not using that that's from somebody else and I'm not multiplying 119 00:10:04,100 --> 00:10:05,840 that value by any numbers. 120 00:10:05,840 --> 00:10:09,170 I'm just saying whatever it is hundred fifty used That's value. 121 00:10:09,470 --> 00:10:18,620 And then I could go ahead and say red box that kind of strains or bad things and then we have two different 122 00:10:18,620 --> 00:10:22,320 types of constrained the one is the one I'm using right now. 123 00:10:22,550 --> 00:10:31,920 And the You also have red marks that constraints prove your form which allows you to add an array of 124 00:10:31,920 --> 00:10:32,530 const things. 125 00:10:32,530 --> 00:10:39,790 So if I want to try out multiple ones I would just put all of them within an array something like that. 126 00:10:39,870 --> 00:10:43,400 You know the first one and the next one the next one so on and so forth. 127 00:10:43,560 --> 00:10:47,880 For now I only have one so I'm only going to use the other singular mode. 128 00:10:47,970 --> 00:10:51,560 But if you want it you could use the plural form as well. 129 00:10:51,810 --> 00:10:53,150 So that's about that. 130 00:10:53,150 --> 00:11:00,540 We made ourselves a red view or red box and that red box doesn't have a frame and instead everything 131 00:11:00,570 --> 00:11:03,730 in it is being declared using constrains. 132 00:11:03,750 --> 00:11:09,660 Now for that kind of stance I have to constrain the height of which apparently forgot to activate it 133 00:11:10,410 --> 00:11:12,330 is active is true. 134 00:11:12,330 --> 00:11:13,390 That's my bad. 135 00:11:13,770 --> 00:11:17,220 And then I had an X envoy and care for it. 136 00:11:17,220 --> 00:11:25,770 Whenever you are adding constraints like this like saying red box or anything off center X anchor constrained 137 00:11:25,770 --> 00:11:26,800 to whatever. 138 00:11:26,970 --> 00:11:33,420 You could either separately put them in a different variable and then activate it or you could just 139 00:11:33,420 --> 00:11:44,190 drop the value but all together like this and then say he's active and there are merits for doing both 140 00:11:44,190 --> 00:11:51,010 of these methods sometimes you want to have access to red white for instance later on you want to animate 141 00:11:51,020 --> 00:11:55,950 it or change it depending on something and sometimes you don't really care about you just want it to 142 00:11:55,950 --> 00:12:02,190 be to be active at all times so it's actually good I made most of these so you can have a look at both 143 00:12:02,190 --> 00:12:02,990 of them. 144 00:12:03,240 --> 00:12:07,340 And then we finally made a conscious thing which we added as a kind of strange. 145 00:12:07,350 --> 00:12:12,570 Whenever you add kind of sense you don't need to really activate them because when you add them they 146 00:12:12,570 --> 00:12:15,190 are active boy by default. 147 00:12:15,390 --> 00:12:17,360 So let's go ahead and run this. 148 00:12:17,580 --> 00:12:24,460 And once my simulator loads up will be able to see a box in the center of the scene. 149 00:12:24,510 --> 00:12:27,870 It's got a vet of one hundred and fifty. 150 00:12:27,960 --> 00:12:32,190 The height of 200 I center is at the center of the view. 151 00:12:32,340 --> 00:12:39,260 So that was a quick introduction to adding Konstanz you'll see more of these when we do more apps. 152 00:12:39,360 --> 00:12:45,510 You will end up doing some programmatic constraints at the end of the day on as much as you can. 153 00:12:45,510 --> 00:12:50,040 You have to try and get away in the interface when there but then there will be times that you need 154 00:12:50,040 --> 00:12:52,010 to do constraints. 155 00:12:52,290 --> 00:12:54,510 And yeah I assume the next lesson.