1 00:00:08,130 --> 00:00:09,900 YO YO YO WHAT IS UP EVERYBODY. 2 00:00:09,900 --> 00:00:10,600 This is Caleb. 3 00:00:10,600 --> 00:00:13,200 Back again to teach you about extensions. 4 00:00:13,230 --> 00:00:14,200 Super duper cool. 5 00:00:14,220 --> 00:00:16,140 Let's go ahead and get started. 6 00:00:16,140 --> 00:00:18,950 We're going to go ahead and begin in tax code. 7 00:00:18,960 --> 00:00:23,280 We're going to build a really simple app in this video that basically is going to teach you how you 8 00:00:23,280 --> 00:00:24,990 can use extensions in just one way. 9 00:00:24,990 --> 00:00:27,660 There's tons of different ways that you can use extensions. 10 00:00:27,780 --> 00:00:32,640 And I really do encourage you to dive in deeper and get to know more and more what they can do. 11 00:00:33,210 --> 00:00:34,950 Let's go ahead and get started let's build this out. 12 00:00:34,950 --> 00:00:39,990 So go ahead and click Create a new X code project and we're just going to build a simple single view 13 00:00:39,990 --> 00:00:40,700 app. 14 00:00:41,070 --> 00:00:49,100 I'm going to name the extension's dance party because that sounds fun. 15 00:00:49,230 --> 00:00:53,330 Press next and let's save that boom there you go. 16 00:00:53,340 --> 00:00:56,240 Make this full screen beautiful. 17 00:00:56,730 --> 00:01:00,000 And here's what we're going to do folks we're going to start in the main story board. 18 00:01:00,090 --> 00:01:06,030 So go ahead and select main storyboard and we're going to do is we're just going to put three buttons 19 00:01:06,030 --> 00:01:06,840 on the screen. 20 00:01:06,960 --> 00:01:13,470 So let's go ahead and type you I button drag one on and we're going to make it a little bigger like 21 00:01:13,470 --> 00:01:17,340 so little taller and a little shorter. 22 00:01:17,340 --> 00:01:17,820 There we go. 23 00:01:17,850 --> 00:01:22,690 And we're going to go ahead and set the background color to something pretty good. 24 00:01:22,710 --> 00:01:24,140 How about this blue. 25 00:01:24,180 --> 00:01:27,910 That looks nice and the font needs to be white. 26 00:01:27,930 --> 00:01:29,260 That looks great. 27 00:01:29,280 --> 00:01:30,240 Change the font. 28 00:01:30,240 --> 00:01:31,230 You know what I'm going to pick. 29 00:01:31,230 --> 00:01:35,550 If you've seen any of my other videos where I do Interface Builder stuff I love Avenir next. 30 00:01:35,550 --> 00:01:36,670 So do that. 31 00:01:36,810 --> 00:01:40,140 I also like Demi bold and size 20 looks great. 32 00:01:40,140 --> 00:01:44,400 And you know what we're not going to set a title on this button just yet but we are going to go ahead 33 00:01:44,400 --> 00:01:46,400 and duplicate it twice. 34 00:01:46,410 --> 00:01:50,960 OK so duplicate it like so and make a stack of three buttons and you know what. 35 00:01:50,970 --> 00:01:54,400 As these are currently in place we don't actually have to do any constraints. 36 00:01:54,420 --> 00:01:59,010 We should but we're not going to right now just for time because they'll actually stay in place because 37 00:01:59,010 --> 00:02:05,030 we don't have anything else that is screwing up where the interface builder thinks they are on the screen. 38 00:02:05,160 --> 00:02:13,980 So let's see we're going to do three different extension functions or I guess instance methods for these 39 00:02:14,280 --> 00:02:14,900 buttons. 40 00:02:15,030 --> 00:02:19,770 We're going to make an extension of UI button and we're going to enable these UI buttons to sort of 41 00:02:19,770 --> 00:02:24,300 have like super powers or whatever we're going to give them extra functionality that they don't normally 42 00:02:24,300 --> 00:02:26,330 have which is the point of extensions. 43 00:02:26,370 --> 00:02:29,030 So this middle button is going to wiggle. 44 00:02:29,040 --> 00:02:31,440 So just go ahead and type wiggle for the description. 45 00:02:31,450 --> 00:02:39,690 It's this bottom button is going to dim and the top button is going to colorize. 46 00:02:40,090 --> 00:02:41,470 You know what the fonts a little big. 47 00:02:41,640 --> 00:02:43,020 Let's bump it down to 18. 48 00:02:43,350 --> 00:02:43,790 OK. 49 00:02:43,840 --> 00:02:44,660 Super cool. 50 00:02:44,670 --> 00:02:50,160 So let's go ahead and let's set up some connections here for these with Iby actions and Iby outlets. 51 00:02:50,160 --> 00:02:55,320 So bump open the assistant editor and it's going to be a little bit tight here but that's fine. 52 00:02:55,320 --> 00:02:58,160 Let's squeeze that a little tighter there. 53 00:02:58,290 --> 00:03:02,170 Nice and get rid of did receive memory warning. 54 00:03:02,190 --> 00:03:07,080 Get rid of that and we're going to create an outlet and an action for each button. 55 00:03:07,080 --> 00:03:11,260 So go ahead and right click and drag from the colorize button and just name it. 56 00:03:11,280 --> 00:03:18,910 Colorize button ok right click and drag from the wiggle button and go ahead and call it wiggle button. 57 00:03:19,110 --> 00:03:21,380 Kind of feels funny writing that but anyway. 58 00:03:21,660 --> 00:03:26,830 Now right click and drag from the dim button and call it dim button. 59 00:03:26,850 --> 00:03:29,600 All right there we go. 60 00:03:29,730 --> 00:03:30,020 Cool. 61 00:03:30,030 --> 00:03:31,640 So outlets are good. 62 00:03:31,650 --> 00:03:34,770 Let's create some actions now and get rid of that comment. 63 00:03:34,770 --> 00:03:37,370 I really wish you could set it up so that that's not even included. 64 00:03:37,380 --> 00:03:38,880 But you can't. 65 00:03:38,880 --> 00:03:40,350 At least that I know of if you know how. 66 00:03:40,350 --> 00:03:42,200 Send us a message and tell us how. 67 00:03:42,600 --> 00:03:46,650 But now let's go ahead and create some actions for each of these buttons so right click and drag from 68 00:03:46,650 --> 00:03:47,990 the colorize button. 69 00:03:48,210 --> 00:03:56,380 Change the connection to action and call it colorize wups colorize button was pressed. 70 00:03:57,070 --> 00:03:58,470 OK. 71 00:03:58,680 --> 00:04:03,780 Then beneath that right click and drag from the wiggle button change the connection to action and call 72 00:04:03,810 --> 00:04:07,260 wiggle button was pressed. 73 00:04:07,260 --> 00:04:08,040 All righty. 74 00:04:08,460 --> 00:04:12,480 And beneath that finally right click and drag from the dim button. 75 00:04:12,480 --> 00:04:20,520 Change it to an action and call dem button was pressed and we are now properly connected. 76 00:04:20,520 --> 00:04:26,790 So go ahead and close the assistant editor pull open your view controller and we have three connections 77 00:04:26,790 --> 00:04:27,100 here. 78 00:04:27,110 --> 00:04:30,960 IB outlets and we have three IB actions as well. 79 00:04:30,960 --> 00:04:38,730 So let's go ahead and let's create our extension right click on the project folder and click new file 80 00:04:39,710 --> 00:04:44,110 create a swift file like so and we're going to call this UI button. 81 00:04:44,200 --> 00:04:46,470 XTi short for extension. 82 00:04:47,000 --> 00:04:48,570 That's how the slopes team does it. 83 00:04:48,590 --> 00:04:50,030 And that's how we're going to do it here. 84 00:04:50,030 --> 00:04:56,600 So we need to go ahead and create an extension of UI button. 85 00:04:56,870 --> 00:04:57,160 OK. 86 00:04:57,200 --> 00:05:02,980 In the last video I taught you how to create extensions and extended classes like string and ints. 87 00:05:02,990 --> 00:05:08,660 But in this video we're going to be extending UI button which is you know a part of UI kit and that's 88 00:05:08,660 --> 00:05:11,290 actually why we're getting this undeclared type issue. 89 00:05:11,390 --> 00:05:17,720 Replace foundation with you I kid you like it has all the stuff Foundation has and more so that's great. 90 00:05:17,720 --> 00:05:18,310 Awesome. 91 00:05:18,500 --> 00:05:24,890 Now like I said we're going to create some animation functions that are going to give our button the 92 00:05:24,890 --> 00:05:27,100 ability to do some really cool things. 93 00:05:27,110 --> 00:05:31,520 The first function is going to be a function that will wiggle the button on the screen and that would 94 00:05:31,520 --> 00:05:36,770 be a great interface for maybe like an error if you put in the wrong password the button could wiggle 95 00:05:36,770 --> 00:05:40,190 and it could you know pop up an error message saying ant wrong password. 96 00:05:40,190 --> 00:05:43,040 So let's go ahead and let's write that function now. 97 00:05:43,280 --> 00:05:51,080 So go ahead and type phunk wiggle and we're going to use a C-A basic animation part of core animation 98 00:05:51,530 --> 00:05:56,180 just because it's really easy to repeat certain animations easily and we can just add it to this button 99 00:05:57,170 --> 00:06:03,100 really easily so go ahead and type let wiggle Annam equal a basic animation. 100 00:06:03,470 --> 00:06:05,270 And we're going to go ahead and instantiate it. 101 00:06:05,270 --> 00:06:07,700 But you'll notice there are a couple options here. 102 00:06:07,700 --> 00:06:09,950 We want to instantiate it with a key path. 103 00:06:10,010 --> 00:06:10,920 OK. 104 00:06:10,970 --> 00:06:16,250 And the key path we're going to be instantiating is the position k the position of the button because 105 00:06:16,250 --> 00:06:20,330 if you think about it we're moving it back and forth and that's the key path we need to modify. 106 00:06:20,330 --> 00:06:22,710 So go ahead and type position. 107 00:06:23,300 --> 00:06:26,090 OK sort of a little identifier there for what we're doing. 108 00:06:26,510 --> 00:06:30,950 And now we need to set up some of the properties for the wiggle animation so go ahead and type wiggle 109 00:06:30,950 --> 00:06:37,190 and him and we're going to set the duration the amount of times that the animation will repeat whether 110 00:06:37,190 --> 00:06:39,790 or not it will auto reverse the animations. 111 00:06:39,830 --> 00:06:44,450 And then we're going to set kind of the to and from point for the animation so it knows where to go. 112 00:06:44,450 --> 00:06:50,510 So go ahead and type wiggle and duration and we're going to do a very very short duration and we're 113 00:06:50,510 --> 00:06:54,020 going to do it a lot of time so it looks like a quick little almost like a stutter. 114 00:06:54,290 --> 00:06:56,860 So go ahead and type zero point zero five. 115 00:06:56,960 --> 00:06:57,430 OK. 116 00:06:57,490 --> 00:07:02,570 A very short amount of time for the amount of times that it will be repeated. 117 00:07:02,570 --> 00:07:04,120 Go ahead and type wiggle and him. 118 00:07:04,170 --> 00:07:06,980 Don't repeat count and said that to be five. 119 00:07:06,980 --> 00:07:14,570 So whatever animation we set it's going to do it five times set wiggle and him Dot auto reverse is to 120 00:07:14,570 --> 00:07:15,570 be true. 121 00:07:15,770 --> 00:07:16,550 OK. 122 00:07:16,550 --> 00:07:21,200 We want it to automatically reverse if it goes this way we want it to automatically reverse the opposite 123 00:07:21,200 --> 00:07:21,820 way. 124 00:07:21,860 --> 00:07:23,230 Easy is that. 125 00:07:23,270 --> 00:07:26,390 And now we need to set the from and the two value. 126 00:07:26,390 --> 00:07:31,050 So where it goes from and where it goes to and then we'll set the animation to begin. 127 00:07:31,070 --> 00:07:37,830 So type wiggle Annam from value and we're going to set it to be equal to a C.G. point. 128 00:07:37,880 --> 00:07:44,470 So go ahead and type C.G. point and we need to set an x and y value of C.G. float. 129 00:07:44,480 --> 00:07:52,460 So we're basically going to take whatever the center of the button is and we're going to move it forward 130 00:07:52,460 --> 00:07:56,370 to the left then forward to the right four to the left or to the right back and forth. 131 00:07:56,660 --> 00:07:57,950 And that will be our animation. 132 00:07:57,950 --> 00:08:03,520 So in order to capture the value for this button remember in an extension. 133 00:08:03,770 --> 00:08:06,880 Think of this extension as this could apply to any button. 134 00:08:06,920 --> 00:08:11,700 And so what we're actually going to do is we're going to capture a reference to self OK. 135 00:08:11,810 --> 00:08:14,480 We're going to call self centered X 136 00:08:17,240 --> 00:08:21,860 because remember this button is could be any instance of a button. 137 00:08:21,860 --> 00:08:24,910 So we're going to use self because it can apply to any button. 138 00:08:25,160 --> 00:08:30,930 And like I said we're going to move over for so let's say minus 4.0. 139 00:08:30,920 --> 00:08:34,440 Now we don't want to move at all on the y axis although we could. 140 00:08:34,550 --> 00:08:37,810 But for this we're just going to say self centered. 141 00:08:37,820 --> 00:08:38,430 Why. 142 00:08:38,610 --> 00:08:43,700 OK we're going to go from wherever it is on the y axis and we're not going to actually change that in 143 00:08:43,700 --> 00:08:45,230 the two value it's going to be the same. 144 00:08:45,230 --> 00:08:49,020 So it's just going to stay on the y axis where it is and move that way. 145 00:08:49,130 --> 00:08:57,020 So next go ahead and call wiggle and him to value and we're going to set another Siggi point it's basically 146 00:08:57,020 --> 00:08:58,570 going to be the opposite of this one. 147 00:08:58,760 --> 00:09:04,580 So go ahead and call C.G. point and we need to instantiate it with some values K for the x and y. 148 00:09:04,580 --> 00:09:14,670 So like I said call self center X and this time we're going to plus 4.00 we're going to add 4.0 by mistake. 149 00:09:14,900 --> 00:09:16,790 And then for the y value we don't want to change it. 150 00:09:16,850 --> 00:09:22,700 So just call self centered not y meaning whatever button this is applying to. 151 00:09:22,700 --> 00:09:25,480 We're going to take its y value and we're not going to move it. 152 00:09:25,540 --> 00:09:27,260 OK is going to stay the same. 153 00:09:27,290 --> 00:09:31,910 Now in order to add this animation to our button and actually have it do it's thing where we need to 154 00:09:32,000 --> 00:09:40,030 add it to the layer of the button so to do that we can just call la dot add animation. 155 00:09:40,190 --> 00:09:41,000 OK. 156 00:09:41,230 --> 00:09:45,130 So the animation of course is wiggle and but what is the key. 157 00:09:45,130 --> 00:09:50,610 The key is actually our key path so we can just go ahead and type position. 158 00:09:51,190 --> 00:09:52,710 And now our function is done. 159 00:09:52,720 --> 00:09:55,380 I think we should go try to add this to our button. 160 00:09:55,540 --> 00:09:57,150 And I think we should see how it does. 161 00:09:57,190 --> 00:10:00,120 So go ahead and enter the view controller. 162 00:10:00,340 --> 00:10:02,380 And on the wiggle button was pressed. 163 00:10:02,380 --> 00:10:09,400 Watch what we can do now as you can see it is type UI button so we can call wiggle button and our function 164 00:10:10,150 --> 00:10:11,970 wiggle is right there. 165 00:10:11,980 --> 00:10:13,020 Super cool. 166 00:10:13,060 --> 00:10:17,050 So let's go ahead let's build this to a simulator really quick and let's go see if it worked 167 00:10:23,550 --> 00:10:27,670 care simulator's opening up here in the back let's pull it up so we can see it. 168 00:10:27,670 --> 00:10:28,620 There we go. 169 00:10:32,270 --> 00:10:32,600 All right. 170 00:10:32,600 --> 00:10:34,130 So let's take a look. 171 00:10:34,130 --> 00:10:34,790 There's our button. 172 00:10:34,790 --> 00:10:37,510 Watch what happens when I click the wiggle button. 173 00:10:37,760 --> 00:10:40,270 You see that it does our cool wiggle animation. 174 00:10:40,280 --> 00:10:42,240 All buttons do not normally do that. 175 00:10:42,260 --> 00:10:46,820 You could set this to happen in the instance of maybe logging in and maybe log in failed the button 176 00:10:46,820 --> 00:10:48,210 could wiggle upon an error. 177 00:10:48,290 --> 00:10:53,000 Supercool Let's go set up our next two functions dim and colorize. 178 00:10:53,000 --> 00:11:00,380 So go back into your UI button extension and within that extension we're going to write two more functions. 179 00:11:00,380 --> 00:11:04,150 Now extensions don't only have to include one function you can include many many more. 180 00:11:04,310 --> 00:11:06,290 So let's go ahead and write the dim function. 181 00:11:06,290 --> 00:11:10,260 Now go ahead and type phunk dim. 182 00:11:10,880 --> 00:11:16,130 And what we're going to do inside this function is just basically do to animate with durations. 183 00:11:16,130 --> 00:11:20,430 So go ahead and type UI view animate with duration. 184 00:11:20,450 --> 00:11:23,040 Make sure to choose the one with a completion handler. 185 00:11:23,090 --> 00:11:30,040 OK we're going to make the duration 0.1 5 and the animations we're going to take self. 186 00:11:30,300 --> 00:11:36,100 OK so whatever button this is on and we're going to get its alpha value and set it to be zero point 187 00:11:36,100 --> 00:11:37,160 seventy five. 188 00:11:37,320 --> 00:11:42,890 OK so we're going to fade the buttoned down a little bit and then upon completion we're going to fade 189 00:11:42,890 --> 00:11:44,500 it back up to 100 percent. 190 00:11:44,530 --> 00:11:50,200 So press enter and just set a name for the completion here finished. 191 00:11:50,300 --> 00:11:56,870 And inside this completion handler go ahead and make a another view animate with duration and we can 192 00:11:56,870 --> 00:12:03,000 do 0.1 5 again for a total of point three seconds that's usually a good time for the animation. 193 00:12:03,200 --> 00:12:06,070 And then the animations again press enter. 194 00:12:06,260 --> 00:12:13,250 And we need to animate it back up to 100 percent so-called self Alpha and make it 1.0. 195 00:12:13,250 --> 00:12:16,760 Now when we press the button it should fade down and fade back up again. 196 00:12:16,940 --> 00:12:24,830 So let's go ahead and let's call this on button was pressed typed dem dim button and watch this we have 197 00:12:24,830 --> 00:12:27,460 access to dot Dem. 198 00:12:27,500 --> 00:12:28,990 Now it's not showing up yet sometimes. 199 00:12:29,000 --> 00:12:32,210 By the way if it doesn't show up you might need to build and run. 200 00:12:32,210 --> 00:12:35,610 Or just wait a second so you'll see it's not showing up. 201 00:12:35,660 --> 00:12:38,690 And now if I call dem it does pop up. 202 00:12:38,690 --> 00:12:43,100 So sometimes you just have to build so that it gets a chance to look through everything and show you 203 00:12:43,100 --> 00:12:43,800 the right functions. 204 00:12:43,820 --> 00:12:45,230 So let's build and run. 205 00:12:45,230 --> 00:12:51,370 Let's go check this one out and let's see how we did. 206 00:12:51,510 --> 00:12:51,770 All right. 207 00:12:51,780 --> 00:12:58,410 So tap on the wiggle button it wiggles tap on dim and you see that it faded and pop back up. 208 00:12:58,410 --> 00:12:59,250 Really cool. 209 00:12:59,250 --> 00:13:00,560 I like it. 210 00:13:00,640 --> 00:13:06,510 Now you can call any of these you eye button extensions on any of these buttons so I can call them button 211 00:13:06,510 --> 00:13:11,600 dot wiggle and I can make it wiggle and them at the same time which is kind of cool. 212 00:13:12,090 --> 00:13:14,760 You don't have to it's just up to you if you want. 213 00:13:14,760 --> 00:13:18,640 All right let's go right the colorize function which is really cool. 214 00:13:18,870 --> 00:13:22,270 And let's go back into UI button extension. 215 00:13:22,410 --> 00:13:25,420 Let's go ahead and write a function here. 216 00:13:26,190 --> 00:13:27,010 And you know what. 217 00:13:27,030 --> 00:13:30,420 Let me give you some more space to see. 218 00:13:30,420 --> 00:13:31,710 Here we go. 219 00:13:31,710 --> 00:13:31,990 All right. 220 00:13:32,010 --> 00:13:35,460 So go ahead and type phunk colorize. 221 00:13:36,180 --> 00:13:38,710 And inside this function we're going to create an array. 222 00:13:38,850 --> 00:13:39,430 OK. 223 00:13:39,750 --> 00:13:43,560 And it's going to be an array of three random numbers and I'll show you why in a second. 224 00:13:43,560 --> 00:13:51,180 So let's just say let a random number array equals an array of integer. 225 00:13:51,180 --> 00:13:53,370 Actually not integer we need it to be C.G. float. 226 00:13:53,400 --> 00:13:55,110 And you'll see why in a second. 227 00:13:55,640 --> 00:13:56,460 OK. 228 00:13:56,760 --> 00:14:00,010 Now what we're going to do is we're going to generate a random color. 229 00:14:00,030 --> 00:14:09,140 So go ahead and type let a random color wups color and that's going to be equal to you eye color. 230 00:14:09,180 --> 00:14:14,950 Now the random color is going to be generated by generating 3 random numbers that we will fill in for 231 00:14:14,970 --> 00:14:19,010 the red green and blue values seen here for a color. 232 00:14:19,210 --> 00:14:24,810 So select red green blue we can set the alphabet to 1 point zero because we don't want it to be transparent 233 00:14:24,810 --> 00:14:25,360 at all. 234 00:14:25,590 --> 00:14:36,210 But for each of these values we need to divide them by 255 K so divided by 255 divided by two 55. 235 00:14:36,430 --> 00:14:37,580 All right. 236 00:14:37,620 --> 00:14:39,300 Because 2:55 is like the top. 237 00:14:39,300 --> 00:14:44,760 That's like 100 percent and anything below that is a certain value of color for red green and blue. 238 00:14:44,760 --> 00:14:47,730 Now we're going to have three numbers in our array. 239 00:14:47,850 --> 00:14:52,950 So for the first number we can call random number array and we can pull out the first index at index 240 00:14:52,950 --> 00:14:53,740 0. 241 00:14:54,030 --> 00:15:01,320 Next we can go ahead and call random number array and pull out the first or the second index at index 242 00:15:01,320 --> 00:15:02,320 1. 243 00:15:02,490 --> 00:15:08,220 Then we can call a random number array and we can pull out the index that the item an index to for number 244 00:15:08,220 --> 00:15:09,420 three. 245 00:15:09,420 --> 00:15:16,020 Now the reason that they're coming in as C.G. float are because if you looked at the color declaration 246 00:15:16,020 --> 00:15:17,850 it requires a value of to float. 247 00:15:17,850 --> 00:15:24,810 So we're just helping it out by putting in the right type. 248 00:15:24,950 --> 00:15:25,240 All right. 249 00:15:25,250 --> 00:15:32,600 So now that we have our random color generated we need to go ahead and set the color to actually show 250 00:15:32,600 --> 00:15:36,160 up so we're going to do a nice little animation here to change the color. 251 00:15:36,350 --> 00:15:39,790 So go ahead and type you I view animate with adoration. 252 00:15:40,070 --> 00:15:40,710 OK. 253 00:15:40,820 --> 00:15:43,470 Go ahead and give it 0.3 seconds. 254 00:15:43,490 --> 00:15:48,410 And for the animation we're going to change the background color so to access the background color of 255 00:15:48,410 --> 00:15:55,970 the button we can call self background color and set it to be random color just like that and it will 256 00:15:55,970 --> 00:15:58,900 fade to our next color it's really really cool. 257 00:15:58,910 --> 00:16:02,600 Now the thing that we're having a problem with though this is an empty array. 258 00:16:02,630 --> 00:16:06,890 We need to be able to generate three random numbers but we don't yet have the ability to do that. 259 00:16:06,920 --> 00:16:11,600 So we're going to need to make a function that's going to generate three random numbers but it doesn't 260 00:16:11,600 --> 00:16:13,660 quite fit into our UI button extension. 261 00:16:13,670 --> 00:16:18,480 So I'm just going to create a new Swift file and I'm going to name it. 262 00:16:18,520 --> 00:16:23,570 Helper's and this is where I'm just going to put a helper function that's going to generate the numbers 263 00:16:23,570 --> 00:16:24,020 we need. 264 00:16:24,200 --> 00:16:30,080 So go ahead and import you ikat because we're also going to need it in this file and go ahead and just 265 00:16:30,080 --> 00:16:37,880 call phunk generate whip's 3 random numbers. 266 00:16:37,880 --> 00:16:43,760 And of course this is a function so we need curly braces but let's think what actually that's not a 267 00:16:43,760 --> 00:16:44,420 very good function. 268 00:16:44,420 --> 00:16:48,010 I should make it so that I can pass in whatever quantity I want. 269 00:16:48,110 --> 00:16:52,400 OK so generate random numbers quantity I can tell how many I want. 270 00:16:52,400 --> 00:16:59,270 And then of course to return we want to return an array of C.G. float because if you remember in our 271 00:16:59,270 --> 00:17:02,480 extension that's what we need are to be C.G. float. 272 00:17:02,630 --> 00:17:11,540 So inside this function go ahead and create an empty array of C.G. float like so far random number array 273 00:17:12,200 --> 00:17:14,450 is equal to an array of C.G. float. 274 00:17:14,540 --> 00:17:16,830 And we're going to instantiate it from the beginning. 275 00:17:16,850 --> 00:17:19,880 Now we've passed in a number for the quantity. 276 00:17:19,940 --> 00:17:29,920 So to do that we can say for underscore in one all the way up the three dots means all the way up to 277 00:17:29,960 --> 00:17:35,450 quantity meaning if I said three we're going to go all the way from 1 2 to 3 and all the way to the 278 00:17:35,480 --> 00:17:40,580 very end of three and stop there and we're using an underscore here because we don't actually need to 279 00:17:40,580 --> 00:17:45,740 pass in like a value for I we don't need to capture the value of the number because it's never going 280 00:17:45,740 --> 00:17:50,150 to be used so we can just use an underscore to tell them we're not going to use the value but we want 281 00:17:50,150 --> 00:17:52,030 to go through a for loop three times. 282 00:17:52,040 --> 00:17:57,140 So we're going to basically create a random number appended to this array and then at the end of the 283 00:17:57,140 --> 00:17:59,210 for loop we're going to return the array of numbers. 284 00:17:59,210 --> 00:18:08,340 So go ahead and type let a random number equals and we can use a function in swift arc for random uniform. 285 00:18:08,370 --> 00:18:12,300 Now you notice here that it says upper bound you end 32. 286 00:18:12,380 --> 00:18:17,120 What we can do is we can set the highest value that it'll be allowed to go. 287 00:18:17,270 --> 00:18:19,670 And we're going to set that to be 255. 288 00:18:19,880 --> 00:18:23,350 Because all three values being 255 should be the highest. 289 00:18:23,510 --> 00:18:26,170 But you'll notice this is going to give us a problem. 290 00:18:26,350 --> 00:18:30,030 Our random uniform returns something called a 32. 291 00:18:30,140 --> 00:18:32,180 That's a 32 bit unsigned integer. 292 00:18:32,180 --> 00:18:34,210 But we need it to be a C.G. float. 293 00:18:34,370 --> 00:18:39,100 So therefore we're going to need to wrap this in parentheses and cast it as a C.G. float. 294 00:18:39,140 --> 00:18:44,180 So in X code 9 you can select the whole thing create a parentheses and then at the beginning just type 295 00:18:44,180 --> 00:18:46,550 C.G. float and it becomes NCG float. 296 00:18:46,550 --> 00:18:47,950 Really cool. 297 00:18:47,960 --> 00:18:54,980 Now we need to append it to our random number array so called random number right that a pen and we're 298 00:18:54,980 --> 00:18:57,590 going to go ahead and pass in the random number. 299 00:18:57,590 --> 00:19:03,410 So every time we go through one two three we append random numbers and at the very end we're going to 300 00:19:03,410 --> 00:19:06,060 return a random number array. 301 00:19:06,520 --> 00:19:10,400 So supercool this function will generate random numbers for us. 302 00:19:10,400 --> 00:19:13,780 Now let's go past that in to our UI button extension. 303 00:19:14,390 --> 00:19:18,580 So go ahead and instead of calling an empty C.G. float here. 304 00:19:18,590 --> 00:19:25,520 Go ahead and type generate random numbers and we want to generate 3 3 Get return they get passed in 305 00:19:25,520 --> 00:19:30,410 here a random number and color you generated and it gets set to the background color of the button. 306 00:19:30,740 --> 00:19:36,170 So let's go try to build and run and pull open your simulator Let's go see oh you know what. 307 00:19:36,170 --> 00:19:36,780 Wait a minute. 308 00:19:36,800 --> 00:19:38,040 Button is not going to work. 309 00:19:38,090 --> 00:19:39,020 We did not set it. 310 00:19:39,020 --> 00:19:41,300 In our view controller there we go. 311 00:19:41,300 --> 00:19:43,590 So call colorize button. 312 00:19:43,610 --> 00:19:44,720 Colorize. 313 00:19:44,750 --> 00:19:45,230 There it is. 314 00:19:45,230 --> 00:19:51,650 And now BuildOn run now we should be able to change the color and faded nicely with a touch of a button. 315 00:19:51,650 --> 00:19:52,730 Let's try it out. 316 00:19:53,180 --> 00:19:56,240 Ooh nice. 317 00:19:56,240 --> 00:19:57,290 Really cool do you see that. 318 00:19:57,290 --> 00:19:59,470 It's fading to the next color. 319 00:19:59,690 --> 00:20:04,610 We can wiggle buttons we can dim buttons we can do all kinds of amazing things thanks to extensions 320 00:20:04,610 --> 00:20:06,400 so I hope you've enjoyed this video. 321 00:20:06,410 --> 00:20:09,640 This is video two of the two part series on extensions. 322 00:20:09,650 --> 00:20:15,080 There are so many more things you can do guys with extensions so go dive into the documentation go read 323 00:20:15,080 --> 00:20:15,880 more about it. 324 00:20:15,890 --> 00:20:17,800 This is just kind of the tip of the iceberg. 325 00:20:17,810 --> 00:20:20,030 So I really encourage you to do that. 326 00:20:20,030 --> 00:20:21,470 Thanks so much for watching this video. 327 00:20:21,470 --> 00:20:23,050 And let's head over to the next one.