1
00:00:08,020 --> 00:00:13,270
Hey guys this is Caleb with Dev's Loeb's dotcom and in this video we're going to build an awesome you

2
00:00:13,450 --> 00:00:19,390
view extension that's going to allow us to bind and object to the keyboards so that when we open up

3
00:00:19,420 --> 00:00:25,240
a text view or a text field the object can slide up with the keyboard and slide down automatically.

4
00:00:25,240 --> 00:00:30,910
It's 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,910 --> 00:00:31,710
of something special.

6
00:00:31,710 --> 00:00:36,780
So go ahead and pull open your X code project and we're going to go ahead and.

7
00:00:36,840 --> 00:00:40,270
Right click on the extensions group and create a new file.

8
00:00:40,390 --> 00:00:43,130
Like I said this is an extension of you view.

9
00:00:43,150 --> 00:00:49,200
So go ahead and click a new file swift file and we're going to name this UI view.

10
00:00:49,260 --> 00:00:50,100
E X T.

11
00:00:50,110 --> 00:00:53,310
Short for extension of course you probably already knew that though.

12
00:00:53,470 --> 00:01:01,330
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,330 --> 00:01:06,830
foundation with UI kit because we're going to need some of the stuff from in there.

14
00:01:07,090 --> 00:01:13,150
And now let's go ahead and type extension because this is an extension and we're extending the capabilities

15
00:01:13,150 --> 00:01:14,120
of UI.

16
00:01:14,120 --> 00:01:16,630
You put some curly brackets.

17
00:01:16,720 --> 00:01:19,150
And now we're going to write two functions.

18
00:01:19,150 --> 00:01:23,190
One function is going to utilize notification center.

19
00:01:23,200 --> 00:01:30,100
Basically we're going to add an observer to whenever the keyboard will change frame notification is

20
00:01:30,100 --> 00:01:34,150
called that's something that's called in the background of iOS by default.

21
00:01:34,150 --> 00:01:39,070
And we're going to set up an observer to basically watch for when that happens and then perform an action

22
00:01:39,310 --> 00:01:40,500
whenever it does.

23
00:01:40,510 --> 00:01:44,780
So our first function is going to be called bind to keyboard.

24
00:01:44,890 --> 00:01:53,350
So go ahead and type that phunk bind to keyboard and this is the function that we are going to call

25
00:01:53,350 --> 00:01:55,580
on any instance of UI view.

26
00:01:55,810 --> 00:02:02,800
So for instance in our app we have a send button so I can call send button bind to keyboard and basically

27
00:02:03,070 --> 00:02:07,210
what it's going to do is on that instance of you I view our button.

28
00:02:07,210 --> 00:02:15,520
It's going to add an observer to whenever the keyboard changes frame whenever the keyboard goes up or

29
00:02:15,520 --> 00:02:16,140
down.

30
00:02:16,360 --> 00:02:24,730
So in here we're going to go ahead and call notification center default and we're going to add an observer.

31
00:02:24,730 --> 00:02:31,000
Now you probably notice there is this option here with an observer selector name and object.

32
00:02:31,000 --> 00:02:33,850
We're going to use all of these except the object.

33
00:02:33,850 --> 00:02:37,510
So for the observer it's going to of course be self.

34
00:02:37,510 --> 00:02:43,840
Because if the button is supposed to be observing self is how we're going to get reference to the object

35
00:02:43,840 --> 00:02:51,370
that we are observing selector is going to be pound sign selector and we're going to put in the function

36
00:02:51,370 --> 00:02:56,900
that we write later here the function that will be called when bind to keyboard is executed.

37
00:02:57,070 --> 00:03:03,670
The notification we need to pay attention to is notification name and we can actually just pull out

38
00:03:03,670 --> 00:03:08,810
one of the default ones you keyboard will change frame.

39
00:03:09,130 --> 00:03:14,500
So this is called right before the keyboard changes frames so that it animates beautifully with the

40
00:03:14,500 --> 00:03:15,320
keyboard.

41
00:03:15,550 --> 00:03:18,990
Now the selector or sorry the object is nil.

42
00:03:19,090 --> 00:03:21,340
We don't need to worry about the object.

43
00:03:21,400 --> 00:03:24,330
The only thing we need to worry about now is the selector.

44
00:03:24,400 --> 00:03:27,160
And we're going to write that function right now.

45
00:03:27,160 --> 00:03:38,200
So go ahead and we're going to call phunk keyboard key board will change and in order to get this to

46
00:03:38,200 --> 00:03:42,440
work we actually need to pass in a notification like so.

47
00:03:42,460 --> 00:03:47,840
So go ahead type notification of type and as notification already.

48
00:03:48,220 --> 00:03:54,100
And that's just going to allow us to basically send the value of whatever object is conforming or not

49
00:03:54,100 --> 00:03:59,320
conforming but whatever object is calling this function we're going to be able to pass in this notification

50
00:03:59,320 --> 00:04:05,470
through keyboard will change and the notification that we get here is going to get the frame of the

51
00:04:05,470 --> 00:04:08,490
keyboard it will animate everything that it needs to.

52
00:04:08,590 --> 00:04:09,440
It's very very cool.

53
00:04:09,440 --> 00:04:15,340
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,370 --> 00:04:16,210
iOS.

55
00:04:16,210 --> 00:04:22,060
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,060 --> 00:04:25,590
call you I view animate keyframes.

57
00:04:25,680 --> 00:04:25,960
OK.

58
00:04:25,960 --> 00:04:32,290
And as you can see it creates an animation block object that can be used to set up key frame based animations

59
00:04:32,290 --> 00:04:33,880
for the current view.

60
00:04:34,090 --> 00:04:39,220
So let's say that our view is a button we can animate the frames and move them wherever we need to.

61
00:04:39,220 --> 00:04:46,330
Using animate keyframes Now you can see here that we have a lot of different things that we need to

62
00:04:46,330 --> 00:04:47,680
be able to do.

63
00:04:47,710 --> 00:04:52,260
We need a duration a delay options animations and completion.

64
00:04:52,480 --> 00:04:54,180
And we're going to come back to that in a second.

65
00:04:54,190 --> 00:04:56,910
But first we need to set up five properties.

66
00:04:56,920 --> 00:05:02,320
We're going to set up the duration and we're going to actually pull the duration of the keyboard animation

67
00:05:02,350 --> 00:05:06,400
and set that as the same duration for when we animate our button.

68
00:05:06,400 --> 00:05:09,830
So we're going to create a constant called duration.

69
00:05:09,830 --> 00:05:14,100
And in order to get that duration we're going to pull it from the notification that we pass in.

70
00:05:14,150 --> 00:05:18,570
Right which is going to come from our selector So let's use that notification.

71
00:05:18,710 --> 00:05:24,480
We're going to go ahead and pull out user info which is a dictionary that is just part of a notifications

72
00:05:24,500 --> 00:05:25,690
really cool.

73
00:05:26,090 --> 00:05:29,540
The issue though is user info is optional.

74
00:05:29,540 --> 00:05:34,850
And in order to access it we need to force unwrap it and like we said it's a dictionary so we're going

75
00:05:34,850 --> 00:05:44,840
to pull out the value for a certain key and the key for that is UI keyboard keyboard or keyboard animation

76
00:05:44,900 --> 00:05:47,190
duration user info key.

77
00:05:47,210 --> 00:05:52,910
So we're pulling out the duration from the keyboard and we're going to set it as a double.

78
00:05:52,970 --> 00:05:53,390
OK.

79
00:05:53,450 --> 00:05:56,750
It's a number value and it just happens to come in as a double.

80
00:05:56,750 --> 00:06:02,360
Now that's the cool thing is we have the same duration as the keyboard so that it moves the same exact

81
00:06:02,360 --> 00:06:02,980
time.

82
00:06:03,200 --> 00:06:10,010
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

83
00:06:10,040 --> 00:06:11,370
point zero.

84
00:06:11,390 --> 00:06:12,340
Sounds awesome.

85
00:06:12,620 --> 00:06:16,940
But now we need to also get the animation curve.

86
00:06:16,940 --> 00:06:23,250
Now the interesting thing is that every animation has a curve and sometimes you might see easy in easy

87
00:06:23,370 --> 00:06:31,880
out as in out it's a way that the animation either comes to a halt or or begins starting slowly and

88
00:06:32,600 --> 00:06:35,320
kind of slowly speeding up to full speed.

89
00:06:35,390 --> 00:06:39,240
So we're going to go ahead and get the same curve from the keyboard as well.

90
00:06:39,260 --> 00:06:48,710
So Type let curve equals notification that user info force on it and the key for this is UI keyboard

91
00:06:48,740 --> 00:06:52,090
animation curve user info key.

92
00:06:52,100 --> 00:06:55,130
Now this this is just something you need to know.

93
00:06:55,190 --> 00:06:57,260
This value comes in as a U.

94
00:06:57,290 --> 00:07:03,850
Int k it's a type of integer and it's an unsigned integer value type K.

95
00:07:03,950 --> 00:07:05,570
So very cool.

96
00:07:05,570 --> 00:07:12,200
All you need to know is that that is of type and it's not super important but the options are where

97
00:07:12,200 --> 00:07:13,660
we're going to use this.

98
00:07:13,670 --> 00:07:19,430
There are keyframe animation options and we're going to actually go ahead and instantiate that and we're

99
00:07:19,430 --> 00:07:25,570
going to pass in the raw value here of curve because remember it's a you end.

100
00:07:25,580 --> 00:07:33,650
And if you look this is expecting an option set and that option set comes from values of int or you

101
00:07:33,650 --> 00:07:33,860
end.

102
00:07:33,860 --> 00:07:36,470
So in our instance it's actually you went.

103
00:07:36,500 --> 00:07:37,200
All right.

104
00:07:37,280 --> 00:07:46,090
So we now told it we want it to have the same animation curve as the keyboard the same exact one.

105
00:07:46,100 --> 00:07:51,620
So now we need to set up the frame at the beginning and then we'll set up the frame at the end.

106
00:07:51,620 --> 00:07:58,610
So let's go ahead and call Let beginning frame equals notification and user info unwrap it and get out

107
00:07:58,620 --> 00:08:01,320
the key for a UI keyboard.

108
00:08:01,910 --> 00:08:03,730
Begin user in-focus.

109
00:08:03,740 --> 00:08:09,740
And this is the key for a value containing a C.G. wrecked the frame of the keyboard that identifies

110
00:08:09,740 --> 00:08:15,140
the start frame of the keyboard and coordinates so it's going to show you the beginning frame as the

111
00:08:15,140 --> 00:08:17,180
keyboard is hidden down below the screen.

112
00:08:17,540 --> 00:08:19,550
So we're going to access that.

113
00:08:19,550 --> 00:08:24,560
And the interesting thing is you saw that it was a C-g recked that has returned.

114
00:08:24,560 --> 00:08:31,380
But the interesting thing is is that we need to actually pull this out by calling Scott CEG wrecked.

115
00:08:31,770 --> 00:08:33,070
Wrecked value.

116
00:08:33,410 --> 00:08:33,740
OK.

117
00:08:33,740 --> 00:08:36,360
That's actually how we're going to pull it out.

118
00:08:36,380 --> 00:08:41,920
But the interesting thing is we can't just do that straight off of the notification.

119
00:08:42,110 --> 00:08:47,360
So we're actually going to go ahead and encapsulate this in parentheses and we're going to cast this

120
00:08:47,360 --> 00:08:49,900
value as an asset value.

121
00:08:50,090 --> 00:08:54,530
That's the way that we're going to get out the container of the data.

122
00:08:54,530 --> 00:09:03,050
And so with that container full of data from this keyboard frame now with that data we can cast it as

123
00:09:03,050 --> 00:09:07,130
C-g recked value we can convert that data into a C-G.

124
00:09:07,580 --> 00:09:09,070
Very very cool.

125
00:09:09,110 --> 00:09:14,270
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,270 --> 00:09:16,070
we're going to create a constant to hold that as well.

127
00:09:16,070 --> 00:09:25,700
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,700 --> 00:09:31,150
for your keyboard and user info key or frame and user info key.

129
00:09:31,430 --> 00:09:32,630
And we're going to do the same thing.

130
00:09:32,630 --> 00:09:38,090
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

131
00:09:38,090 --> 00:09:41,540
parentheses and then pull out the C-g rect value.

132
00:09:41,540 --> 00:09:46,100
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,100 --> 00:09:46,490
a quote.

134
00:09:46,490 --> 00:09:51,260
It'll put it in quotes if you do a print to see it will put everything in parentheses beginning and

135
00:09:51,260 --> 00:09:51,470
end.

136
00:09:51,470 --> 00:09:52,580
Very cool.

137
00:09:52,580 --> 00:09:57,080
So just like before we're going to unwrap this and pull out the C-g recked value.

138
00:09:57,080 --> 00:10:00,610
So now we have a beginning frame and an end frame.

139
00:10:00,860 --> 00:10:02,690
And that's really cool.

140
00:10:02,690 --> 00:10:08,110
Now what we're going to do is we're going to go ahead and create a value for the Delta and Delta if

141
00:10:08,110 --> 00:10:10,360
you know is a word that means change.

142
00:10:10,450 --> 00:10:16,180
So we're going to monitor that change on the y axis and to do that we're actually going to take the

143
00:10:16,180 --> 00:10:23,020
beginning frame which is when it's below the screen and we're going to subtract the end frame that basically

144
00:10:23,020 --> 00:10:28,480
is just going to take the y value and it's going to subtract it so we know exactly how far the keyboard

145
00:10:28,480 --> 00:10:29,220
moves up.

146
00:10:29,260 --> 00:10:36,340
So go ahead and call this let Delta Y and to do that we're going to just basically take the and frame

147
00:10:36,940 --> 00:10:38,550
dot origin.

148
00:10:38,590 --> 00:10:46,100
So it's starting point Y and we're going to subtract beginning frame origin dot y.

149
00:10:46,420 --> 00:10:49,910
So that way we get the value of the difference of those two.

150
00:10:50,230 --> 00:10:56,920
And the coolest thing is that when we call animations K click animations press enter and this is where

151
00:10:56,920 --> 00:11:01,450
we're going to actually change the frame of whatever you view as binding to the keyboard.

152
00:11:01,750 --> 00:11:03,850
Go ahead and call self.

153
00:11:03,850 --> 00:11:08,150
For this view frame dot origin Y.

154
00:11:08,530 --> 00:11:14,830
And we're going to set it to basically move it up however much the keyboard frame change.

155
00:11:14,830 --> 00:11:18,050
So we're going to do plus equals Delta y.

156
00:11:18,340 --> 00:11:22,840
So if that makes sense the bottom of the screen has nothing that the keyboard is beneath it when it

157
00:11:22,840 --> 00:11:27,290
slides up the Delta y value is how tall the keyboard is.

158
00:11:27,340 --> 00:11:32,200
We want the object to bind to the keyboard and move up that same exact amount.

159
00:11:32,200 --> 00:11:38,290
So we're just taking the y value for whatever you view this is for and we're moving it up an additional

160
00:11:38,350 --> 00:11:39,740
Delta y.

161
00:11:39,760 --> 00:11:44,830
Super super super cool like this is the coolest thing that I've ever done with a view extension.

162
00:11:44,830 --> 00:11:49,870
Now for the end we're going to go ahead and just put nyl for the completion because we don't care.

163
00:11:50,050 --> 00:11:53,770
And the last thing we need to do is basically pass this function to our selector.

164
00:11:53,770 --> 00:12:00,970
So go ahead and type keyboard will change push enter and we're good with exception of adding at BJC

165
00:12:01,180 --> 00:12:06,430
to expose Whoops oh BJC to expose this function to Objective-C.

166
00:12:06,430 --> 00:12:07,130
All right.

167
00:12:07,390 --> 00:12:07,920
Let's build it.

168
00:12:07,930 --> 00:12:09,630
Let's make sure that's good to go.

169
00:12:11,130 --> 00:12:12,450
Looks like it is.

170
00:12:12,540 --> 00:12:18,350
Now let's go ahead and let's head into create post to see if you remember.

171
00:12:18,510 --> 00:12:20,100
Let's go look at the storyboard.

172
00:12:20,160 --> 00:12:24,970
We have a button right here that gets covered by the keyboard.

173
00:12:25,020 --> 00:12:30,030
We're going to set it so that this button is bound to the keyboard and it slides up as soon as the keyboard

174
00:12:30,030 --> 00:12:31,560
becomes visible.

175
00:12:31,800 --> 00:12:38,200
So to do that all we need to do is in view to load call send button bind to keyboard.

176
00:12:38,460 --> 00:12:43,510
That's the coolest thing because a button if you go deep down let's go find it.

177
00:12:43,690 --> 00:12:47,000
You button actually you know what.

178
00:12:47,730 --> 00:12:49,920
Well you get the idea.

179
00:12:49,920 --> 00:12:52,240
It comes from you I control and as coding.

180
00:12:52,410 --> 00:12:57,470
And if you go deeper and deeper and deeper you'll find that it's really a sibling of you eye view.

181
00:12:57,480 --> 00:13:02,400
So anything that is you view compatible like profile image is a UI image view.

182
00:13:02,400 --> 00:13:05,030
We can also bind this to the keyboard.

183
00:13:05,220 --> 00:13:09,690
OK the text view if we wanted to we could also do text view bind to keyboard.

184
00:13:09,690 --> 00:13:14,370
Anything that inherits from you I view can be bound to the keyboard but let's just try it for now.

185
00:13:14,490 --> 00:13:15,860
With bind to keyboard.

186
00:13:15,990 --> 00:13:16,560
Now you know what.

187
00:13:16,560 --> 00:13:19,060
In our simulator I noticed a problem.

188
00:13:19,080 --> 00:13:19,740
Take a look.

189
00:13:19,770 --> 00:13:23,920
If I go to add a new post our profile image is empty.

190
00:13:24,330 --> 00:13:31,250
Let's fill that up right now by going to the attributes inspector and we're going to go ahead and choose

191
00:13:31,850 --> 00:13:35,150
where is it default profile image beautiful.

192
00:13:35,150 --> 00:13:40,640
So let's build and run let's go check out how amazing this is the binding to keyboard's one of the coolest

193
00:13:40,640 --> 00:13:43,160
you I've extensions I've ever written.

194
00:13:43,160 --> 00:13:47,600
And we're going to go ahead and open it up and take a look to see if it worked.

195
00:13:47,600 --> 00:13:48,430
Here we go.

196
00:13:48,440 --> 00:13:49,250
Open this.

197
00:13:49,250 --> 00:13:53,000
And when I tap on the text view we should see it slide up with the keyboard.

198
00:13:53,670 --> 00:13:58,820
Oh except I have the keyboard turned off so toggle software keyboard and look at that.

199
00:13:58,820 --> 00:13:59,980
It works with it.

200
00:14:00,080 --> 00:14:01,280
Let's try that again.

201
00:14:01,400 --> 00:14:06,530
Open it up and it slides with the keyboard it stays exactly where the keyboard is.

202
00:14:06,530 --> 00:14:08,640
That is so so cool.

203
00:14:08,960 --> 00:14:09,400
Wow.

204
00:14:09,410 --> 00:14:14,450
Very very beautiful really nice interaction it just makes it easy for the user to know exactly what

205
00:14:14,450 --> 00:14:15,090
to do.

206
00:14:15,110 --> 00:14:15,980
They never get lost.

207
00:14:15,980 --> 00:14:19,680
They don't have to tap to hide the keyboard and then tap the send button.

208
00:14:19,740 --> 00:14:20,750
They're good to go.

209
00:14:20,750 --> 00:14:26,270
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,480 --> 00:14:28,730
to go in the table view.

211
00:14:28,730 --> 00:14:33,500
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,500 --> 00:14:36,270
from firebase and displaying them in real time.

213
00:14:36,350 --> 00:14:37,280
It's going to be amazing.

214
00:14:37,280 --> 00:14:39,830
And let's go ahead and head over there and get started right now.