YO YO YO WHAT IS UP EVERYBODY.
This is Caleb.
Back again to teach you about extensions.
Super duper cool.
Let's go ahead and get started.
We're going to go ahead and begin in tax code.
We're going to build a really simple app in this video that basically is going to teach you how you
can use extensions in just one way.
There's tons of different ways that you can use extensions.
And I really do encourage you to dive in deeper and get to know more and more what they can do.
Let's go ahead and get started let's build this out.
So go ahead and click Create a new X code project and we're just going to build a simple single view
app.
I'm going to name the extension's dance party because that sounds fun.
Press next and let's save that boom there you go.
Make this full screen beautiful.
And here's what we're going to do folks we're going to start in the main story board.
So go ahead and select main storyboard and we're going to do is we're just going to put three buttons
on the screen.
So let's go ahead and type you I button drag one on and we're going to make it a little bigger like
so little taller and a little shorter.
There we go.
And we're going to go ahead and set the background color to something pretty good.
How about this blue.
That looks nice and the font needs to be white.
That looks great.
Change the font.
You know what I'm going to pick.
If you've seen any of my other videos where I do Interface Builder stuff I love Avenir next.
So do that.
I also like Demi bold and size 20 looks great.
And you know what we're not going to set a title on this button just yet but we are going to go ahead
and duplicate it twice.
OK so duplicate it like so and make a stack of three buttons and you know what.
As these are currently in place we don't actually have to do any constraints.
We should but we're not going to right now just for time because they'll actually stay in place because
we don't have anything else that is screwing up where the interface builder thinks they are on the screen.
So let's see we're going to do three different extension functions or I guess instance methods for these
buttons.
We're going to make an extension of UI button and we're going to enable these UI buttons to sort of
have like super powers or whatever we're going to give them extra functionality that they don't normally
have which is the point of extensions.
So this middle button is going to wiggle.
So just go ahead and type wiggle for the description.
It's this bottom button is going to dim and the top button is going to colorize.
You know what the fonts a little big.
Let's bump it down to 18.
OK.
Super cool.
So let's go ahead and let's set up some connections here for these with Iby actions and Iby outlets.
So bump open the assistant editor and it's going to be a little bit tight here but that's fine.
Let's squeeze that a little tighter there.
Nice and get rid of did receive memory warning.
Get rid of that and we're going to create an outlet and an action for each button.
So go ahead and right click and drag from the colorize button and just name it.
Colorize button ok right click and drag from the wiggle button and go ahead and call it wiggle button.
Kind of feels funny writing that but anyway.
Now right click and drag from the dim button and call it dim button.
All right there we go.
Cool.
So outlets are good.
Let's create some actions now and get rid of that comment.
I really wish you could set it up so that that's not even included.
But you can't.
At least that I know of if you know how.
Send us a message and tell us how.
But now let's go ahead and create some actions for each of these buttons so right click and drag from
the colorize button.
Change the connection to action and call it colorize wups colorize button was pressed.
OK.
Then beneath that right click and drag from the wiggle button change the connection to action and call
wiggle button was pressed.
All righty.
And beneath that finally right click and drag from the dim button.
Change it to an action and call dem button was pressed and we are now properly connected.
So go ahead and close the assistant editor pull open your view controller and we have three connections
here.
IB outlets and we have three IB actions as well.
So let's go ahead and let's create our extension right click on the project folder and click new file
create a swift file like so and we're going to call this UI button.
XTi short for extension.
That's how the slopes team does it.
And that's how we're going to do it here.
So we need to go ahead and create an extension of UI button.
OK.
In the last video I taught you how to create extensions and extended classes like string and ints.
But in this video we're going to be extending UI button which is you know a part of UI kit and that's
actually why we're getting this undeclared type issue.
Replace foundation with you I kid you like it has all the stuff Foundation has and more so that's great.
Awesome.
Now like I said we're going to create some animation functions that are going to give our button the
ability to do some really cool things.
The first function is going to be a function that will wiggle the button on the screen and that would
be a great interface for maybe like an error if you put in the wrong password the button could wiggle
and it could you know pop up an error message saying ant wrong password.
So let's go ahead and let's write that function now.
So go ahead and type phunk wiggle and we're going to use a C-A basic animation part of core animation
just because it's really easy to repeat certain animations easily and we can just add it to this button
really easily so go ahead and type let wiggle Annam equal a basic animation.
And we're going to go ahead and instantiate it.
But you'll notice there are a couple options here.
We want to instantiate it with a key path.
OK.
And the key path we're going to be instantiating is the position k the position of the button because
if you think about it we're moving it back and forth and that's the key path we need to modify.
So go ahead and type position.
OK sort of a little identifier there for what we're doing.
And now we need to set up some of the properties for the wiggle animation so go ahead and type wiggle
and him and we're going to set the duration the amount of times that the animation will repeat whether
or not it will auto reverse the animations.
And then we're going to set kind of the to and from point for the animation so it knows where to go.
So go ahead and type wiggle and duration and we're going to do a very very short duration and we're
going to do it a lot of time so it looks like a quick little almost like a stutter.
So go ahead and type zero point zero five.
OK.
A very short amount of time for the amount of times that it will be repeated.
Go ahead and type wiggle and him.
Don't repeat count and said that to be five.
So whatever animation we set it's going to do it five times set wiggle and him Dot auto reverse is to
be true.
OK.
We want it to automatically reverse if it goes this way we want it to automatically reverse the opposite
way.
Easy is that.
And now we need to set the from and the two value.
So where it goes from and where it goes to and then we'll set the animation to begin.
So type wiggle Annam from value and we're going to set it to be equal to a C.G. point.
So go ahead and type C.G. point and we need to set an x and y value of C.G. float.
So we're basically going to take whatever the center of the button is and we're going to move it forward
to the left then forward to the right four to the left or to the right back and forth.
And that will be our animation.
So in order to capture the value for this button remember in an extension.
Think of this extension as this could apply to any button.
And so what we're actually going to do is we're going to capture a reference to self OK.
We're going to call self centered X
because remember this button is could be any instance of a button.
So we're going to use self because it can apply to any button.
And like I said we're going to move over for so let's say minus 4.0.
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 self centered.
Why.
OK we're going to go from wherever it is on the y axis and we're not going to actually change that in
the two value it's going to be the same.
So it's just going to stay on the y axis where it is and move that way.
So next go ahead and call wiggle and him to value and we're going to set another Siggi point it's basically
going to be the opposite of this one.
So go ahead and call C.G. point and we need to instantiate it with some values K for the x and y.
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.
And then for the y value we don't want to change it.
So just call self centered not y meaning whatever button this is applying to.
We're going to take its y value and we're not going to move it.
OK is going to stay the same.
Now in order to add this animation to our button and actually have it do it's thing where we need to
add it to the layer of the button so to do that we can just call la dot add animation.
OK.
So the animation of course is wiggle and but what is the key.
The key is actually our key path so we can just go ahead and type position.
And now our function is done.
I think we should go try to add this to our button.
And I think we should see how it does.
So go ahead and enter the view controller.
And on the wiggle button was pressed.
Watch what we can do now as you can see it is type UI button so we can call wiggle button and our function
wiggle is right there.
Super cool.
So let's go ahead let's build this to a simulator really quick and let's go see if it worked
care simulator's opening up here in the back let's pull it up so we can see it.
There we go.
All right.
So let's take a look.
There's our button.
Watch what happens when I click the wiggle button.
You see that it does our cool wiggle animation.
All buttons do not normally do that.
You could set this to happen in the instance of maybe logging in and maybe log in failed the button
could wiggle upon an error.
Supercool Let's go set up our next two functions dim and colorize.
So go back into your UI button extension and within that extension we're going to write two more functions.
Now extensions don't only have to include one function you can include many many more.
So let's go ahead and write the dim function.
Now go ahead and type phunk dim.
And what we're going to do inside this function is just basically do to animate with durations.
So go ahead and type UI view animate with duration.
Make sure to choose the one with a completion handler.
OK we're going to make the duration 0.1 5 and the animations we're going to take self.
OK so whatever button this is on and we're going to get its alpha value and set it to be zero point
seventy five.
OK so we're going to fade the buttoned down a little bit and then upon completion we're going to fade
it back up to 100 percent.
So press enter and just set a name for the completion here finished.
And inside this completion handler go ahead and make a another view animate with duration and we can
do 0.1 5 again for a total of point three seconds that's usually a good time for the animation.
And then the animations again press enter.
And we need to animate it back up to 100 percent so-called self Alpha and make it 1.0.
Now when we press the button it should fade down and fade back up again.
So let's go ahead and let's call this on button was pressed typed dem dim button and watch this we have
access to dot Dem.
Now it's not showing up yet sometimes.
By the way if it doesn't show up you might need to build and run.
Or just wait a second so you'll see it's not showing up.
And now if I call dem it does pop up.
So sometimes you just have to build so that it gets a chance to look through everything and show you
the right functions.
So let's build and run.
Let's go check this one out and let's see how we did.
All right.
So tap on the wiggle button it wiggles tap on dim and you see that it faded and pop back up.
Really cool.
I like it.
Now you can call any of these you eye button extensions on any of these buttons so I can call them button
dot wiggle and I can make it wiggle and them at the same time which is kind of cool.
You don't have to it's just up to you if you want.
All right let's go right the colorize function which is really cool.
And let's go back into UI button extension.
Let's go ahead and write a function here.
And you know what.
Let me give you some more space to see.
Here we go.
All right.
So go ahead and type phunk colorize.
And inside this function we're going to create an array.
OK.
And it's going to be an array of three random numbers and I'll show you why in a second.
So let's just say let a random number array equals an array of integer.
Actually not integer we need it to be C.G. float.
And you'll see why in a second.
OK.
Now what we're going to do is we're going to generate a random color.
So go ahead and type let a random color wups color and that's going to be equal to you eye color.
Now the random color is going to be generated by generating 3 random numbers that we will fill in for
the red green and blue values seen here for a color.
So select red green blue we can set the alphabet to 1 point zero because we don't want it to be transparent
at all.
But for each of these values we need to divide them by 255 K so divided by 255 divided by two 55.
All right.
Because 2:55 is like the top.
That's like 100 percent and anything below that is a certain value of color for red green and blue.
Now we're going to have three numbers in our array.
So for the first number we can call random number array and we can pull out the first index at index
0.
Next we can go ahead and call random number array and pull out the first or the second index at index
1.
Then we can call a random number array and we can pull out the index that the item an index to for number
three.
Now the reason that they're coming in as C.G. float are because if you looked at the color declaration
it requires a value of to float.
So we're just helping it out by putting in the right type.
All right.
So now that we have our random color generated we need to go ahead and set the color to actually show
up so we're going to do a nice little animation here to change the color.
So go ahead and type you I view animate with adoration.
OK.
Go ahead and give it 0.3 seconds.
And for the animation we're going to change the background color so to access the background color of
the button we can call self background color and set it to be random color just like that and it will
fade to our next color it's really really cool.
Now the thing that we're having a problem with though this is an empty array.
We need to be able to generate three random numbers but we don't yet have the ability to do that.
So we're going to need to make a function that's going to generate three random numbers but it doesn't
quite fit into our UI button extension.
So I'm just going to create a new Swift file and I'm going to name it.
Helper's and this is where I'm just going to put a helper function that's going to generate the numbers
we need.
So go ahead and import you ikat because we're also going to need it in this file and go ahead and just
call phunk generate whip's 3 random numbers.
And of course this is a function so we need curly braces but let's think what actually that's not a
very good function.
I should make it so that I can pass in whatever quantity I want.
OK so generate random numbers quantity I can tell how many I want.
And then of course to return we want to return an array of C.G. float because if you remember in our
extension that's what we need are to be C.G. float.
So inside this function go ahead and create an empty array of C.G. float like so far random number array
is equal to an array of C.G. float.
And we're going to instantiate it from the beginning.
Now we've passed in a number for the quantity.
So to do that we can say for underscore in one all the way up the three dots means all the way up to
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
very end of three and stop there and we're using an underscore here because we don't actually need to
pass in like a value for I we don't need to capture the value of the number because it's never going
to be used so we can just use an underscore to tell them we're not going to use the value but we want
to go through a for loop three times.
So we're going to basically create a random number appended to this array and then at the end of the
for loop we're going to return the array of numbers.
So go ahead and type let a random number equals and we can use a function in swift arc for random uniform.
Now you notice here that it says upper bound you end 32.
What we can do is we can set the highest value that it'll be allowed to go.
And we're going to set that to be 255.
Because all three values being 255 should be the highest.
But you'll notice this is going to give us a problem.
Our random uniform returns something called a 32.
That's a 32 bit unsigned integer.
But we need it to be a C.G. float.
So therefore we're going to need to wrap this in parentheses and cast it as a C.G. float.
So in X code 9 you can select the whole thing create a parentheses and then at the beginning just type
C.G. float and it becomes NCG float.
Really cool.
Now we need to append it to our random number array so called random number right that a pen and we're
going to go ahead and pass in the random number.
So every time we go through one two three we append random numbers and at the very end we're going to
return a random number array.
So supercool this function will generate random numbers for us.
Now let's go past that in to our UI button extension.
So go ahead and instead of calling an empty C.G. float here.
Go ahead and type generate random numbers and we want to generate 3 3 Get return they get passed in
here a random number and color you generated and it gets set to the background color of the button.
So let's go try to build and run and pull open your simulator Let's go see oh you know what.
Wait a minute.
Button is not going to work.
We did not set it.
In our view controller there we go.
So call colorize button.
Colorize.
There it is.
And now BuildOn run now we should be able to change the color and faded nicely with a touch of a button.
Let's try it out.
Ooh nice.
Really cool do you see that.
It's fading to the next color.
We can wiggle buttons we can dim buttons we can do all kinds of amazing things thanks to extensions
so I hope you've enjoyed this video.
This is video two of the two part series on extensions.
There are so many more things you can do guys with extensions so go dive into the documentation go read
more about it.
This is just kind of the tip of the iceberg.
So I really encourage you to do that.
Thanks so much for watching this video.
And let's head over to the next one.