1 00:00:01,090 --> 00:00:07,750 Come back again now that you know how to use IB design will I be inspectable you have to do this exercise 2 00:00:07,780 --> 00:00:15,430 which is producing a view with a gradient background and the requirements for it is that the gradient 3 00:00:15,430 --> 00:00:21,910 should have three colors and you should be able to change the color in the middle using something like 4 00:00:21,910 --> 00:00:28,450 a slider or anything that you can think of that you can actually modify where the location of the middle 5 00:00:28,450 --> 00:00:29,390 color is. 6 00:00:29,650 --> 00:00:36,280 So a gradient left the color middle color right color and the middle color should be controllable by 7 00:00:36,280 --> 00:00:36,990 the user. 8 00:00:37,180 --> 00:00:42,610 If you want to compose the video now for a few seconds and give it a shot on your own and then look 9 00:00:42,610 --> 00:00:43,840 at my solution as well. 10 00:00:47,650 --> 00:00:48,550 So I'm going to get this. 11 00:00:48,640 --> 00:00:55,690 That's what I'm going to go to school start the new project I'm going to call the grade and read the 12 00:00:55,690 --> 00:00:56,370 end to 13 00:01:01,030 --> 00:01:03,750 and yet I'm going to go to my view controller. 14 00:01:04,120 --> 00:01:09,220 You don't really need any of these I could actually make you file for it but odds are that if I type 15 00:01:09,220 --> 00:01:11,870 it right here because it's easier. 16 00:01:12,220 --> 00:01:20,380 So I'm going to add in your class that class I'm going to call it to be or maybe custom class or draw 17 00:01:20,380 --> 00:01:21,220 class. 18 00:01:21,310 --> 00:01:29,270 It's a subclass of view and we know that it has to be and I'd be design a world class. 19 00:01:29,440 --> 00:01:32,650 And here are the basics of what we need to do. 20 00:01:32,680 --> 00:01:37,950 So I need to highlight three colors those colors are left right and middle. 21 00:01:38,260 --> 00:01:47,410 I need to have some sort of a location picture so location picture for middle color and of course I 22 00:01:47,410 --> 00:01:49,870 have to draw a gradient. 23 00:01:50,050 --> 00:01:53,130 So why don't we solve it one step at a time. 24 00:01:53,170 --> 00:01:56,280 So I'm going to say the first three are actually quite easy. 25 00:01:56,290 --> 00:01:57,920 It's going to be a variable. 26 00:01:58,180 --> 00:01:59,840 Let's call it. 27 00:01:59,900 --> 00:02:03,030 And I lift the color left color. 28 00:02:03,240 --> 00:02:06,830 She's going to be a you only color. 29 00:02:06,940 --> 00:02:12,520 And when I say the different mind you for it is maybe red and then obviously or use that it can change 30 00:02:12,520 --> 00:02:13,630 that. 31 00:02:13,740 --> 00:02:16,530 And when I have a right color. 32 00:02:16,720 --> 00:02:19,020 So that's going to be our kind of. 33 00:02:19,340 --> 00:02:22,170 And we need to have a middle color of course. 34 00:02:22,220 --> 00:02:25,930 So that's going to be middle class. 35 00:02:26,480 --> 00:02:29,080 And one of them I'm going to say is green. 36 00:02:29,380 --> 00:02:35,320 One of them is blue and the three colors now are taken out. 37 00:02:35,320 --> 00:02:41,980 I have to find a way for a location and then as to my location is going to be a C.G. float value somewhere 38 00:02:41,980 --> 00:02:43,580 between zero to one. 39 00:02:43,780 --> 00:02:45,420 And that's not just an assumption. 40 00:02:45,430 --> 00:02:49,190 I know that's how the gradients work and you will see it in a second. 41 00:02:49,190 --> 00:02:55,320 So I'm going to say I even have a liar let's call it myth color. 42 00:02:55,570 --> 00:03:03,460 OK we have that mid-court location perhaps medical location becomes a CEG float and that's going to 43 00:03:03,460 --> 00:03:06,290 have a value of 0.5 at the very beginning. 44 00:03:07,280 --> 00:03:10,430 Know they have all these four I'm going to have to make all of them. 45 00:03:10,670 --> 00:03:11,630 Respectable. 46 00:03:11,720 --> 00:03:21,400 And then I say I be inspectable and I copied this for all four of them died. 47 00:03:21,590 --> 00:03:27,320 And so now about three colors and one I've been inspectable by it. 48 00:03:27,790 --> 00:03:33,150 Now let's go all or draw which is the most important part of this. 49 00:03:33,350 --> 00:03:41,930 I'm going to have to get myself a little bit of space like that and I'm going to say I have a role and 50 00:03:41,930 --> 00:03:42,980 it's an oversight. 51 00:03:43,010 --> 00:03:46,920 And it is very hard to draw the gradient to draw a gradient. 52 00:03:46,940 --> 00:03:49,540 You need a graphics context. 53 00:03:49,550 --> 00:03:54,210 So I'm going to say let contex to be you. 54 00:03:54,320 --> 00:04:00,600 The graphics get current context which is easier if I actually wrote it. 55 00:04:00,720 --> 00:04:03,770 Grafix get current context. 56 00:04:03,770 --> 00:04:05,360 So now I have the context. 57 00:04:05,480 --> 00:04:10,570 The next thing I have to do is for when I actually make a grade and it could do it like this. 58 00:04:10,580 --> 00:04:17,560 I could say Frontex dot draw the line gradient. 59 00:04:17,570 --> 00:04:19,070 And here's the interesting part. 60 00:04:19,060 --> 00:04:23,710 They tell me what are the different things that I need to include in here. 61 00:04:23,840 --> 00:04:28,250 I'm going to tell you I don't need to have any options for now so I'm just going to give it an empty 62 00:04:28,250 --> 00:04:35,600 array because asking for an array but then it says give me a gradient how you want to draw it and then 63 00:04:35,600 --> 00:04:39,620 give me the start and end point of where you want to draw it. 64 00:04:39,650 --> 00:04:43,890 So you start on end then actually the easier let's deal with those first. 65 00:04:43,910 --> 00:04:52,310 I'm going to say I have a let's just call it if left point left point becomes obviously zero. 66 00:04:52,370 --> 00:04:55,500 That's going to be C.G. point dot Z. 67 00:04:56,240 --> 00:05:01,400 And that's the left corner of the right one the gradient to start and then I'm going to have to have 68 00:05:01,490 --> 00:05:08,870 a let this column to the right point and that's going to be a C.G. point and this C.G. point I have 69 00:05:08,870 --> 00:05:13,960 to make it based on the set of The View that I want to draw the gradient on. 70 00:05:14,110 --> 00:05:19,050 So I'm going to say it's a point of X and Y and the Y if it doesn't really matter. 71 00:05:19,050 --> 00:05:22,360 So I'm going to put zero of X up it matters. 72 00:05:22,370 --> 00:05:31,580 And that's going to be bounds to vet and that is the vet of the bounds of the current object which is 73 00:05:31,820 --> 00:05:37,330 this guy the class of Carstone class you I view the type you have you. 74 00:05:37,640 --> 00:05:38,940 So I've got that. 75 00:05:38,960 --> 00:05:41,580 So that's going to be my starting point. 76 00:05:41,900 --> 00:05:43,740 And that's going to be my ending point. 77 00:05:43,760 --> 00:05:45,680 So they got those two taken care of. 78 00:05:45,680 --> 00:05:48,520 The next thing is actually making a great in. 79 00:05:48,560 --> 00:05:51,660 So let's go ahead and see how we're going to do that. 80 00:05:51,670 --> 00:05:56,300 Vote in here and say Give me my grade. 81 00:05:56,900 --> 00:06:04,160 And that's going to be a great gradient of C.G. gradients can be done in several different ways. 82 00:06:04,160 --> 00:06:11,030 The way I want to use is actually this one using Acara space using a set of colors and using a set of 83 00:06:11,030 --> 00:06:12,170 locations. 84 00:06:12,450 --> 00:06:15,980 So space colors and locations. 85 00:06:16,100 --> 00:06:21,950 So let's go ahead and say OK now for the card space. 86 00:06:21,990 --> 00:06:25,240 You have to kind of use the card space device. 87 00:06:25,250 --> 00:06:26,960 RG So I'm going to just like that. 88 00:06:26,970 --> 00:06:32,370 I'm going to say CEG color a space and for that I'm going to say device. 89 00:06:32,380 --> 00:06:40,020 RG What Carlos is asking for a c f right which is essentially a foundation type of array and the good 90 00:06:40,020 --> 00:06:45,500 news is any kind of normal swift array you can just convert it to CFR right. 91 00:06:45,660 --> 00:06:48,840 So we can make our colors array and then convert it. 92 00:06:48,960 --> 00:06:51,250 The same thing goes on for the locations. 93 00:06:51,360 --> 00:06:58,050 So we have to make 8 an array that holds onto the locations of these colors and then place it here as 94 00:06:58,050 --> 00:06:58,660 an array. 95 00:06:58,830 --> 00:07:01,740 So I'm going to go in here and say Give me a list. 96 00:07:02,160 --> 00:07:09,050 Let's call this one crullers array and this kind of array is actually very very simple is a lefty color 97 00:07:11,900 --> 00:07:12,910 Mitt color. 98 00:07:12,980 --> 00:07:14,630 I should have copied this one first. 99 00:07:14,630 --> 00:07:15,520 MIT color. 100 00:07:15,710 --> 00:07:23,840 And then of course right not the only problem in here is all of these callers are actually you e-collars. 101 00:07:23,860 --> 00:07:30,820 So we could either convert them or make them C.G. colors or in here we have to convert them to C.G. 102 00:07:30,820 --> 00:07:31,430 colors. 103 00:07:31,510 --> 00:07:37,840 So I'm going to say you've me C.G. color of this one because you're working with the core graphics and 104 00:07:37,840 --> 00:07:41,120 we can only use colors of the type CEG color. 105 00:07:41,240 --> 00:07:48,900 So now we have the colors array which in here I'm going to say use the colors array and make it as C-f. 106 00:07:48,910 --> 00:07:49,610 Right. 107 00:07:50,200 --> 00:07:52,400 So that part is taking care of that. 108 00:07:52,420 --> 00:07:57,910 I know it's a lot of code and unfortunately we can't really test anything unless we do all of these. 109 00:07:58,210 --> 00:08:01,300 So let's see what we have to do for the locations. 110 00:08:01,300 --> 00:08:07,720 The locations saying give me an array of the locations that you want to use to essentially draw your 111 00:08:08,080 --> 00:08:09,970 or your gradient. 112 00:08:09,970 --> 00:08:19,960 So I'm going to say that the array is called this one all colors locations colors color looks or anything 113 00:08:19,960 --> 00:08:21,740 to that effect doesn't really matter. 114 00:08:21,940 --> 00:08:29,580 And for that I'm going to go ahead and say I have two locations for left zero that is zero. 115 00:08:29,860 --> 00:08:38,150 The middle one which is this one middle the color location and the far right one 1.0. 116 00:08:38,470 --> 00:08:45,100 So those are the three locations that we're going to have and that is going to be used in colors. 117 00:08:45,100 --> 00:08:50,370 Look I'm going to use it in my locations. 118 00:08:50,530 --> 00:08:57,310 So now we have a gradient being made from these colors at these locations. 119 00:08:57,310 --> 00:09:01,520 Of course now I can take my gradient and copy it here. 120 00:09:01,800 --> 00:09:04,020 Let me get everything in one screen. 121 00:09:04,020 --> 00:09:11,710 I mean scale everything properly so you can see all in one go maybe like that and is giving me an error 122 00:09:11,710 --> 00:09:15,210 saying that the value of the grade must be non-nil. 123 00:09:15,250 --> 00:09:21,970 So you have to essentially force on rapid N-word which you could either do it here or you could actually 124 00:09:21,970 --> 00:09:28,450 do it in your grade and say I know this gradient is going to happen because I know these colors exist 125 00:09:28,450 --> 00:09:30,100 and I know these locations exist. 126 00:09:30,250 --> 00:09:32,560 So either all of them do the trick for me. 127 00:09:32,830 --> 00:09:36,880 So off the top we have all the four inspectable. 128 00:09:37,120 --> 00:09:40,340 And we have our draw that maybe I can make it like that. 129 00:09:40,660 --> 00:09:47,590 And then we have all context callers or Akos locations making actual grade and placing the gradient 130 00:09:47,800 --> 00:09:50,890 from this point to that point. 131 00:09:51,080 --> 00:09:58,340 And this go ahead to a story about that in this story we're I'm going to go ahead and make a view. 132 00:09:58,510 --> 00:10:06,040 I'm going to place it here open the inspector window and let it give it a class that is going to be 133 00:10:06,100 --> 00:10:07,840 custom class. 134 00:10:07,990 --> 00:10:14,410 And when we do that it starts doing its thing as tries to render whatever we have in the IP design table 135 00:10:14,880 --> 00:10:17,010 and soon enough we will get the gradient. 136 00:10:17,020 --> 00:10:18,050 Perfect. 137 00:10:18,130 --> 00:10:21,960 And here in the attributes we can actually change these three colors. 138 00:10:22,150 --> 00:10:25,840 I could say one of them is that they are yellow. 139 00:10:25,870 --> 00:10:28,650 The other one is a pink color. 140 00:10:28,910 --> 00:10:36,010 And the last one the middle one and when I make it to be a green color and I of course have this middle 141 00:10:36,010 --> 00:10:43,090 a color locaters which I can put it at point one and then I make that a bit more distinct color such 142 00:10:43,090 --> 00:10:48,570 as Black if I can be better. 143 00:10:48,940 --> 00:10:56,610 So here I'm going to say point to point five point nine point nine five. 144 00:10:56,860 --> 00:11:03,130 And that perfectly controls the gradient only the middle occurred of course but you could if you wanted 145 00:11:03,130 --> 00:11:05,450 to expand and then change everything else. 146 00:11:05,770 --> 00:11:07,200 So that's about that. 147 00:11:07,210 --> 00:11:09,400 A view with a gradient. 148 00:11:09,460 --> 00:11:15,860 I grant that we can control in here and with that in mind let's move on to our next lesson.