1
00:00:08,090 --> 00:00:10,500
YO YO YO WHAT IS UP EVERYBODY this is Caleb.

2
00:00:10,500 --> 00:00:13,180
Back again to teach you about extensions.

3
00:00:13,190 --> 00:00:14,150
Super duper cool.

4
00:00:14,180 --> 00:00:16,070
Let's go ahead and get started.

5
00:00:16,070 --> 00:00:18,870
We're going to go ahead and begin in tax code.

6
00:00:18,890 --> 00:00:23,210
We're going to build a really simple app in this video that basically is going to teach you how you

7
00:00:23,210 --> 00:00:24,920
can use extensions in just one way.

8
00:00:24,920 --> 00:00:27,610
There's tons of different ways that you can use extensions.

9
00:00:27,740 --> 00:00:32,580
And I really do encourage you to dive in deeper and get to know more and more what they can do.

10
00:00:33,140 --> 00:00:34,910
Let's go ahead and get started let's build this out.

11
00:00:34,910 --> 00:00:39,950
So go ahead and click Create a new X code project and we're just going to build a simple single view

12
00:00:39,950 --> 00:00:44,690
app I'm going to name the extensions.

13
00:00:44,840 --> 00:00:49,050
Dance party because that sounds fun.

14
00:00:49,160 --> 00:00:51,260
Press next and let's save that.

15
00:00:51,260 --> 00:00:52,550
Boom.

16
00:00:52,690 --> 00:00:56,200
There you go make this full screen beautiful.

17
00:00:56,660 --> 00:01:00,010
And here's what we're going to do folks we're going to start in the main storyboard.

18
00:01:00,020 --> 00:01:05,960
So go ahead and select main storyboard and what we're going to do is we're just going to put three buttons

19
00:01:05,960 --> 00:01:06,870
on the screen.

20
00:01:06,920 --> 00:01:13,400
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,400 --> 00:01:17,270
so little taller and a little shorter.

22
00:01:17,270 --> 00:01:17,750
There we go.

23
00:01:17,810 --> 00:01:21,830
And we're going to go ahead and set the background color to something pretty.

24
00:01:22,470 --> 00:01:24,110
Ok how about this blue.

25
00:01:24,140 --> 00:01:24,940
That looks nice.

26
00:01:24,950 --> 00:01:27,840
And the font it needs to be white.

27
00:01:27,890 --> 00:01:29,210
That looks great.

28
00:01:29,210 --> 00:01:30,170
Change the font.

29
00:01:30,170 --> 00:01:31,190
You know what I'm going to pick.

30
00:01:31,190 --> 00:01:35,480
If you've seen any of my other videos where I do Interface Builder stuff I love Avenir next.

31
00:01:35,480 --> 00:01:36,690
So do that.

32
00:01:36,770 --> 00:01:40,070
I also like Demi bold and size 20 looks great.

33
00:01:40,070 --> 00:01:44,330
And you know what we're not going to set a title on this button just yet but we are going to go ahead

34
00:01:44,360 --> 00:01:46,360
and duplicate it twice.

35
00:01:46,380 --> 00:01:50,900
OK so duplicated like so and make a stack of three buttons and you know what.

36
00:01:50,900 --> 00:01:54,380
As these are currently in place we don't actually have to do any constraints.

37
00:01:54,380 --> 00:01:58,940
We should but we're not going to right now just for time because they'll actually stay in place because

38
00:01:58,940 --> 00:02:05,120
we don't have anything else that is screwing up where the interface builder thinks they are on the screen.

39
00:02:05,120 --> 00:02:13,910
So let's see we're going to do three different extension functions or I guess instance methods for these

40
00:02:14,260 --> 00:02:14,840
buttons.

41
00:02:14,990 --> 00:02:19,910
We're going to make an extension of UI button and we're going to enable these buttons to sort of have

42
00:02:19,910 --> 00:02:24,230
like super powers or whatever we're going to give them extra functionality that they don't normally

43
00:02:24,230 --> 00:02:26,260
have which is the point of extensions.

44
00:02:26,300 --> 00:02:28,970
So this middle button is going to wiggle.

45
00:02:28,970 --> 00:02:31,330
So just go ahead and type wiggle for the description.

46
00:02:31,340 --> 00:02:39,990
It's this bottom button is going to dim and the top button is going to colorize.

47
00:02:39,990 --> 00:02:41,450
You know what the fonts a little big.

48
00:02:41,570 --> 00:02:42,960
Let's bump it down to 18.

49
00:02:43,310 --> 00:02:43,750
OK.

50
00:02:43,810 --> 00:02:44,600
Super cool.

51
00:02:44,600 --> 00:02:49,940
So let's go ahead and let's set up some connections here for these with Iby actions and Iby outlets.

52
00:02:50,090 --> 00:02:55,280
So bump open the assistant editor and it's going to be a little bit tight here but that's fine.

53
00:02:55,280 --> 00:02:58,150
Let's squeeze that a little tighter there.

54
00:02:58,250 --> 00:02:58,920
Nice.

55
00:02:59,010 --> 00:03:01,990
And get rid of did receive memory warning.

56
00:03:02,120 --> 00:03:07,030
Get rid of that and we're going to create an outlet and an action for each button.

57
00:03:07,040 --> 00:03:11,200
So go ahead and right click and drag from the colorize button and just name it.

58
00:03:11,210 --> 00:03:14,030
Colorize button OK.

59
00:03:14,180 --> 00:03:18,840
Right click and drag from the wiggle button and go ahead and call it wiggle button.

60
00:03:19,040 --> 00:03:21,080
Kind of feels funny writing that but anyway.

61
00:03:21,610 --> 00:03:26,400
Now right click and drag from the dim button and call it dim button.

62
00:03:26,780 --> 00:03:29,080
All right there we go.

63
00:03:29,660 --> 00:03:29,960
Cool.

64
00:03:29,960 --> 00:03:31,580
So outlets are good.

65
00:03:31,610 --> 00:03:34,720
Let's create some actions now and get rid of that comment.

66
00:03:34,720 --> 00:03:37,330
I really wish you could set it up so that that's not even included.

67
00:03:37,340 --> 00:03:38,650
But you can't.

68
00:03:38,810 --> 00:03:40,300
At least that I know of if you know how.

69
00:03:40,300 --> 00:03:42,130
Send us a message and tell us how.

70
00:03:42,530 --> 00:03:45,020
But now let's go ahead and create some actions for each of these buttons.

71
00:03:45,020 --> 00:03:51,590
So right click and drag from the colorize button change the connection to action and call it colorize

72
00:03:51,640 --> 00:03:56,720
whoops colorize button was pressed.

73
00:03:57,170 --> 00:03:58,410
OK.

74
00:03:58,610 --> 00:04:03,710
Then beneath that right click and drag from the wiggle button change the connection to action and call

75
00:04:03,740 --> 00:04:06,970
wiggle button was pressed.

76
00:04:07,190 --> 00:04:07,990
All righty.

77
00:04:08,390 --> 00:04:12,270
And beneath that finally right click and drag from the dim button.

78
00:04:12,440 --> 00:04:20,450
Change it to an action and call dem button was pressed and we are now properly connected.

79
00:04:20,450 --> 00:04:26,720
So go ahead and close the assistant editor pull open your view controller and we have three connections

80
00:04:26,720 --> 00:04:27,010
here.

81
00:04:27,030 --> 00:04:30,890
IB outlets and we have three IB actions as well.

82
00:04:30,900 --> 00:04:38,660
So let's go ahead and let's create our extension right click on the project folder and click new file

83
00:04:39,680 --> 00:04:41,430
create a swift file like so.

84
00:04:41,600 --> 00:04:44,070
And we're going to call this UI button.

85
00:04:44,100 --> 00:04:45,870
XTi short for extension.

86
00:04:45,890 --> 00:04:46,570
OK.

87
00:04:46,940 --> 00:04:48,520
That's how the slopes team does it.

88
00:04:48,530 --> 00:04:49,970
And that's how we're going to do it here.

89
00:04:49,970 --> 00:04:56,560
So we need to go ahead and create an extension of UI button.

90
00:04:56,810 --> 00:04:57,100
OK.

91
00:04:57,140 --> 00:05:02,930
In the last video I taught you how to create extensions and extended classes like string and ints.

92
00:05:02,930 --> 00:05:08,610
But in this video we're going to be extending UI button which is you know a part of UI kit and that's

93
00:05:08,610 --> 00:05:11,340
actually why we're getting this undeclared type issue.

94
00:05:11,340 --> 00:05:17,620
Replace foundation with UI kit you like it has all the stuff Foundation has and more so that's great.

95
00:05:17,670 --> 00:05:18,430
Awesome.

96
00:05:18,470 --> 00:05:24,840
Now like I said we're going to create some animation functions that are going to give our button the

97
00:05:24,840 --> 00:05:27,050
ability to do some really cool things.

98
00:05:27,060 --> 00:05:31,470
The first function is going to be a function that will wiggle the button on the screen and that would

99
00:05:31,470 --> 00:05:36,720
be a great interface for maybe like an error if you put in the wrong password the button could wiggle

100
00:05:36,720 --> 00:05:40,140
and it could you know pop up an error message saying ant wrong password.

101
00:05:40,140 --> 00:05:42,990
So let's go ahead and let's write that function now.

102
00:05:43,230 --> 00:05:51,030
So go ahead and type phunk wiggle and we're going to use a CA basic animation part of core animation

103
00:05:51,480 --> 00:05:56,130
just because it's really easy to repeat certain animations easily and we can just add it to this button

104
00:05:57,090 --> 00:06:02,950
really easily so go ahead and type let wiggle them equal a basic animation.

105
00:06:03,420 --> 00:06:05,200
And we're going to go ahead and instantiate it.

106
00:06:05,220 --> 00:06:07,410
But you'll notice there are a couple options here.

107
00:06:07,620 --> 00:06:09,780
We want to instantiate it with a key path.

108
00:06:09,930 --> 00:06:10,610
OK.

109
00:06:10,920 --> 00:06:16,170
And the key path we're going to be instantiating is the position k the position of the button because

110
00:06:16,170 --> 00:06:20,280
if you think about it we're moving it back and forth and that's the key path we need to modify.

111
00:06:20,280 --> 00:06:22,570
So go ahead and type position.

112
00:06:23,220 --> 00:06:26,210
OK sort of a little a little identifier there for what we're doing.

113
00:06:26,430 --> 00:06:30,900
And now we need to set up some of the properties for the wiggle animation so go ahead and type wiggle

114
00:06:30,900 --> 00:06:37,140
and him and we're going to set the duration the amount of times that the animation will repeat whether

115
00:06:37,140 --> 00:06:39,680
or not it will auto reverse the animations.

116
00:06:39,780 --> 00:06:44,310
And then we're going to set kind of the to and from point for the animation so it knows where to go.

117
00:06:44,400 --> 00:06:50,460
So go ahead and type wiggle and duration and we're going to do a very very short duration and we're

118
00:06:50,460 --> 00:06:54,240
going to do it a lot of times so it looks like a quick little almost like a stutter.

119
00:06:54,240 --> 00:06:56,830
So go ahead and type zero point zero five.

120
00:06:56,940 --> 00:06:57,450
OK.

121
00:06:57,470 --> 00:07:02,490
A very short amount of time for the amount of times that it will be repeated.

122
00:07:02,490 --> 00:07:04,210
Go ahead and type wiggle and him.

123
00:07:04,290 --> 00:07:06,930
Repeat count and said that to be five.

124
00:07:06,930 --> 00:07:10,650
So whatever animation we set it's going to do it five times.

125
00:07:10,650 --> 00:07:15,530
Set wiggle and him Dot auto reverses to be true.

126
00:07:15,710 --> 00:07:16,300
OK.

127
00:07:16,500 --> 00:07:21,150
We want it to automatically reverse so if it goes this way we want it to automatically reverse the opposite

128
00:07:21,150 --> 00:07:21,740
way.

129
00:07:21,780 --> 00:07:23,140
Easy is that.

130
00:07:23,220 --> 00:07:26,330
And now we need to set the from and the two value.

131
00:07:26,340 --> 00:07:31,000
So where it goes from and where it goes to and then we'll set the animation to begin.

132
00:07:31,020 --> 00:07:37,800
So type wiggle and drop from value and we're going to set it to be equal to a C.G. point.

133
00:07:37,800 --> 00:07:44,390
So go ahead and type C.G. point and we need to set an x and y value of cGC float.

134
00:07:44,400 --> 00:07:52,410
So we're basically going to take whatever the center of the button is and we're going to move it forward

135
00:07:52,410 --> 00:07:56,420
to the left then forward to the right four to the left or to the right back and forth.

136
00:07:56,610 --> 00:07:57,900
And that will be our animation.

137
00:07:57,900 --> 00:08:04,800
So in order to capture the value for this button remember in an extension think of this extension as

138
00:08:04,800 --> 00:08:06,740
this could apply to any button.

139
00:08:06,870 --> 00:08:12,030
And so what we're actually going to do is we're going to capture a reference to self K we're going to

140
00:08:12,030 --> 00:08:14,600
call a self centered dot X

141
00:08:17,190 --> 00:08:21,810
because remember this button is could be any instance of a button.

142
00:08:21,810 --> 00:08:24,990
So we're going to use self because it can apply to any button.

143
00:08:25,110 --> 00:08:30,820
And like I said we're going to move over for so let's say minus four point zero.

144
00:08:30,840 --> 00:08:36,000
Now we don't want to move at all on the y axis although we could but for this we're just going to say

145
00:08:36,000 --> 00:08:37,710
self centered.

146
00:08:37,770 --> 00:08:43,200
Why K we're going to go from wherever it is on the y axis and we're not going to actually change that

147
00:08:43,500 --> 00:08:45,150
in the two value it's going to be the same.

148
00:08:45,150 --> 00:08:49,070
So it's just going to stay on the y axis where it is and move that way.

149
00:08:49,080 --> 00:08:56,970
So next go ahead and call wiggle and him to value and we're going to set another C-g point it's basically

150
00:08:56,970 --> 00:08:58,500
going to be the opposite of this one.

151
00:08:58,710 --> 00:09:04,500
So go ahead and call C.G. point and we need to instantiate it with some values K for the x and y.

152
00:09:04,500 --> 00:09:14,730
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.

153
00:09:14,850 --> 00:09:16,730
And then for the y value we don't want to change it.

154
00:09:16,770 --> 00:09:22,470
So just call self centered not y meaning whatever button this is applying to.

155
00:09:22,620 --> 00:09:25,340
We're going to take its y value and we're not going to move it.

156
00:09:25,460 --> 00:09:25,700
OK.

157
00:09:25,710 --> 00:09:27,240
It's going to stay the same.

158
00:09:27,240 --> 00:09:31,860
Now in order to add this animation to our button and actually have it do it's thing where we need to

159
00:09:31,920 --> 00:09:40,170
add it to the layer of the button so to do that we can just call léa dot add animation.

160
00:09:40,170 --> 00:09:40,920
OK.

161
00:09:41,160 --> 00:09:45,060
So the animation of course is wiggle and but what is the key.

162
00:09:45,060 --> 00:09:48,120
The key is actually our key path.

163
00:09:48,120 --> 00:09:50,830
So we can just go ahead and type position.

164
00:09:51,120 --> 00:09:52,650
And now our function is done.

165
00:09:52,650 --> 00:09:57,060
I think we should go try to add this to our button and I think we should see how it does.

166
00:09:57,120 --> 00:10:00,270
So go ahead and enter the view controller.

167
00:10:00,270 --> 00:10:02,310
And on the wiggle button was pressed.

168
00:10:02,310 --> 00:10:09,340
Watch what we can do now as you can see it is type II button so we can call wiggle button and our function

169
00:10:10,090 --> 00:10:11,900
wiggle is right there.

170
00:10:11,920 --> 00:10:12,960
Super cool.

171
00:10:13,000 --> 00:10:17,160
So let's go ahead let's build this to a simulator really quick and let's go see if it worked.

172
00:10:23,520 --> 00:10:27,600
Care simulator's opening up here in the back let's pull it up so we can see it.

173
00:10:27,600 --> 00:10:28,490
There we go.

174
00:10:32,210 --> 00:10:32,530
All right.

175
00:10:32,540 --> 00:10:34,070
So let's take a look.

176
00:10:34,070 --> 00:10:34,730
There's our button.

177
00:10:34,730 --> 00:10:37,480
Watch what happens when I click the wiggle button.

178
00:10:37,700 --> 00:10:40,220
You see that it does our cool wiggle animation.

179
00:10:40,220 --> 00:10:42,170
All buttons do not normally do that.

180
00:10:42,200 --> 00:10:46,760
You could set this to happen in the instance of maybe logging in and maybe log in failed the button

181
00:10:46,760 --> 00:10:48,200
can wiggle upon an error.

182
00:10:48,250 --> 00:10:52,890
Supercool Let's go set up our next two functions dim and colorize.

183
00:10:52,940 --> 00:11:00,250
So go back into your UI button extension and within that extension we're going to write two more functions.

184
00:11:00,320 --> 00:11:04,080
Now extensions don't only have to include one function you can include many many more.

185
00:11:04,250 --> 00:11:06,830
So let's go ahead and write the dim function now.

186
00:11:07,100 --> 00:11:10,290
Go ahead and type phunk dim.

187
00:11:10,820 --> 00:11:16,070
And what we're going to do inside this function is just basically do to animate with durations.

188
00:11:16,070 --> 00:11:17,490
So go ahead and type UI.

189
00:11:17,520 --> 00:11:18,620
View.

190
00:11:18,860 --> 00:11:20,390
Animate with duration.

191
00:11:20,390 --> 00:11:23,010
Make sure to choose the one with a completion handler.

192
00:11:23,030 --> 00:11:30,170
OK we're going to make the duration 0.1 5 and the animations we're going to take self.

193
00:11:30,240 --> 00:11:36,020
OK so whatever button this is on and we're going to get its alpha value and set it to be zero point

194
00:11:36,020 --> 00:11:37,200
seven five.

195
00:11:37,230 --> 00:11:42,830
OK so we're going to fade the buttoned down a little bit and then upon completion we're going to fade

196
00:11:42,830 --> 00:11:44,430
it back up to 100 percent.

197
00:11:44,450 --> 00:11:50,120
So press enter and just set a name for the completion here finished.

198
00:11:50,240 --> 00:11:56,810
And inside this completion handler go ahead and make a another view animate with duration and we can

199
00:11:56,810 --> 00:12:00,550
do 0.1 5 again for a total of point three seconds.

200
00:12:00,550 --> 00:12:02,780
That's usually a good time for the animation.

201
00:12:03,140 --> 00:12:06,010
And then the animations again press enter.

202
00:12:06,200 --> 00:12:13,170
And we need to animate it back up to 100 percent so-called self Alpha and make it 1.0.

203
00:12:13,190 --> 00:12:16,870
Now when we press the button it should fade down and fade back up again.

204
00:12:16,880 --> 00:12:24,770
So let's go ahead and let's call this on button was pressed typed dem dem button and watch this we have

205
00:12:24,770 --> 00:12:27,400
access to dot Dem.

206
00:12:27,440 --> 00:12:28,910
Now it's not showing up yet sometimes.

207
00:12:28,940 --> 00:12:32,140
By the way if it doesn't show up you might need to build and run.

208
00:12:32,150 --> 00:12:35,570
Or just wait a second so you'll see it's not showing up.

209
00:12:35,620 --> 00:12:38,630
And now if I call dem it does pop up.

210
00:12:38,630 --> 00:12:43,040
So sometimes you just have to build so that it gets a chance to look through everything and show you

211
00:12:43,040 --> 00:12:43,750
the right functions.

212
00:12:43,760 --> 00:12:45,170
So let's build and run.

213
00:12:45,170 --> 00:12:51,320
Let's go check this one out and let's see how we did.

214
00:12:51,450 --> 00:12:51,710
All right.

215
00:12:51,720 --> 00:12:58,350
So tap on the wiggle button it wiggles tap on dim and you see that it faded and pop back up.

216
00:12:58,350 --> 00:12:59,160
Really cool.

217
00:12:59,190 --> 00:13:00,440
I like it.

218
00:13:00,580 --> 00:13:06,110
Now you can call any of these you eye button extensions on any of these buttons so I could call them

219
00:13:06,120 --> 00:13:11,950
button dot wiggle and I can make it wiggle and dim at the same time which is kind of cool.

220
00:13:12,030 --> 00:13:14,700
You don't have to it's just up to you if you want.

221
00:13:14,700 --> 00:13:15,860
All right let's go right.

222
00:13:15,970 --> 00:13:18,570
The colorize function which is really cool.

223
00:13:18,810 --> 00:13:22,240
And let's go back into UI button extension.

224
00:13:22,350 --> 00:13:25,520
Let's go ahead and write a function here.

225
00:13:26,130 --> 00:13:26,940
And you know what.

226
00:13:26,970 --> 00:13:30,100
Let me give you some more space to see.

227
00:13:30,360 --> 00:13:31,650
Here we go.

228
00:13:31,650 --> 00:13:31,930
All right.

229
00:13:31,950 --> 00:13:35,370
So go ahead and type phunk colorize.

230
00:13:36,120 --> 00:13:38,650
And inside this function we're going to create an array.

231
00:13:38,790 --> 00:13:39,390
OK.

232
00:13:39,690 --> 00:13:43,500
And it's going to be an array of three random numbers and I'll show you why in a second.

233
00:13:43,500 --> 00:13:51,120
So let's just say let a random number array equals an array of integer.

234
00:13:51,120 --> 00:13:53,320
Actually not integer we need it to be C.G. float.

235
00:13:53,340 --> 00:13:55,050
And you'll see why in a second.

236
00:13:55,590 --> 00:13:56,470
OK.

237
00:13:56,700 --> 00:13:59,960
Now what we're going to do is we're going to generate a random color.

238
00:13:59,970 --> 00:14:09,120
So go ahead and type let a random color WIPs color and that's going to be equal to you eye color.

239
00:14:09,120 --> 00:14:14,900
Now the random color is going to be generated by generating 3 random numbers that we will fill in for

240
00:14:14,910 --> 00:14:17,220
the red green and blue values.

241
00:14:17,250 --> 00:14:18,950
Seen here for a color.

242
00:14:19,140 --> 00:14:24,750
So select red green blue we can set the alphabet to 1 point zero because we don't want it to be transparent

243
00:14:24,750 --> 00:14:25,310
at all.

244
00:14:25,530 --> 00:14:35,140
But for each of these values we need to divide them by 255 K so divided by 255 divided by two fifty

245
00:14:35,150 --> 00:14:36,160
55.

246
00:14:36,390 --> 00:14:37,200
All right.

247
00:14:37,560 --> 00:14:39,240
Because 2:55 is like the top.

248
00:14:39,240 --> 00:14:44,700
That's like 100 percent and anything below that is a certain value of color for red green and blue.

249
00:14:44,700 --> 00:14:47,670
Now we're going to have three numbers in our array.

250
00:14:47,790 --> 00:14:52,890
So for the first number we can call random number array and we can pull out the first index at index

251
00:14:52,890 --> 00:14:53,970
0.

252
00:14:53,970 --> 00:15:01,260
Next we can go ahead and call random number array and pull out the first or the second index at index

253
00:15:01,260 --> 00:15:02,260
1.

254
00:15:02,430 --> 00:15:08,160
Then we can call a random number array and we can pull out the index that the item an index to for number

255
00:15:08,160 --> 00:15:09,360
three.

256
00:15:09,360 --> 00:15:15,960
Now the reason that they're coming in as C.G. float are because if you looked at the color declaration

257
00:15:15,960 --> 00:15:17,790
it requires a value of c to float.

258
00:15:17,790 --> 00:15:24,750
So we're just helping it out by putting in the right type.

259
00:15:24,890 --> 00:15:32,210
All right so now that we have our random color generated we need to go ahead and set the color to actually

260
00:15:32,210 --> 00:15:36,100
show up so we're going to do a nice little animation here to change the color.

261
00:15:36,290 --> 00:15:39,740
So go ahead and type you I view animate with adoration.

262
00:15:40,010 --> 00:15:40,640
OK.

263
00:15:40,760 --> 00:15:43,440
Go ahead and give it 0.3 seconds.

264
00:15:43,430 --> 00:15:48,350
And for the animation we're going to change the background color so to access the background color of

265
00:15:48,350 --> 00:15:55,910
the button we can call self background color and set it to be random color just like that and it will

266
00:15:55,910 --> 00:15:58,850
fade to our next color it's really really cool.

267
00:15:58,850 --> 00:16:02,540
Now the thing that we're having a problem with though is this is an empty array.

268
00:16:02,570 --> 00:16:06,830
We need to be able to generate three random numbers but we don't yet have the ability to do that.

269
00:16:06,860 --> 00:16:11,540
So we're going to need to make a function that's going to generate three random numbers but it doesn't

270
00:16:11,540 --> 00:16:17,570
quite fit into our UI button extension so I'm just going to create a new Swift file and I'm going to

271
00:16:17,570 --> 00:16:18,420
name it.

272
00:16:18,470 --> 00:16:23,510
Helper's and this is where I'm just going to put a helper function that's going to generate the numbers

273
00:16:23,510 --> 00:16:23,960
we need.

274
00:16:24,140 --> 00:16:30,020
So go ahead and import you ikat because we're also going to need it in this file and go ahead and just

275
00:16:30,020 --> 00:16:37,030
call phunk generate whip's three random numbers.

276
00:16:37,820 --> 00:16:43,700
And of course this is a function so we need curly braces but let's think what actually that's not a

277
00:16:43,700 --> 00:16:44,360
very good function.

278
00:16:44,360 --> 00:16:47,960
I should make it so that I can pass in whatever quantity I want.

279
00:16:48,050 --> 00:16:52,340
OK so generate random numbers quantity I can tell how many I want.

280
00:16:52,340 --> 00:16:59,210
And then of course to return we want to return an array of C.G. float because if you remember in our

281
00:16:59,210 --> 00:17:02,570
extension that's what we need are to be C.G. flow.

282
00:17:02,570 --> 00:17:10,490
So inside this function go ahead and create an empty array of C.G. float like so far.

283
00:17:10,520 --> 00:17:14,390
Random number array is equal to an array of C.G. float.

284
00:17:14,480 --> 00:17:16,790
And we're going to instantiate it from the beginning.

285
00:17:16,790 --> 00:17:19,880
Now we've passed in a number for the quantity.

286
00:17:19,880 --> 00:17:29,860
So to do that we can say for underscore in one all the way of the three dots means all the way up to

287
00:17:29,900 --> 00:17:35,390
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

288
00:17:35,420 --> 00:17:40,520
very end of three and stop there and we're using an underscore here because we don't actually need to

289
00:17:40,520 --> 00:17:45,680
pass in like a value for I we don't need to capture the value of the number because it's never going

290
00:17:45,680 --> 00:17:50,090
to be used so we can just use an underscore to tell them we're not going to use the value but we want

291
00:17:50,090 --> 00:17:51,910
to go through a for loop three times.

292
00:17:51,980 --> 00:17:57,080
So we're going to basically create a random number appended to this array and then at the end of the

293
00:17:57,080 --> 00:17:59,150
for loop we're going to return the array of numbers.

294
00:17:59,150 --> 00:18:08,310
So go ahead and type let a random number equals and we can use a function in swift arc for random uniform.

295
00:18:08,310 --> 00:18:12,260
Now you notice here that it says upper bound you end 32.

296
00:18:12,320 --> 00:18:17,060
What we can do is we can set the highest value that it'll be allowed to go.

297
00:18:17,210 --> 00:18:23,370
And we're going to set that to be 255 because all three values being 255 should be the highest.

298
00:18:23,480 --> 00:18:26,120
But you'll notice this is going to give us a problem.

299
00:18:26,330 --> 00:18:29,980
Our random uniform returns something called a 32.

300
00:18:30,080 --> 00:18:32,120
That's a 32 bit unsigned integer.

301
00:18:32,120 --> 00:18:34,310
But we need it to be a C.G. float.

302
00:18:34,310 --> 00:18:39,080
So therefore we're going to need to wrap this in parentheses and cast it as the C-g float.

303
00:18:39,080 --> 00:18:44,150
So in X code you can select the whole thing create a parentheses and then at the beginning just type

304
00:18:44,150 --> 00:18:46,490
C.G. float and it becomes NCG float.

305
00:18:46,490 --> 00:18:47,890
Really cool.

306
00:18:47,900 --> 00:18:53,630
Now we need to append it to our random number array so called random number right.

307
00:18:53,850 --> 00:18:57,440
Got a pen and we're going to go ahead and pass in the random number.

308
00:18:57,530 --> 00:19:03,350
So every time we go through one two three we append random numbers and at the very end we're going to

309
00:19:03,350 --> 00:19:05,990
return a random number array.

310
00:19:06,460 --> 00:19:10,340
So supercool this function will generate random numbers for us.

311
00:19:10,340 --> 00:19:13,550
Now let's go pass that in to our UI but an extension.

312
00:19:14,330 --> 00:19:18,530
So go ahead and instead of calling an empty C.G. float here.

313
00:19:18,530 --> 00:19:24,640
Go ahead and type generate random numbers and we want to generate 3 3 get returned.

314
00:19:24,740 --> 00:19:29,510
They get passed in here a random number and color it generated and it gets set to the background color

315
00:19:29,510 --> 00:19:30,350
of the button.

316
00:19:30,680 --> 00:19:36,110
So let's go try to build and run and pull open your simulator Let's go see oh you know what.

317
00:19:36,110 --> 00:19:36,720
Wait a minute.

318
00:19:36,740 --> 00:19:37,850
Button is not going to work.

319
00:19:38,030 --> 00:19:38,960
We did not set it.

320
00:19:38,960 --> 00:19:41,240
In our view controller there we go.

321
00:19:41,240 --> 00:19:43,530
So call colorize button.

322
00:19:43,550 --> 00:19:44,650
Colorize.

323
00:19:44,690 --> 00:19:45,170
There it is.

324
00:19:45,170 --> 00:19:46,220
And now BuildOn run.

325
00:19:46,220 --> 00:19:51,590
Now we should be able to change the color and faded nicely with a touch of a button.

326
00:19:51,590 --> 00:19:52,670
Let's try it out.

327
00:19:53,120 --> 00:19:56,170
Ooh nice.

328
00:19:56,180 --> 00:19:57,230
Really cool do you see that.

329
00:19:57,230 --> 00:19:59,400
It's fading to the next color.

330
00:19:59,630 --> 00:20:04,550
We can wiggle buttons we can dim buttons we can do all kinds of amazing things thanks to extensions

331
00:20:04,550 --> 00:20:06,330
so I hope you've enjoyed this video.

332
00:20:06,350 --> 00:20:09,590
This is video two of the two part series on extensions.

333
00:20:09,590 --> 00:20:15,020
There are so many more things you can do guys with extensions so go dive into the documentation go read

334
00:20:15,020 --> 00:20:15,820
more about it.

335
00:20:15,830 --> 00:20:17,740
This is just kind of the tip of the iceberg.

336
00:20:17,750 --> 00:20:19,860
So I really encourage you to do that.

337
00:20:19,970 --> 00:20:21,410
Thanks so much for watching this video.

338
00:20:21,410 --> 00:20:22,930
And let's head over to the next one.