1
00:00:08,140 --> 00:00:13,210
Everybody this is Caleb with slopes again and in this video we're going to write two more extensions

2
00:00:13,480 --> 00:00:20,350
one for you view and one for you I button that's one going to allow us to bind anything that inherits

3
00:00:20,350 --> 00:00:24,970
from you eye view to the keyboard so that when the keyboard slides up that object does as well.

4
00:00:25,120 --> 00:00:31,450
And we're also going to write a button extension to change the color when selected and when de-selected.

5
00:00:31,450 --> 00:00:31,830
OK.

6
00:00:31,870 --> 00:00:35,530
So let's open up that X code project and let's do it now.

7
00:00:35,680 --> 00:00:38,540
Right click on extensions and click new file.

8
00:00:38,740 --> 00:00:41,750
Let's start with our UI view extension.

9
00:00:42,010 --> 00:00:49,450
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

10
00:00:49,450 --> 00:00:50,680
create.

11
00:00:50,980 --> 00:00:51,430
Awesome.

12
00:00:51,430 --> 00:00:56,270
So since this has to do with UI views we're going to need to import UI kit.

13
00:00:56,710 --> 00:01:02,680
And like I said we're going to make an extension of UI view just like that.

14
00:01:02,690 --> 00:01:08,770
Now what we're going to do is first we're going to write a function called bind keyboard and all this

15
00:01:08,770 --> 00:01:13,810
function is going to do is it's going to add an observer that's going to observe the notification that's

16
00:01:13,810 --> 00:01:21,550
sent when the keyboard changes frame and that's a default IO us notification that is fired every time

17
00:01:21,550 --> 00:01:22,980
that the keyboard opens.

18
00:01:23,170 --> 00:01:27,700
And then what we're going to do is we're going to write another function called keyboard will change

19
00:01:28,060 --> 00:01:34,060
and this function is basically just going to go ahead and animate the frame of whatever object we bind

20
00:01:34,060 --> 00:01:37,680
the keyboard to so that it moves up with the keyboard in the exact same way.

21
00:01:37,690 --> 00:01:39,340
So let's get started.

22
00:01:39,340 --> 00:01:47,500
We're first going to go ahead and write phunk bind to keyboard WIPs keyboard and that's great.

23
00:01:47,500 --> 00:01:51,250
Now inside of this function we're going to call notification center.

24
00:01:51,940 --> 00:01:57,100
Default will get the default notification center and we're going to add an observer.

25
00:01:57,130 --> 00:02:02,770
Now of course when we call this we need to give an observer which is the view so we'll call self the

26
00:02:02,770 --> 00:02:09,280
selector is going to be poun sign selector and inside of this is where we're going to call the function

27
00:02:09,280 --> 00:02:09,660
later.

28
00:02:09,660 --> 00:02:14,670
Keyboard will change which actually is responsible for animating the frame of the keyboard.

29
00:02:14,680 --> 00:02:20,020
Next we're going to go ahead and we're going to call the N S notification that comes from deep within

30
00:02:20,020 --> 00:02:22,960
Iowa s called the keyboard will change frame.

31
00:02:22,990 --> 00:02:28,870
So for this we can actually just go ahead and press enter and we can go to any notification dot name

32
00:02:28,960 --> 00:02:37,090
dot UI keyboard will change frame press enter and then for the object to go ahead and set nyl we don't

33
00:02:37,090 --> 00:02:42,320
care about the object but we do need to put a function here and that is where we're going to write.

34
00:02:42,330 --> 00:02:43,600
Keyboard will change.

35
00:02:43,600 --> 00:02:52,420
So go ahead and beneath this right phunk keyboard will change and we're going to pass in a notification

36
00:02:53,440 --> 00:02:55,280
of type and as notification.

37
00:02:55,420 --> 00:02:56,170
OK.

38
00:02:56,470 --> 00:03:02,680
Now we're using the underscore here because we don't necessarily need to call notification we can just

39
00:03:02,680 --> 00:03:08,050
have it be blank but we do want the internal parameters that we can access it inside this function.

40
00:03:08,050 --> 00:03:14,830
So let's go ahead and what we're going to do is we're going to pull out five properties from the notification

41
00:03:14,830 --> 00:03:15,470
itself.

42
00:03:15,470 --> 00:03:22,420
OK so whatever whatever object we bind this to we're going to basically pull out some information about

43
00:03:22,420 --> 00:03:23,730
the keyboard.

44
00:03:23,770 --> 00:03:28,300
Basically we're going to pull out the duration of the animation that the keyboard has when it moves.

45
00:03:28,300 --> 00:03:32,180
We're going to pull out the kind of animation curve that it use.

46
00:03:32,200 --> 00:03:37,980
We're also going to get the frame of the keyboard when it's below the screen and the frame when it's

47
00:03:37,980 --> 00:03:43,780
above the screen and then we're going to create one property that's basically going to find the difference

48
00:03:44,140 --> 00:03:48,490
of those so that we know how much to move up whatever view that we bind to the keyboard.

49
00:03:48,580 --> 00:03:49,190
OK.

50
00:03:49,510 --> 00:03:50,080
Now you know what.

51
00:03:50,110 --> 00:03:52,410
It's yelling at us let's fix this really quick.

52
00:03:52,480 --> 00:03:53,490
We're going to pass it.

53
00:03:53,500 --> 00:03:57,880
Keyboard will change and press enter and it's actually going to yell at us again.

54
00:03:57,880 --> 00:03:58,530
Check it out.

55
00:03:58,540 --> 00:04:03,940
It's going to say argument of poun selector refers to the instance method keyboard will change.

56
00:04:03,940 --> 00:04:06,590
That is not exposed to Objective-C.

57
00:04:06,610 --> 00:04:10,710
We're going to click fix and all it's going to do is just add Abi Jaycee to the front of it.

58
00:04:11,080 --> 00:04:16,360
And basically that's just going to give it the ability to interact with the objective C-code which deep

59
00:04:16,360 --> 00:04:21,490
down is what we're going to be basically using with these notifications from notification center.

60
00:04:21,490 --> 00:04:23,320
Don't worry about it we're writing in swift still.

61
00:04:23,350 --> 00:04:26,460
We just need to give it the ability to interact with objective C-code.

62
00:04:26,770 --> 00:04:34,920
So let's start by pulling out the duration of the keyboard animation by typing let duration equals notification.

63
00:04:34,930 --> 00:04:37,400
OK so we're accessing the notification here.

64
00:04:37,440 --> 00:04:44,230
My keyboard will change frame and inside of the notification There's a dictionary called user info and

65
00:04:44,230 --> 00:04:49,680
there is a bunch of information about this particular notification that we can access.

66
00:04:49,720 --> 00:04:54,100
But the interesting thing is is that it comes and is optional so we need to force on rapid in order

67
00:04:54,100 --> 00:04:56,800
to access it then since the dictionary.

68
00:04:56,830 --> 00:05:01,840
We're going to pull out the value for a certain key and we're going to give the key right here now that

69
00:05:01,840 --> 00:05:09,600
key for the duration is UI keyboard animation duration user in foci that's a really long mouthful but

70
00:05:09,600 --> 00:05:14,940
basically it is the key that identifies the duration of the animation in seconds.

71
00:05:14,940 --> 00:05:15,390
OK.

72
00:05:15,600 --> 00:05:21,660
The animation of the keyboard and this duration when we call it into a function later we're going to

73
00:05:21,660 --> 00:05:26,380
call you if you animate keyframes it asks for a double.

74
00:05:26,400 --> 00:05:29,890
So we're going to take this value and we're going to force cast it as a double.

75
00:05:30,060 --> 00:05:32,090
So we can use it next.

76
00:05:32,220 --> 00:05:34,790
We need to access the animations curve.

77
00:05:34,830 --> 00:05:40,500
Now every animation has a curve sometimes it's ease in right where the animation will start and it will

78
00:05:40,500 --> 00:05:43,790
sort of ease in slowly and then get up to full speed.

79
00:05:43,800 --> 00:05:51,090
Another curve is ease out right where it will start at full speed and then it'll slowly kind of slow

80
00:05:51,090 --> 00:05:53,730
down as it's approaching completion.

81
00:05:53,730 --> 00:05:58,470
There's also ease in out but we're just going to basically capture the same one that the keyboard uses.

82
00:05:58,470 --> 00:06:05,910
So go ahead and type let curve equals notification that user info and force unwrap it and we're going

83
00:06:05,910 --> 00:06:12,280
to get out the curve by typing UI keyboard animation curve user and Vokey.

84
00:06:12,300 --> 00:06:18,990
Now this one in order to properly use it with a UI view animate keyframes function.

85
00:06:18,990 --> 00:06:24,370
We need to cast it as a unit which is basically just an unsigned integer.

86
00:06:24,390 --> 00:06:28,080
If you've ever used any other programming language you'll note that is.

87
00:06:28,080 --> 00:06:32,610
And go ahead and just forecast that like I said as you want.

88
00:06:32,640 --> 00:06:33,010
All right.

89
00:06:33,030 --> 00:06:34,150
So that's cool.

90
00:06:34,230 --> 00:06:37,270
We now have the same animation curve.

91
00:06:37,410 --> 00:06:39,870
We're going to go ahead and now capture the frame.

92
00:06:40,070 --> 00:06:50,220
OK so go ahead and type let starting frame equals notification user info for us unwrap it.

93
00:06:50,400 --> 00:06:53,730
And the key is UI keyboard frame.

94
00:06:53,790 --> 00:06:55,810
Begin user info key.

95
00:06:55,860 --> 00:07:00,540
So this basically captures the frame of the keyboard when it's below the screen before it goes up.

96
00:07:00,540 --> 00:07:06,990
It tells us where it is and the cool thing is that we can actually turn this into a C.G. recked we can

97
00:07:06,990 --> 00:07:13,260
make this a rectangle so we can basically capture the exact size and value it's really cool in order

98
00:07:13,260 --> 00:07:20,220
to do that though we need to basically put this in parentheses force cast it as an s value and then

99
00:07:20,220 --> 00:07:25,950
after we do that we can pull out the CEG recked value of this information we get from the notification.

100
00:07:25,950 --> 00:07:31,740
So if you select the whole thing in X cotinine and then press 1 parentheses it actually will wrap the

101
00:07:31,740 --> 00:07:34,240
whole thing in parentheses which is pretty neat.

102
00:07:34,530 --> 00:07:40,410
But now instead of force casting this as a you end or as a double We're going to force cast it as an

103
00:07:40,410 --> 00:07:41,640
s value.

104
00:07:41,990 --> 00:07:42,810
OK.

105
00:07:42,820 --> 00:07:48,210
Now this value is basically just a simple container for a single C or objective c data item.

106
00:07:48,210 --> 00:07:55,500
So we've basically now converted this frame into raw data and from that raw data we can type dot C.G.

107
00:07:55,500 --> 00:08:00,660
recked value and we can convert it into a type of C.G. ract which is really neat.

108
00:08:00,660 --> 00:08:05,550
So we now have the starting frame of the keyboard when it's below the screen we can't see it.

109
00:08:05,550 --> 00:08:10,590
Now we need to capture the ending frame so that we know how far it's going to go so that we can move

110
00:08:10,590 --> 00:08:13,200
up whatever object we want the size of the keyboard.

111
00:08:13,230 --> 00:08:25,260
So go ahead and type let ending frame frame equals notification user info for some rapid UI keyboard

112
00:08:25,350 --> 00:08:28,190
frame and user info key.

113
00:08:28,650 --> 00:08:33,080
And just like the previous one we're going to force cast it as an s value.

114
00:08:33,240 --> 00:08:39,170
We're going to wrap it in parentheses like so by selecting everything and doing shift parentheses.

115
00:08:39,420 --> 00:08:41,340
And we're going to pull out the C-g recked value.

116
00:08:41,490 --> 00:08:46,200
OK so now this too has been converted into HEG rect.

117
00:08:46,320 --> 00:08:52,050
Now our last property is not going to come from the notification but we're going to basically use both

118
00:08:52,050 --> 00:08:54,310
the starting frame and the ending frame.

119
00:08:54,480 --> 00:08:59,850
And we're going to subtract the y values of both of those so we know exactly how much difference it

120
00:08:59,850 --> 00:09:00,910
changes.

121
00:09:00,930 --> 00:09:05,430
So we're going to call this delta y Delta meaning change.

122
00:09:05,430 --> 00:09:16,430
So go ahead and type let Delta y equals ending frame origin dot y meaning the starting point on the

123
00:09:16,430 --> 00:09:17,400
y coordinate.

124
00:09:17,750 --> 00:09:24,320
And we're going to subtract beginning frame or starting frame I mean origin dot y.

125
00:09:24,530 --> 00:09:25,090
OK.

126
00:09:25,280 --> 00:09:29,020
Now think about this the starting frame is at the very bottom of the screen.

127
00:09:29,110 --> 00:09:30,490
The Neith everything.

128
00:09:30,950 --> 00:09:36,680
So what we want to do is we want to subtract that from the ending frame standing frame is here.

129
00:09:36,740 --> 00:09:37,820
We want to subtract that.

130
00:09:37,820 --> 00:09:42,310
So we know how much it actually moves up on the y axis.

131
00:09:42,440 --> 00:09:46,040
And now this value is a singular number.

132
00:09:46,040 --> 00:09:49,100
We can use that to move whatever object up.

133
00:09:49,100 --> 00:09:50,630
So that's really really cool.

134
00:09:50,750 --> 00:09:52,160
Let's animate it now.

135
00:09:52,230 --> 00:09:56,630
So when we call bind to keyboard it's going to call this keyboard will change function.

136
00:09:56,690 --> 00:09:58,660
It's going to capture all the important values.

137
00:09:58,730 --> 00:10:00,050
Then we're going to type you.

138
00:10:00,070 --> 00:10:03,000
View animate keyframes.

139
00:10:03,160 --> 00:10:03,850
OK.

140
00:10:04,250 --> 00:10:06,100
Now of course it asks for a duration.

141
00:10:06,170 --> 00:10:08,140
So we're going to give it a duration.

142
00:10:08,270 --> 00:10:12,030
The one that we captured from our notification we don't want to delay.

143
00:10:12,110 --> 00:10:18,490
So we're going to give it zero point zero options right here is UI keyframe animation options.

144
00:10:18,500 --> 00:10:19,490
Now check it out.

145
00:10:19,610 --> 00:10:22,360
If I press Enter then put a parentheses.

146
00:10:22,490 --> 00:10:25,260
It will basically ask for.

147
00:10:25,760 --> 00:10:27,440
Well let's do it.

148
00:10:27,480 --> 00:10:27,710
OK.

149
00:10:27,710 --> 00:10:30,110
And it's going to ask for a raw value.

150
00:10:30,290 --> 00:10:33,140
And look what type it's asking for are you in it.

151
00:10:33,170 --> 00:10:34,840
That's why we cast this as a unit.

152
00:10:34,850 --> 00:10:35,250
OK.

153
00:10:35,300 --> 00:10:40,830
It's an unsigned integer and that's just what you like you keyframe animation options asks for.

154
00:10:40,850 --> 00:10:42,740
So we're going to pass in the curve.

155
00:10:43,130 --> 00:10:44,030
Now the animations.

156
00:10:44,030 --> 00:10:50,300
This is where we're actually going to animate the view that is bound to the keyboard and the completion.

157
00:10:50,300 --> 00:10:51,070
We don't care about.

158
00:10:51,160 --> 00:10:53,390
OK so we're just going to put nil for that.

159
00:10:53,390 --> 00:10:57,360
But in this animate keyframes Here's what we're going to do.

160
00:10:57,380 --> 00:11:04,010
We're going to capture self meaning whatever you view or something that inherits from you view whatever

161
00:11:04,010 --> 00:11:10,820
it is we're going to take the frame of that object we're going to take the origin meaning the top most

162
00:11:10,880 --> 00:11:12,800
Y point on the y axis.

163
00:11:13,130 --> 00:11:14,670
Sorry origin dot Y.

164
00:11:14,900 --> 00:11:19,660
And we're going to go ahead and we're going to add Delta y to that.

165
00:11:19,700 --> 00:11:22,400
So let's say the keyboard is 300 pixels tall.

166
00:11:22,400 --> 00:11:25,850
We know when it goes up it's going to go up 300 pixels.

167
00:11:25,850 --> 00:11:30,100
What we're saying is we're never let's say this was a UI button.

168
00:11:30,110 --> 00:11:36,140
If we are going to take the origin y point where ever it is we want to add how much the keyboard will

169
00:11:36,140 --> 00:11:36,880
change it.

170
00:11:37,100 --> 00:11:38,970
And we want to animate it the same exact way.

171
00:11:38,960 --> 00:11:42,760
So we're basically just adding how high the keyboard is going to move.

172
00:11:42,980 --> 00:11:48,610
And removing our object up just that much with a keyframe animation super super cool.

173
00:11:48,680 --> 00:11:52,000
This is it guys this is all we need to do to bind object to the keyboard.

174
00:11:52,040 --> 00:11:54,710
So let's go ahead before we test it out.

175
00:11:54,740 --> 00:11:58,720
Let's go ahead and build our button extension so we can try it.

176
00:11:58,910 --> 00:12:01,250
We can try both on the same view controller.

177
00:12:01,260 --> 00:12:09,330
So right click on extensions click new file swift file and we're going to call this UI button.

178
00:12:09,330 --> 00:12:12,720
XTi and press create.

179
00:12:12,720 --> 00:12:14,430
All right now this one is pretty easy.

180
00:12:14,450 --> 00:12:17,880
But of course since we're using UI kit elements we need to import.

181
00:12:17,930 --> 00:12:23,160
You like it then we're going to call extension UI button.

182
00:12:23,600 --> 00:12:24,160
OK.

183
00:12:24,650 --> 00:12:26,100
Now we're going to write two functions.

184
00:12:26,120 --> 00:12:31,270
One is set selected color one is set de-selected color.

185
00:12:31,340 --> 00:12:34,760
So when we tap on one we want the other to show up as de-selected.

186
00:12:34,760 --> 00:12:42,840
So go ahead and type phunk set selected color and below that call phunk set.

187
00:12:42,860 --> 00:12:46,240
De-selected color.

188
00:12:46,880 --> 00:12:51,080
And inside this we're just going to change one property self.

189
00:12:51,230 --> 00:12:52,630
Background color.

190
00:12:53,150 --> 00:12:54,620
And we're going to use a color literal.

191
00:12:54,620 --> 00:12:56,400
It's that easy.

192
00:12:56,870 --> 00:12:59,900
Then in set de-selected color we're going to call the same thing.

193
00:12:59,900 --> 00:13:01,790
So I'm just going to copy and paste it.

194
00:13:01,940 --> 00:13:04,700
And now we can actually choose our de-selected color.

195
00:13:04,700 --> 00:13:08,270
So if it's selected it's our normal bright green.

196
00:13:08,450 --> 00:13:13,840
If it's de-selected It's our light green kind of like like a mint green color.

197
00:13:13,960 --> 00:13:14,640
Supercool.

198
00:13:14,720 --> 00:13:15,630
That's all it takes.

199
00:13:15,650 --> 00:13:21,180
Seriously guys so go to create gold Visi because that's where we're going to start using these.

200
00:13:21,440 --> 00:13:26,580
And now are you I'd view extension we can actually call on our next button.

201
00:13:26,810 --> 00:13:28,580
Think about in our view controller.

202
00:13:28,670 --> 00:13:34,280
This next button when we tap on the text view we want this next button to move with the keyboard.

203
00:13:34,340 --> 00:13:34,580
Right.

204
00:13:34,580 --> 00:13:36,140
We don't want it to be hidden by the keyboard.

205
00:13:36,140 --> 00:13:42,980
So let's go into Create Goals Visi and what we can do is from view the load we can call next button

206
00:13:43,520 --> 00:13:45,150
bind to keyboard.

207
00:13:45,440 --> 00:13:50,240
When the view loads it's going to bind that to the keyboard and whenever we open up something that moves

208
00:13:50,240 --> 00:13:52,890
the keyboard the button will move with it.

209
00:13:52,910 --> 00:13:54,140
It's that easy.

210
00:13:54,620 --> 00:13:59,560
OK so now that we have that done we're going to go ahead and set up the buttons.

211
00:13:59,720 --> 00:14:03,610
Now we already have them set up here short term and long term.

212
00:14:03,800 --> 00:14:07,070
And we already have short term starting as selected.

213
00:14:07,340 --> 00:14:10,070
But that's just the button that's just what it looks like.

214
00:14:10,100 --> 00:14:15,710
We need to actually set a property in our class and we need to set it to be equal to short term from

215
00:14:15,710 --> 00:14:20,330
the get go and then what we're going to do is we're going to change that depending on if the button

216
00:14:20,330 --> 00:14:20,780
is pressed.

217
00:14:20,780 --> 00:14:24,350
Because sometimes you might open it and you might want it to be short term from the beginning.

218
00:14:24,350 --> 00:14:30,950
So we should set that value from the beginning go back and create goal Visi and beneath the Iby outlets

219
00:14:30,950 --> 00:14:36,670
we're going to create a variable called Goal type and it's going to be of type girl type.

220
00:14:36,850 --> 00:14:37,510
OK.

221
00:14:37,910 --> 00:14:40,560
Now we're going to set it to be equal to dot.

222
00:14:40,580 --> 00:14:44,580
Short term from the get go already.

223
00:14:44,600 --> 00:14:50,160
Now this is here we've instantiated it and we have set it to be equal to short term from the beginning.

224
00:14:50,630 --> 00:14:55,880
What we're going to do is we're going to actually set our colors in code.

225
00:14:55,880 --> 00:14:58,480
Now we have them set in the interface builder.

226
00:14:58,610 --> 00:15:02,600
But what we're going to do is we're going to set them in code just to make sure that everything is good

227
00:15:02,600 --> 00:15:03,280
to go.

228
00:15:03,560 --> 00:15:07,460
So when the view loads we need to think what color do we want.

229
00:15:07,460 --> 00:15:17,720
The short term button to be well if we want it to be defaulting as selected we should call our set selected

230
00:15:17,720 --> 00:15:18,660
color function.

231
00:15:18,740 --> 00:15:26,690
So let's do that short term button set selected color our long term button we should set set de-selected

232
00:15:26,690 --> 00:15:27,920
color.

233
00:15:28,010 --> 00:15:30,470
Now when short term button is pressed.

234
00:15:30,560 --> 00:15:31,650
Here's what we're going to do.

235
00:15:31,910 --> 00:15:38,460
We're going to set gold type variable to be equal to short term.

236
00:15:38,510 --> 00:15:43,940
We're also going to go ahead and type a short term dot set selected color because what if we selected

237
00:15:43,940 --> 00:15:50,690
long term then it would be de-selected if we selected again we should set the selected color right when

238
00:15:50,690 --> 00:15:52,740
we select the short term button.

239
00:15:52,820 --> 00:15:56,270
We should make the long term button be set de-selected.

240
00:15:56,340 --> 00:15:59,550
OK so it's that like light mint green color.

241
00:15:59,570 --> 00:16:04,760
Now we're going to go ahead and do the same thing but with long term buttons so let's go ahead and when

242
00:16:04,760 --> 00:16:11,180
we tap the long term button that means that we want gold type to be equal to long term.

243
00:16:11,180 --> 00:16:16,880
And if we tap on the long term button that means we want long term button to have the selected color

244
00:16:17,450 --> 00:16:22,150
we want the short term button to have the set de-selected color.

245
00:16:22,670 --> 00:16:25,330
And you know what guys this should work.

246
00:16:25,340 --> 00:16:26,440
Let's go give it a try.

247
00:16:26,450 --> 00:16:32,660
Just so you know when you create an extension of UI button anything that is a UI button can access these

248
00:16:32,660 --> 00:16:34,530
functions you view.

249
00:16:34,580 --> 00:16:40,130
The reason that it works on our button is because if you go deep down you I view you I button you I

250
00:16:40,130 --> 00:16:40,850
text field.

251
00:16:40,850 --> 00:16:44,750
I label all of those at their core inherit from you I view.

252
00:16:44,770 --> 00:16:47,790
So we can use bind to keyboard on anything.

253
00:16:47,840 --> 00:16:48,680
Let's give it a try.

254
00:16:48,680 --> 00:16:49,820
Let's build and run.

255
00:16:49,820 --> 00:16:53,320
Let's see if our next button binds to the keyboard.

256
00:16:53,330 --> 00:16:58,010
Let's see if our buttons are set the appropriate color from the beginning and then we're going to go

257
00:16:58,010 --> 00:17:04,970
ahead and see if they change color appropriately as we tap on the buttons so Press new and let's make

258
00:17:04,970 --> 00:17:07,490
sure that our software keyboard is on.

259
00:17:07,670 --> 00:17:11,780
So when I tap this the button should slide up nicely.

260
00:17:12,080 --> 00:17:14,230
And you know what I think I have to go in and do that again.

261
00:17:14,240 --> 00:17:15,380
Let's toggle it.

262
00:17:15,650 --> 00:17:20,000
And do you see that the button loads perfectly it slides up with the keyboard.

263
00:17:20,000 --> 00:17:23,950
And that's really cool let's go ahead and toggle it again and it moves back down.

264
00:17:23,960 --> 00:17:25,040
That's amazing.

265
00:17:25,070 --> 00:17:26,190
Super super cool.

266
00:17:26,240 --> 00:17:27,080
OK great.

267
00:17:27,080 --> 00:17:28,690
Now let's test our buttons if I tap.

268
00:17:28,700 --> 00:17:33,980
Longterm it should set the selected color and flip the short term button to be selected.

269
00:17:34,490 --> 00:17:36,800
So cool look at that it works.

270
00:17:36,800 --> 00:17:39,410
So if I tap one it sets the color.

271
00:17:39,410 --> 00:17:45,170
It's also setting the goal type and we'll pass that in as we instantiate our next view controller and

272
00:17:45,170 --> 00:17:50,930
move on to add the number of points required in order to achieve our goal.

273
00:17:50,930 --> 00:17:54,920
So supercool guys we have now bound our button to the keyboard.

274
00:17:54,920 --> 00:17:59,080
We have set up our buttons here to change color and set the goal type.

275
00:17:59,090 --> 00:18:00,970
We're going to move on this is amazing.

276
00:18:01,010 --> 00:18:06,080
We're going to build out the finish goal VC in the next video where you set the number of points and

277
00:18:06,080 --> 00:18:12,050
we're going to pass that data from this view controller into finished goal Visi so that we can save

278
00:18:12,050 --> 00:18:16,250
our goal and start showing them in our table view using core data.

279
00:18:16,250 --> 00:18:17,340
So so cool.

280
00:18:17,360 --> 00:18:18,290
Amazing work guys.

281
00:18:18,290 --> 00:18:21,030
Let's head over to the next video and let's get started.