1

00:00:08,100 --> 00:00:13,430

Hey guys this is Caleb with Dev's Loeb's dot com and in this video we're going to build an awesome UI



2

00:00:13,500 --> 00:00:19,620

view extension that's going to allow us to bind an object to the keyboard so that when we open up a



3

00:00:19,620 --> 00:00:25,410

text view or a text field the object can slide up with the keyboard and slide down automatically it's



4

00:00:25,410 --> 00:00:30,990

a really really nice UI tweak that we're going to add into our app to just give it that extra touch



5

00:00:30,990 --> 00:00:31,770

of something special.



6

00:00:31,770 --> 00:00:38,520

So go ahead and pull open your X code project and we're going to go ahead and right click on the extensions



7

00:00:38,520 --> 00:00:40,310

group and create a new file.



8

00:00:40,440 --> 00:00:43,170

Like I said this is an extension of you view.



9

00:00:43,200 --> 00:00:49,340

So go ahead and click on new file swift file and we're going to name this UI view.



10

00:00:49,570 --> 00:00:51,380

X t short for extension.



11

00:00:51,380 --> 00:00:53,470

Of course you probably already knew that though.



12

00:00:53,520 --> 00:01:01,380

So click Create or press enter and voila we have a file so to begin let's go ahead and let's replace



13

00:01:01,380 --> 00:01:06,860

foundation with UI kit because we're going to need some of the stuff from in there.



14

00:01:07,140 --> 00:01:13,200

And now let's go ahead and type extension because this is an extension and we're extending the capabilities



15

00:01:13,200 --> 00:01:16,770

of UI if you put some curly brackets.



16

00:01:16,770 --> 00:01:19,160

And now we're going to write two functions.



17

00:01:19,200 --> 00:01:23,140

One function is going to utilize notification center.



18

00:01:23,280 --> 00:01:30,180

Basically we're going to add an observer to whenever the keyboard will change frame notification is



19

00:01:30,180 --> 00:01:34,050

called that's something that's called in the background of iOS by default.



20

00:01:34,200 --> 00:01:39,120

And we're going to set up an observer to basically watch for when that happens and then perform an action



21

00:01:39,390 --> 00:01:40,550

whenever it does.



22

00:01:40,560 --> 00:01:44,940

So our first function is going to be called bind to keyboard.



23

00:01:44,940 --> 00:01:53,400

So go ahead and type that phunk bind to keyboard and this is the function that we are going to call



24

00:01:53,400 --> 00:01:55,850

on any instance of UI view.



25

00:01:55,860 --> 00:02:02,080

So for instance in our app we have a send button so I can call send button not bind to keyboard.



26

00:02:02,100 --> 00:02:07,180

And basically what it's going to do is on that instance of you I view our button.



27

00:02:07,290 --> 00:02:15,570

It's going to add an observer to whenever the keyboard changes frame whenever the keyboard goes up or



28

00:02:15,570 --> 00:02:16,220

down.



29

00:02:16,440 --> 00:02:24,780

So in here we're going to go ahead and call notification center default and we're going to add an observer.



30

00:02:24,780 --> 00:02:31,050

Now you probably notice there is this option here with an observer selector name and object.



31

00:02:31,050 --> 00:02:33,920

We're going to use all of these except the object.



32

00:02:33,920 --> 00:02:37,560

So for the observer it's going to of course be self.



33

00:02:37,590 --> 00:02:43,890

Because if the button is supposed to be observing self is how we're going to get reference to the object



34

00:02:43,890 --> 00:02:51,450

that we are observing selector is going to be pound sign selector and we're going to put in the function



35

00:02:51,450 --> 00:02:56,940

that we write later here the function that will be called when bind to keyboard is executed.



36

00:02:57,120 --> 00:03:03,600

The notification we need to pay attention to is notification dot name and we can actually just pull



37

00:03:03,600 --> 00:03:08,840

out one of the default ones you keyboard will change frame.



38

00:03:09,180 --> 00:03:14,550

So this is called right before the keyboard changes frames so that it animates beautifully with the



39

00:03:14,550 --> 00:03:15,320

keyboard.



40

00:03:15,630 --> 00:03:18,800

Now the selector or sorry the object is nil.



41

00:03:18,930 --> 00:03:21,390

OK we don't need to worry about the object.



42

00:03:21,450 --> 00:03:24,380

The only thing we need to worry about now is the selector.



43

00:03:24,450 --> 00:03:27,020

And we're going to write that function right now.



44

00:03:27,210 --> 00:03:38,280

So go ahead and we're going to call phunk keyboard key board will change and in order to get this to



45

00:03:38,280 --> 00:03:42,470

work we actually need to pass in a notification like so.



46

00:03:42,510 --> 00:03:47,080

So go ahead type notification of type and s notification.



47

00:03:47,080 --> 00:03:48,140

All righty.



48

00:03:48,270 --> 00:03:54,150

And that's just going to allow us to basically send the value of whatever object is conforming or not



49

00:03:54,150 --> 00:03:59,370

conforming but whatever object is calling this function we're going to be able to pass in this notification



50

00:03:59,370 --> 00:04:05,520

through keyboard will change and the notification that we get here is going to get the frame of the



51

00:04:05,520 --> 00:04:08,550

keyboard it'll animate everything that it needs to.



52

00:04:08,640 --> 00:04:09,480

It's very very cool.



53

00:04:09,480 --> 00:04:15,390

So there are some weird things in here that you've maybe never seen before but it's all part of default



54

00:04:15,450 --> 00:04:16,290

iOS.



55

00:04:16,290 --> 00:04:22,140

So in order to actually create the animation that we need we're going to go ahead and we're going to



56

00:04:22,140 --> 00:04:23,730

call you view.



57

00:04:23,970 --> 00:04:25,730

Animate keyframes.



58

00:04:25,730 --> 00:04:26,010

OK.



59

00:04:26,010 --> 00:04:32,340

And as you can see it creates an animation block object that can be used to set up keyframe based animations



60

00:04:32,340 --> 00:04:34,130

for the current view.



61

00:04:34,140 --> 00:04:39,780

So let's say that our view is a button we can animate the frames and move them wherever we need to using



62

00:04:39,990 --> 00:04:41,440

animate keyframes.



63

00:04:41,490 --> 00:04:47,620

Now you can see here that we have a lot of different things that we need to be able to do.



64

00:04:47,760 --> 00:04:52,560

We need a duration a delay options animations and completion.



65

00:04:52,560 --> 00:04:54,240

And we're going to come back to that in a second.



66

00:04:54,260 --> 00:04:56,840

But first we need to set up five properties.



67

00:04:57,000 --> 00:05:02,370

We're going to set up the duration and we're going to actually pull the duration of the keyboard animation



68

00:05:02,400 --> 00:05:06,450

and set that as the same duration for when we animate our button.



69

00:05:06,450 --> 00:05:11,600

So we're going to create a constant called duration and in order to get that duration we're going to



70

00:05:11,600 --> 00:05:14,170

pull it from the notification that we pass in.



71

00:05:14,210 --> 00:05:18,640

Right which is going to come from our selector So let's use that notification.



72

00:05:18,770 --> 00:05:24,550

We're going to go ahead and pull out user info which is the dictionary that is just part of notifications



73

00:05:24,560 --> 00:05:26,120

really cool.



74

00:05:26,150 --> 00:05:29,590

The issue though is user info is optional.



75

00:05:29,600 --> 00:05:34,910

And in order to access it we need to force unwrap it and like we said it's a dictionary so we're going



76

00:05:34,910 --> 00:05:44,870

to pull out the value for a certain key and the key for that is UI keyboard keyboard or keyboard animation



77

00:05:44,960 --> 00:05:47,250

duration user info key.



78

00:05:47,270 --> 00:05:52,960

So we're pulling out the duration from the keyboard and we're going to set it as a double.



79

00:05:53,030 --> 00:05:53,410

OK.



80

00:05:53,510 --> 00:05:56,810

It's a number value and it just happens to come in as a double.



81

00:05:56,810 --> 00:06:02,420

Now that's the cool thing is we have the same duration as the keyboard so that it moves the same exact



82

00:06:02,420 --> 00:06:03,040

time.



83

00:06:03,260 --> 00:06:10,070

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



84

00:06:10,100 --> 00:06:11,450

point zero.



85

00:06:11,450 --> 00:06:12,420

Sounds awesome.



86

00:06:12,680 --> 00:06:17,000

But now we need to also get the animation curve.



87

00:06:17,000 --> 00:06:23,420

Now the interesting thing is that every animation has a curve and sometimes you might see easy in easy



88

00:06:23,420 --> 00:06:31,770

out as in out it's a way that the animation either comes to a halt or or begins starting slowly and



89

00:06:32,660 --> 00:06:35,380

kind of slowly speeding up to full speed.



90

00:06:35,450 --> 00:06:39,270

So we're going to go ahead and get the same curve from the keyboard as well.



91

00:06:39,290 --> 00:06:48,770

So Type let curve equals notification that user info force on wrap it and the key for this is UI keyboard



92

00:06:48,800 --> 00:06:52,160

animation curve user info key.



93

00:06:52,160 --> 00:06:55,190

Now this this is just something you need to know.



94

00:06:55,250 --> 00:06:57,320

This value comes in as a U.



95

00:06:57,350 --> 00:07:03,910

Int k it's a type of integer and it's an unsigned integer value type K.



96

00:07:04,010 --> 00:07:05,630

So very cool.



97

00:07:05,630 --> 00:07:12,260

All you need to know is that that is of type and it's not super important but the options are where



98

00:07:12,260 --> 00:07:13,690

we're going to use this.



99

00:07:13,700 --> 00:07:19,490

There are keyframe animation options and we're going to actually go ahead and instantiate that and we're



100

00:07:19,490 --> 00:07:25,630

going to pass in the raw value here of curve because remember it's a you end.



101

00:07:25,640 --> 00:07:33,700

And if you look this is expecting an option set and that option set comes from values of int or you



102

00:07:33,700 --> 00:07:33,920

end.



103

00:07:33,920 --> 00:07:36,480

So in our instance it's actually you went.



104

00:07:36,560 --> 00:07:37,340

All right.



105

00:07:37,340 --> 00:07:46,150

So we now told it we want it to have the same animation curve as the keyboard the same exact one.



106

00:07:46,160 --> 00:07:51,670

So now we need to set up the frame at the beginning and then we'll set up the frame at the end.



107

00:07:51,680 --> 00:07:57,490

So let's go ahead and call Let beginning frame equals notification and user info.



108

00:07:57,490 --> 00:08:01,970

Unwrap it and get out the key for a UI keyboard.



109

00:08:01,980 --> 00:08:03,780

Begin user in-focus.



110

00:08:03,800 --> 00:08:09,800

And this is the key for a value containing a C.G. wrecked the frame of the keyboard that identifies



111

00:08:09,800 --> 00:08:15,200

the start frame of the keyboard and coordinates so it's going to show you the beginning frame as the



112

00:08:15,200 --> 00:08:17,200

keyboard is hidden down below the screen.



113

00:08:17,600 --> 00:08:19,470

So we're going to access that.



114

00:08:19,610 --> 00:08:24,470

And the interesting thing is you saw that it was a C-g recked that is returned.



115

00:08:24,620 --> 00:08:31,620

But the interesting thing is is that we need to actually pull this out by calling Scott C.G. wrecked.



116

00:08:31,830 --> 00:08:33,370

Wrecked value.



117

00:08:33,470 --> 00:08:33,790

OK.



118

00:08:33,800 --> 00:08:36,420

That's actually how we're going to pull it out.



119

00:08:36,440 --> 00:08:42,060

But the interesting thing is we can't just do that straight off of the notification.



120

00:08:42,170 --> 00:08:47,390

So we're actually going to go ahead and encapsulate this in parentheses and we're going to cast this



121

00:08:47,390 --> 00:08:50,150

value as an asset value.



122

00:08:50,150 --> 00:08:54,590

That's the way that we're going to get out the container of the data.



123

00:08:54,590 --> 00:09:02,690

And so with that container full of of data from this keyboard frame now with that data we can cast it



124

00:09:02,930 --> 00:09:09,130

as C-g recked value we can convert that data into a C-g recked very very cool.



125

00:09:09,170 --> 00:09:14,330

We're going to now go ahead and take the end frame when the keyboard is all the way up at the top and



126

00:09:14,330 --> 00:09:16,130

we're going to create a constant to hold that as well.



127

00:09:16,130 --> 00:09:25,760

So go ahead and type let and frame equals notification dot user info unwrap it and let's get the key



128

00:09:25,760 --> 00:09:31,190

for you keyboard and user info key or frame and user info key.



129

00:09:31,490 --> 00:09:32,690

And we're going to do the same thing.



130

00:09:32,690 --> 00:09:38,930

We're going to cast it as an s value then we're going to go ahead and select all of it put it in parentheses



131

00:09:39,200 --> 00:09:41,410

and then pull out the C-g rect value.



132

00:09:41,600 --> 00:09:46,160

By the way in X code 9 if you just select something and then do what you would normally do to create



133

00:09:46,160 --> 00:09:46,540

a quote.



134

00:09:46,550 --> 00:09:51,530

It'll put it in quotes if you do a print to see it'll put everything in parentheses beginning and end.



135

00:09:51,530 --> 00:09:52,620

Very cool.



136

00:09:52,640 --> 00:09:57,050

So just like before we're going to unwrap this and pull out the C-g recked value.



137

00:09:57,140 --> 00:10:00,670

So now we have a beginning frame and an end frame.



138

00:10:00,920 --> 00:10:02,740

And that's really cool.



139

00:10:02,760 --> 00:10:08,170

Now what we're going to do is we're going to go ahead and create a value for the Delta and Delta if



140

00:10:08,170 --> 00:10:10,420

you know is a word that means change.



141

00:10:10,510 --> 00:10:16,240

So we're going to monitor that change on the y axis and to do that we're actually going to take the



142

00:10:16,240 --> 00:10:23,080

beginning frame which is when it's below the screen and we're going to subtract the end frame that basically



143

00:10:23,080 --> 00:10:28,540

is just going to take the y value and it's going to subtract it so we know exactly how far the keyboard



144

00:10:28,540 --> 00:10:29,320

moves up.



145

00:10:29,320 --> 00:10:36,400

So go ahead and call this let Delta Y and to do that we're going to just basically take the and frame



146

00:10:36,990 --> 00:10:38,600

dot origin.



147

00:10:38,650 --> 00:10:46,190

So it's starting point Y and we're going to subtract beginning frame of origin dot y.



148

00:10:46,480 --> 00:10:49,990

So that way we get the value of the difference of those two.



149

00:10:50,290 --> 00:10:56,950

And the coolest thing is that when we call animations K click animations press enter and this is where



150

00:10:56,950 --> 00:11:01,510

we're going to actually change the frame of whatever you view as binding to the keyboard.



151

00:11:01,810 --> 00:11:03,850

Go ahead and call self.



152

00:11:03,910 --> 00:11:08,170

For this you I view framed origin Y.



153

00:11:08,590 --> 00:11:14,900

And we're going to set it to basically move it up however much the keyboard frame change.



154

00:11:14,900 --> 00:11:18,330

So we're going to do plus equals Delta y.



155

00:11:18,400 --> 00:11:22,900

So if that makes sense the bottom of the screen has nothing that the keyboard is beneath it when it



156

00:11:22,900 --> 00:11:27,350

slides up the Delta y value is how tall the keyboard is.



157

00:11:27,400 --> 00:11:32,260

We want the object to bind to the keyboard and move up that same exact amount.



158

00:11:32,260 --> 00:11:38,350

So we're just taking the y value for whatever you view this is for and we're moving it up an additional



159

00:11:38,410 --> 00:11:39,800

Delta y.



160

00:11:39,820 --> 00:11:44,890

Super super super cool like this is the coolest thing that I've ever done with a view extension.



161

00:11:44,890 --> 00:11:50,100

Now for the end we're going to go ahead and just put nyl for the completion because we don't care.



162

00:11:50,110 --> 00:11:53,830

And the last thing we need to do is basically pass this function to our selector.



163

00:11:53,830 --> 00:12:01,060

So go ahead and type keyboard will change push enter and we're good with exception of adding at a BJC



164

00:12:01,240 --> 00:12:06,480

to expose Whoops oh BJC to expose this function to Objective-C.



165

00:12:06,490 --> 00:12:07,260

All right.



166

00:12:07,450 --> 00:12:07,980

Let's build it.



167

00:12:07,990 --> 00:12:09,690

Let's make sure that's good to go.



168

00:12:11,180 --> 00:12:12,320

Looks like it is.



169

00:12:12,590 --> 00:12:18,460

Now let's go ahead and let's head into create post to see if you remember.



170

00:12:18,560 --> 00:12:20,160

Let's go look at the storyboard.



171

00:12:20,210 --> 00:12:25,030

We have a button right here that gets covered by the keyboard.



172

00:12:25,070 --> 00:12:30,080

We're going to set it so that this button is bound to the keyboard and it slides up as soon as the keyboard



173

00:12:30,110 --> 00:12:31,630

becomes visible.



174

00:12:31,880 --> 00:12:38,180

So to do that all we need to do is in view to load call send button that bind to keyboard.



175

00:12:38,510 --> 00:12:43,570

That's the coolest thing because a button if you go deep down let's go find it.



176

00:12:43,770 --> 00:12:47,030

You button actually you know what.



177

00:12:47,780 --> 00:12:49,740

Well you get the idea.



178

00:12:50,000 --> 00:12:52,280

It comes from you I control and as coding.



179

00:12:52,460 --> 00:12:57,520

And if you go deeper and deeper and deeper you'll find that it's really a sibling of you view.



180

00:12:57,530 --> 00:13:02,430

So anything that is you view compatible like profile image is a UI image view.



181

00:13:02,450 --> 00:13:05,090

We could also bind this to the keyboard.



182

00:13:05,270 --> 00:13:08,420

OK the text view if we wanted to we could also do text view.



183

00:13:08,480 --> 00:13:13,190

Bind to keyboard anything that inherits from you I view can be bound to the keyboard but let's just



184

00:13:13,190 --> 00:13:16,040

try it for now with BIND to keyboard.



185

00:13:16,040 --> 00:13:16,610

Now you know what.



186

00:13:16,610 --> 00:13:19,150

In our simulator I noticed a problem.



187

00:13:19,160 --> 00:13:19,850

Take a look.



188

00:13:19,850 --> 00:13:28,980

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



189

00:13:29,020 --> 00:13:35,180

inspector and we're going to go ahead and choose where is it default profile image beautiful.



190

00:13:35,190 --> 00:13:36,300

So let's build and run.



191

00:13:36,300 --> 00:13:41,580

Let's go check out how amazing this is the binding to keyboards one of the coolest you I've you extensions



192

00:13:41,580 --> 00:13:43,230

I've ever written.



193

00:13:43,230 --> 00:13:47,640

And we're going to go ahead and open it up and take a look to see if it worked.



194

00:13:47,640 --> 00:13:48,450

Here we go.



195

00:13:48,480 --> 00:13:49,320

Open this.



196

00:13:49,320 --> 00:13:53,330

And when I tap on the text view we should see it slide up with the keyboard.



197

00:13:53,790 --> 00:13:55,490

Oh except I have the keyboard turned off.



198

00:13:55,650 --> 00:13:58,880

So toggle software keyboard and look at that.



199

00:13:58,890 --> 00:14:00,140

It works with it.



200

00:14:00,150 --> 00:14:01,310

Let's try that again.



201

00:14:01,440 --> 00:14:06,600

Open it up and it slides with the keyboard it stays exactly where the keyboard is.



202

00:14:06,600 --> 00:14:08,720

That is so so cool.



203

00:14:09,000 --> 00:14:09,460

Wow.



204

00:14:09,480 --> 00:14:10,910

Very very beautiful.



205

00:14:10,940 --> 00:14:15,130

A really nice interaction it just makes it easy for the user to know exactly what to do.



206

00:14:15,150 --> 00:14:16,050

They never get lost.



207

00:14:16,050 --> 00:14:19,800

They don't have to tap to hide the keyboard and then tap the send button.



208

00:14:19,810 --> 00:14:20,690

They're good to go.



209

00:14:20,820 --> 00:14:26,340

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



210

00:14:26,550 --> 00:14:28,800

to go in the table view.



211

00:14:28,800 --> 00:14:33,540

We're also going to write the subclass and that will set us up to start downloading all of our messages



212

00:14:33,540 --> 00:14:36,420

from firebase and displaying them in real time.



213

00:14:36,420 --> 00:14:37,320

It's going to be amazing.



214

00:14:37,320 --> 00:14:39,920

And let's go ahead and head over there and get started right now.