Hey guys this is Caleb with Dev's Loeb's dotcom and in this video we're going to build an awesome you
view extension that's going to allow us to bind and object to the keyboards so that when we open up
a text view or a text field the object can slide up with the keyboard and slide down automatically.
It's a really really nice UI tweak that we're going to add into our app to just give it that extra touch
of something special.
So go ahead and pull open your X code project and we're going to go ahead and.
Right click on the extensions group and create a new file.
Like I said this is an extension of you view.
So go ahead and click a new file swift file and we're going to name this UI view.
E X T.
Short for extension of course you probably already knew that though.
So click Create or press enter and voila we have a file so to begin let's go ahead and let's replace
foundation with UI kit because we're going to need some of the stuff from in there.
And now let's go ahead and type extension because this is an extension and we're extending the capabilities
of UI.
You put some curly brackets.
And now we're going to write two functions.
One function is going to utilize notification center.
Basically we're going to add an observer to whenever the keyboard will change frame notification is
called that's something that's called in the background of iOS by default.
And we're going to set up an observer to basically watch for when that happens and then perform an action
whenever it does.
So our first function is going to be called bind to keyboard.
So go ahead and type that phunk bind to keyboard and this is the function that we are going to call
on any instance of UI view.
So for instance in our app we have a send button so I can call send button bind to keyboard and basically
what it's going to do is on that instance of you I view our button.
It's going to add an observer to whenever the keyboard changes frame whenever the keyboard goes up or
down.
So in here we're going to go ahead and call notification center default and we're going to add an observer.
Now you probably notice there is this option here with an observer selector name and object.
We're going to use all of these except the object.
So for the observer it's going to of course be self.
Because if the button is supposed to be observing self is how we're going to get reference to the object
that we are observing selector is going to be pound sign selector and we're going to put in the function
that we write later here the function that will be called when bind to keyboard is executed.
The notification we need to pay attention to is notification name and we can actually just pull out
one of the default ones you keyboard will change frame.
So this is called right before the keyboard changes frames so that it animates beautifully with the
keyboard.
Now the selector or sorry the object is nil.
We don't need to worry about the object.
The only thing we need to worry about now is the selector.
And we're going to write that function right now.
So go ahead and we're going to call phunk keyboard key board will change and in order to get this to
work we actually need to pass in a notification like so.
So go ahead type notification of type and as notification already.
And that's just going to allow us to basically send the value of whatever object is conforming or not
conforming but whatever object is calling this function we're going to be able to pass in this notification
through keyboard will change and the notification that we get here is going to get the frame of the
keyboard it will animate everything that it needs to.
It's very very cool.
So there are some weird things in here that you've maybe never seen before but it's all part of default
iOS.
So in order to actually create the animation that we need we're going to go ahead and we're going to
call you I view animate keyframes.
OK.
And as you can see it creates an animation block object that can be used to set up key frame based animations
for the current view.
So let's say that our view is a button we can animate the frames and move them wherever we need to.
Using animate keyframes Now you can see here that we have a lot of different things that we need to
be able to do.
We need a duration a delay options animations and completion.
And we're going to come back to that in a second.
But first we need to set up five properties.
We're going to set up the duration and we're going to actually pull the duration of the keyboard animation
and set that as the same duration for when we animate our button.
So we're going to create a constant called duration.
And in order to get that duration we're going to pull it from the notification that we pass in.
Right which is going to come from our selector So let's use that notification.
We're going to go ahead and pull out user info which is a dictionary that is just part of a notifications
really cool.
The issue though is user info is optional.
And in order to access it we need to force unwrap it and like we said it's a dictionary so we're going
to pull out the value for a certain key and the key for that is UI keyboard keyboard or keyboard animation
duration user info key.
So we're pulling out the duration from the keyboard and we're going to set it as a double.
OK.
It's a number value and it just happens to come in as a double.
Now that's the cool thing is we have the same duration as the keyboard so that it moves the same exact
time.
So we can give duration now the delay we don't want there to be any delay so we'll just put it at zero
point zero.
Sounds awesome.
But now we need to also get the animation curve.
Now the interesting thing is that every animation has a curve and sometimes you might see easy in easy
out as in out it's a way that the animation either comes to a halt or or begins starting slowly and
kind of slowly speeding up to full speed.
So we're going to go ahead and get the same curve from the keyboard as well.
So Type let curve equals notification that user info force on it and the key for this is UI keyboard
animation curve user info key.
Now this this is just something you need to know.
This value comes in as a U.
Int k it's a type of integer and it's an unsigned integer value type K.
So very cool.
All you need to know is that that is of type and it's not super important but the options are where
we're going to use this.
There are keyframe animation options and we're going to actually go ahead and instantiate that and we're
going to pass in the raw value here of curve because remember it's a you end.
And if you look this is expecting an option set and that option set comes from values of int or you
end.
So in our instance it's actually you went.
All right.
So we now told it we want it to have the same animation curve as the keyboard the same exact one.
So now we need to set up the frame at the beginning and then we'll set up the frame at the end.
So let's go ahead and call Let beginning frame equals notification and user info unwrap it and get out
the key for a UI keyboard.
Begin user in-focus.
And this is the key for a value containing a C.G. wrecked the frame of the keyboard that identifies
the start frame of the keyboard and coordinates so it's going to show you the beginning frame as the
keyboard is hidden down below the screen.
So we're going to access that.
And the interesting thing is you saw that it was a C-g recked that has returned.
But the interesting thing is is that we need to actually pull this out by calling Scott CEG wrecked.
Wrecked value.
OK.
That's actually how we're going to pull it out.
But the interesting thing is we can't just do that straight off of the notification.
So we're actually going to go ahead and encapsulate this in parentheses and we're going to cast this
value as an asset value.
That's the way that we're going to get out the container of the data.
And so with that container full of data from this keyboard frame now with that data we can cast it as
C-g recked value we can convert that data into a C-G.
Very very cool.
We're going to now go ahead and take the end frame when the keyboard is all the way up at the top and
we're going to create a constant to hold that as well.
So go ahead and type let and frame equals notification dot user info unwrap it and let's get the key
for your keyboard and user info key or frame and user info key.
And we're going to do the same thing.
We're going to cast it as an N.S. value then we're going to go ahead and select all of it put it in
parentheses and then pull out the C-g rect value.
By the way in X code 9 if you just select something and then do what you would normally do to create
a quote.
It'll put it in quotes if you do a print to see it will put everything in parentheses beginning and
end.
Very cool.
So just like before we're going to unwrap this and pull out the C-g recked value.
So now we have a beginning frame and an end frame.
And that's really cool.
Now what we're going to do is we're going to go ahead and create a value for the Delta and Delta if
you know is a word that means change.
So we're going to monitor that change on the y axis and to do that we're actually going to take the
beginning frame which is when it's below the screen and we're going to subtract the end frame that basically
is just going to take the y value and it's going to subtract it so we know exactly how far the keyboard
moves up.
So go ahead and call this let Delta Y and to do that we're going to just basically take the and frame
dot origin.
So it's starting point Y and we're going to subtract beginning frame origin dot y.
So that way we get the value of the difference of those two.
And the coolest thing is that when we call animations K click animations press enter and this is where
we're going to actually change the frame of whatever you view as binding to the keyboard.
Go ahead and call self.
For this view frame dot origin Y.
And we're going to set it to basically move it up however much the keyboard frame change.
So we're going to do plus equals Delta y.
So if that makes sense the bottom of the screen has nothing that the keyboard is beneath it when it
slides up the Delta y value is how tall the keyboard is.
We want the object to bind to the keyboard and move up that same exact amount.
So we're just taking the y value for whatever you view this is for and we're moving it up an additional
Delta y.
Super super super cool like this is the coolest thing that I've ever done with a view extension.
Now for the end we're going to go ahead and just put nyl for the completion because we don't care.
And the last thing we need to do is basically pass this function to our selector.
So go ahead and type keyboard will change push enter and we're good with exception of adding at BJC
to expose Whoops oh BJC to expose this function to Objective-C.
All right.
Let's build it.
Let's make sure that's good to go.
Looks like it is.
Now let's go ahead and let's head into create post to see if you remember.
Let's go look at the storyboard.
We have a button right here that gets covered by the keyboard.
We're going to set it so that this button is bound to the keyboard and it slides up as soon as the keyboard
becomes visible.
So to do that all we need to do is in view to load call send button bind to keyboard.
That's the coolest thing because a button if you go deep down let's go find it.
You button actually you know what.
Well you get the idea.
It comes from you I control and as coding.
And if you go deeper and deeper and deeper you'll find that it's really a sibling of you eye view.
So anything that is you view compatible like profile image is a UI image view.
We can also bind this to the keyboard.
OK the text view if we wanted to we could also do text view bind to keyboard.
Anything that inherits from you I view can be bound to the keyboard but let's just try it for now.
With bind to keyboard.
Now you know what.
In our simulator I noticed a problem.
Take a look.
If I go to add a new post our profile image is empty.
Let's fill that up right now by going to the attributes inspector and we're going to go ahead and choose
where is it default profile image beautiful.
So let's build and run let's go check out how amazing this is the binding to keyboard's one of the coolest
you I've extensions I've ever written.
And we're going to go ahead and open it up and take a look to see if it worked.
Here we go.
Open this.
And when I tap on the text view we should see it slide up with the keyboard.
Oh except I have the keyboard turned off so toggle software keyboard and look at that.
It works with it.
Let's try that again.
Open it up and it slides with the keyboard it stays exactly where the keyboard is.
That is so so cool.
Wow.
Very very beautiful really nice interaction it just makes it easy for the user to know exactly what
to do.
They never get lost.
They don't have to tap to hide the keyboard and then tap the send button.
They're good to go.
So this video is done in the next video what we're going to do is we're going to set up the feed cells
to go in the table view.
We're also going to write the subclass and that will set us up to start downloading all of our messages
from firebase and displaying them in real time.
It's going to be amazing.
And let's go ahead and head over there and get started right now.