Everybody this is Caleb with slopes again and in this video we're going to write two more extensions
one for you view and one for you I button that's one going to allow us to bind anything that inherits
from you eye view to the keyboard so that when the keyboard slides up that object does as well.
And we're also going to write a button extension to change the color when selected and when de-selected.
OK.
So let's open up that X code project and let's do it now.
Right click on extensions and click new file.
Let's start with our UI view extension.
So to do that we're going to go ahead and create a file a swift file and call it UI view XTi and press
create.
Awesome.
So since this has to do with UI views we're going to need to import UI kit.
And like I said we're going to make an extension of UI view just like that.
Now what we're going to do is first we're going to write a function called bind keyboard and all this
function is going to do is it's going to add an observer that's going to observe the notification that's
sent when the keyboard changes frame and that's a default IO us notification that is fired every time
that the keyboard opens.
And then what we're going to do is we're going to write another function called keyboard will change
and this function is basically just going to go ahead and animate the frame of whatever object we bind
the keyboard to so that it moves up with the keyboard in the exact same way.
So let's get started.
We're first going to go ahead and write phunk bind to keyboard WIPs keyboard and that's great.
Now inside of this function we're going to call notification center.
Default will get the default notification center and we're going to add an observer.
Now of course when we call this we need to give an observer which is the view so we'll call self the
selector is going to be poun sign selector and inside of this is where we're going to call the function
later.
Keyboard will change which actually is responsible for animating the frame of the keyboard.
Next we're going to go ahead and we're going to call the N S notification that comes from deep within
Iowa s called the keyboard will change frame.
So for this we can actually just go ahead and press enter and we can go to any notification dot name
dot UI keyboard will change frame press enter and then for the object to go ahead and set nyl we don't
care about the object but we do need to put a function here and that is where we're going to write.
Keyboard will change.
So go ahead and beneath this right phunk keyboard will change and we're going to pass in a notification
of type and as notification.
OK.
Now we're using the underscore here because we don't necessarily need to call notification we can just
have it be blank but we do want the internal parameters that we can access it inside this function.
So let's go ahead and what we're going to do is we're going to pull out five properties from the notification
itself.
OK so whatever whatever object we bind this to we're going to basically pull out some information about
the keyboard.
Basically we're going to pull out the duration of the animation that the keyboard has when it moves.
We're going to pull out the kind of animation curve that it use.
We're also going to get the frame of the keyboard when it's below the screen and the frame when it's
above the screen and then we're going to create one property that's basically going to find the difference
of those so that we know how much to move up whatever view that we bind to the keyboard.
OK.
Now you know what.
It's yelling at us let's fix this really quick.
We're going to pass it.
Keyboard will change and press enter and it's actually going to yell at us again.
Check it out.
It's going to say argument of poun selector refers to the instance method keyboard will change.
That is not exposed to Objective-C.
We're going to click fix and all it's going to do is just add Abi Jaycee to the front of it.
And basically that's just going to give it the ability to interact with the objective C-code which deep
down is what we're going to be basically using with these notifications from notification center.
Don't worry about it we're writing in swift still.
We just need to give it the ability to interact with objective C-code.
So let's start by pulling out the duration of the keyboard animation by typing let duration equals notification.
OK so we're accessing the notification here.
My keyboard will change frame and inside of the notification There's a dictionary called user info and
there is a bunch of information about this particular notification that we can access.
But the interesting thing is is that it comes and is optional so we need to force on rapid in order
to access it then since the dictionary.
We're going to pull out the value for a certain key and we're going to give the key right here now that
key for the duration is UI keyboard animation duration user in foci that's a really long mouthful but
basically it is the key that identifies the duration of the animation in seconds.
OK.
The animation of the keyboard and this duration when we call it into a function later we're going to
call you if you animate keyframes it asks for a double.
So we're going to take this value and we're going to force cast it as a double.
So we can use it next.
We need to access the animations curve.
Now every animation has a curve sometimes it's ease in right where the animation will start and it will
sort of ease in slowly and then get up to full speed.
Another curve is ease out right where it will start at full speed and then it'll slowly kind of slow
down as it's approaching completion.
There's also ease in out but we're just going to basically capture the same one that the keyboard uses.
So go ahead and type let curve equals notification that user info and force unwrap it and we're going
to get out the curve by typing UI keyboard animation curve user and Vokey.
Now this one in order to properly use it with a UI view animate keyframes function.
We need to cast it as a unit which is basically just an unsigned integer.
If you've ever used any other programming language you'll note that is.
And go ahead and just forecast that like I said as you want.
All right.
So that's cool.
We now have the same animation curve.
We're going to go ahead and now capture the frame.
OK so go ahead and type let starting frame equals notification user info for us unwrap it.
And the key is UI keyboard frame.
Begin user info key.
So this basically captures the frame of the keyboard when it's below the screen before it goes up.
It tells us where it is and the cool thing is that we can actually turn this into a C.G. recked we can
make this a rectangle so we can basically capture the exact size and value it's really cool in order
to do that though we need to basically put this in parentheses force cast it as an s value and then
after we do that we can pull out the CEG recked value of this information we get from the notification.
So if you select the whole thing in X cotinine and then press 1 parentheses it actually will wrap the
whole thing in parentheses which is pretty neat.
But now instead of force casting this as a you end or as a double We're going to force cast it as an
s value.
OK.
Now this value is basically just a simple container for a single C or objective c data item.
So we've basically now converted this frame into raw data and from that raw data we can type dot C.G.
recked value and we can convert it into a type of C.G. ract which is really neat.
So we now have the starting frame of the keyboard when it's below the screen we can't see it.
Now we need to capture the ending frame so that we know how far it's going to go so that we can move
up whatever object we want the size of the keyboard.
So go ahead and type let ending frame frame equals notification user info for some rapid UI keyboard
frame and user info key.
And just like the previous one we're going to force cast it as an s value.
We're going to wrap it in parentheses like so by selecting everything and doing shift parentheses.
And we're going to pull out the C-g recked value.
OK so now this too has been converted into HEG rect.
Now our last property is not going to come from the notification but we're going to basically use both
the starting frame and the ending frame.
And we're going to subtract the y values of both of those so we know exactly how much difference it
changes.
So we're going to call this delta y Delta meaning change.
So go ahead and type let Delta y equals ending frame origin dot y meaning the starting point on the
y coordinate.
And we're going to subtract beginning frame or starting frame I mean origin dot y.
OK.
Now think about this the starting frame is at the very bottom of the screen.
The Neith everything.
So what we want to do is we want to subtract that from the ending frame standing frame is here.
We want to subtract that.
So we know how much it actually moves up on the y axis.
And now this value is a singular number.
We can use that to move whatever object up.
So that's really really cool.
Let's animate it now.
So when we call bind to keyboard it's going to call this keyboard will change function.
It's going to capture all the important values.
Then we're going to type you.
View animate keyframes.
OK.
Now of course it asks for a duration.
So we're going to give it a duration.
The one that we captured from our notification we don't want to delay.
So we're going to give it zero point zero options right here is UI keyframe animation options.
Now check it out.
If I press Enter then put a parentheses.
It will basically ask for.
Well let's do it.
OK.
And it's going to ask for a raw value.
And look what type it's asking for are you in it.
That's why we cast this as a unit.
OK.
It's an unsigned integer and that's just what you like you keyframe animation options asks for.
So we're going to pass in the curve.
Now the animations.
This is where we're actually going to animate the view that is bound to the keyboard and the completion.
We don't care about.
OK so we're just going to put nil for that.
But in this animate keyframes Here's what we're going to do.
We're going to capture self meaning whatever you view or something that inherits from you view whatever
it is we're going to take the frame of that object we're going to take the origin meaning the top most
Y point on the y axis.
Sorry origin dot Y.
And we're going to go ahead and we're going to add Delta y to that.
So let's say the keyboard is 300 pixels tall.
We know when it goes up it's going to go up 300 pixels.
What we're saying is we're never let's say this was a UI button.
If we are going to take the origin y point where ever it is we want to add how much the keyboard will
change it.
And we want to animate it the same exact way.
So we're basically just adding how high the keyboard is going to move.
And removing our object up just that much with a keyframe animation super super cool.
This is it guys this is all we need to do to bind object to the keyboard.
So let's go ahead before we test it out.
Let's go ahead and build our button extension so we can try it.
We can try both on the same view controller.
So right click on extensions click new file swift file and we're going to call this UI button.
XTi and press create.
All right now this one is pretty easy.
But of course since we're using UI kit elements we need to import.
You like it then we're going to call extension UI button.
OK.
Now we're going to write two functions.
One is set selected color one is set de-selected color.
So when we tap on one we want the other to show up as de-selected.
So go ahead and type phunk set selected color and below that call phunk set.
De-selected color.
And inside this we're just going to change one property self.
Background color.
And we're going to use a color literal.
It's that easy.
Then in set de-selected color we're going to call the same thing.
So I'm just going to copy and paste it.
And now we can actually choose our de-selected color.
So if it's selected it's our normal bright green.
If it's de-selected It's our light green kind of like like a mint green color.
Supercool.
That's all it takes.
Seriously guys so go to create gold Visi because that's where we're going to start using these.
And now are you I'd view extension we can actually call on our next button.
Think about in our view controller.
This next button when we tap on the text view we want this next button to move with the keyboard.
Right.
We don't want it to be hidden by the keyboard.
So let's go into Create Goals Visi and what we can do is from view the load we can call next button
bind to keyboard.
When the view loads it's going to bind that to the keyboard and whenever we open up something that moves
the keyboard the button will move with it.
It's that easy.
OK so now that we have that done we're going to go ahead and set up the buttons.
Now we already have them set up here short term and long term.
And we already have short term starting as selected.
But that's just the button that's just what it looks like.
We need to actually set a property in our class and we need to set it to be equal to short term from
the get go and then what we're going to do is we're going to change that depending on if the button
is pressed.
Because sometimes you might open it and you might want it to be short term from the beginning.
So we should set that value from the beginning go back and create goal Visi and beneath the Iby outlets
we're going to create a variable called Goal type and it's going to be of type girl type.
OK.
Now we're going to set it to be equal to dot.
Short term from the get go already.
Now this is here we've instantiated it and we have set it to be equal to short term from the beginning.
What we're going to do is we're going to actually set our colors in code.
Now we have them set in the interface builder.
But what we're going to do is we're going to set them in code just to make sure that everything is good
to go.
So when the view loads we need to think what color do we want.
The short term button to be well if we want it to be defaulting as selected we should call our set selected
color function.
So let's do that short term button set selected color our long term button we should set set de-selected
color.
Now when short term button is pressed.
Here's what we're going to do.
We're going to set gold type variable to be equal to short term.
We're also going to go ahead and type a short term dot set selected color because what if we selected
long term then it would be de-selected if we selected again we should set the selected color right when
we select the short term button.
We should make the long term button be set de-selected.
OK so it's that like light mint green color.
Now we're going to go ahead and do the same thing but with long term buttons so let's go ahead and when
we tap the long term button that means that we want gold type to be equal to long term.
And if we tap on the long term button that means we want long term button to have the selected color
we want the short term button to have the set de-selected color.
And you know what guys this should work.
Let's go give it a try.
Just so you know when you create an extension of UI button anything that is a UI button can access these
functions you view.
The reason that it works on our button is because if you go deep down you I view you I button you I
text field.
I label all of those at their core inherit from you I view.
So we can use bind to keyboard on anything.
Let's give it a try.
Let's build and run.
Let's see if our next button binds to the keyboard.
Let's see if our buttons are set the appropriate color from the beginning and then we're going to go
ahead and see if they change color appropriately as we tap on the buttons so Press new and let's make
sure that our software keyboard is on.
So when I tap this the button should slide up nicely.
And you know what I think I have to go in and do that again.
Let's toggle it.
And do you see that the button loads perfectly it slides up with the keyboard.
And that's really cool let's go ahead and toggle it again and it moves back down.
That's amazing.
Super super cool.
OK great.
Now let's test our buttons if I tap.
Longterm it should set the selected color and flip the short term button to be selected.
So cool look at that it works.
So if I tap one it sets the color.
It's also setting the goal type and we'll pass that in as we instantiate our next view controller and
move on to add the number of points required in order to achieve our goal.
So supercool guys we have now bound our button to the keyboard.
We have set up our buttons here to change color and set the goal type.
We're going to move on this is amazing.
We're going to build out the finish goal VC in the next video where you set the number of points and
we're going to pass that data from this view controller into finished goal Visi so that we can save
our goal and start showing them in our table view using core data.
So so cool.
Amazing work guys.
Let's head over to the next video and let's get started.