1
00:00:08,100 --> 00:00:13,230
Hey guys this is Caleb with slopes dot.com and in this video we're going to go ahead and build out group

2
00:00:13,230 --> 00:00:18,450
feed the sea which is going to basically be the group chat room for the groups that you've created.

3
00:00:18,450 --> 00:00:19,360
It's really cool.

4
00:00:19,380 --> 00:00:22,060
And let's go ahead and let's build it out now.

5
00:00:22,800 --> 00:00:27,830
Open up your code project like I just did an open main storyboard.

6
00:00:28,020 --> 00:00:33,360
We're going to need to drag on a view controller just like this and I'm going to just put it near my

7
00:00:33,360 --> 00:00:39,100
group's feces because we have a VC here used for creating a group.

8
00:00:39,120 --> 00:00:43,150
This one is also going to be used for the same kind of thing.

9
00:00:43,260 --> 00:00:48,330
But what we're going to do is we're going to actually start by copying this top bar and pasting it in

10
00:00:48,330 --> 00:00:52,350
just so we have the same constraints and the same height and the same font.

11
00:00:52,350 --> 00:00:56,720
Everything is just kind of done for us but we need to pin this in place.

12
00:00:56,760 --> 00:00:59,730
So let's go ahead and pin it to the left top and right.

13
00:00:59,910 --> 00:01:06,810
And for some reason it maintains its height constraints so we don't need to do that and add those constraints.

14
00:01:06,810 --> 00:01:14,140
And now I'm going to get rid of the done button and I'm going to change the X button to instead be the

15
00:01:14,880 --> 00:01:18,740
let's see what is it maybe the back button back icon OK.

16
00:01:19,110 --> 00:01:23,320
And basically this looks like a UI navigation controller.

17
00:01:23,500 --> 00:01:23,740
OK.

18
00:01:23,740 --> 00:01:26,850
Because it has a top bar here it has a title and it has buttons.

19
00:01:26,850 --> 00:01:32,040
And if we select a group I want this view controller to slide over from the left and then we should

20
00:01:32,040 --> 00:01:36,610
be able to tap the back button to slide back over to the group's AVC.

21
00:01:36,760 --> 00:01:39,630
Now newgroup doesn't make sense for this one.

22
00:01:39,630 --> 00:01:41,780
It's instead going to show the group title.

23
00:01:41,940 --> 00:01:42,540
OK.

24
00:01:42,750 --> 00:01:46,800
So if this is the slopes group it's going to show up slopes if it's the Nerd Herd group it is going

25
00:01:46,800 --> 00:01:52,200
to say nerd herd but you'll probably notice it's not quite wide enough so let's change the width constraint

26
00:01:52,200 --> 00:01:54,070
to maybe 200.

27
00:01:54,300 --> 00:01:57,390
That way even if it's a really long title it'll still fit.

28
00:01:57,420 --> 00:01:58,420
That's pretty cool.

29
00:01:58,710 --> 00:02:00,330
So now that looks great.

30
00:02:00,330 --> 00:02:04,770
Let's make sure there are no lingering constraints here on any of the buttons because we are using them

31
00:02:04,770 --> 00:02:09,160
and as you can see it's still connected to create groups Visi we don't want that.

32
00:02:09,240 --> 00:02:11,640
I don't believe that I put any on the label.

33
00:02:11,640 --> 00:02:12,930
No I did not.

34
00:02:12,930 --> 00:02:13,530
All right.

35
00:02:13,560 --> 00:02:15,630
Very very cool.

36
00:02:15,630 --> 00:02:20,310
Next we're going to go ahead and we're going to actually just copy the table view from here because

37
00:02:20,310 --> 00:02:23,870
our cells are going to look exactly the same as the feed messages.

38
00:02:23,870 --> 00:02:30,000
So copy this and we're going to go ahead and select group title and we're going to paste it and just

39
00:02:30,000 --> 00:02:36,500
drag it in place beautiful and drag it up here it's going to snap 8 from the top.

40
00:02:36,540 --> 00:02:43,110
Go ahead and it 0 from all sides you're going to manually enter 0 there and add four constraints.

41
00:02:43,110 --> 00:02:46,450
Now here's where we're going to have to really be careful that's right click.

42
00:02:46,500 --> 00:02:46,980
OK good.

43
00:02:46,980 --> 00:02:48,810
No outlet's we're stuck.

44
00:02:48,810 --> 00:02:50,330
Our cell has a lot.

45
00:02:50,340 --> 00:02:53,420
So get rid of these because we're going to set those up later.

46
00:02:54,030 --> 00:03:00,190
The cell itself is also set with a certain identity and we actually need to pull open our document outline

47
00:03:00,200 --> 00:03:00,720
here.

48
00:03:00,870 --> 00:03:02,490
Select feed cell.

49
00:03:02,490 --> 00:03:06,420
And this is actually going to be called Group feed cell.

50
00:03:06,420 --> 00:03:10,210
And this is not a feed cell it does not have a class yet because we need to make one.

51
00:03:10,230 --> 00:03:19,750
So go ahead and right click on view and create a new file Cocco touch class table view cell.

52
00:03:19,770 --> 00:03:22,700
And this is going to be a group feed cell.

53
00:03:23,020 --> 00:03:23,680
OK.

54
00:03:23,970 --> 00:03:29,990
It's basically going to be the same as a feed cell but it's going to be specific to a group.

55
00:03:30,000 --> 00:03:32,220
So go ahead and click Create.

56
00:03:32,220 --> 00:03:37,410
Now we can get rid of all of this because we don't need it but we do have three things that we do need

57
00:03:37,710 --> 00:03:39,200
and we're going to go at those now.

58
00:03:39,330 --> 00:03:44,920
So open the story board and as soon as that loads we're going to open the assistant editor.

59
00:03:45,060 --> 00:03:45,310
OK.

60
00:03:45,340 --> 00:03:49,850
Like so give it a second to load.

61
00:03:50,090 --> 00:03:59,120
And now we can go in to automatic wups select select our controller first select our cell and then we

62
00:03:59,120 --> 00:04:06,810
should be able to access it although it's giving us some trouble let's try closing it and opening it

63
00:04:06,810 --> 00:04:07,530
again.

64
00:04:09,490 --> 00:04:11,050
It's going to take its time though.

65
00:04:11,380 --> 00:04:14,200
Lovely spinning beach ball of death.

66
00:04:14,430 --> 00:04:15,340
Gotta love it.

67
00:04:19,130 --> 00:04:24,170
This is why a lot of people prefer to use Zeb's instead of interface builder because it can be very

68
00:04:24,170 --> 00:04:25,720
very resource intensive.

69
00:04:25,970 --> 00:04:26,270
OK.

70
00:04:26,270 --> 00:04:27,580
So let's try that again.

71
00:04:27,590 --> 00:04:29,420
Looks like it's still giving us trouble.

72
00:04:29,420 --> 00:04:36,050
So you know what let's go ahead let's close X code and I'm going to open the project again.

73
00:04:37,230 --> 00:04:38,640
Well it's even slow in closing.

74
00:04:38,640 --> 00:04:38,880
OK.

75
00:04:38,910 --> 00:04:39,290
Here we go.

76
00:04:39,300 --> 00:04:41,730
Open recent break point.

77
00:04:41,790 --> 00:04:42,560
Let's give it a shot.

78
00:04:42,570 --> 00:04:45,260
Let's see if that fixed our issue.

79
00:04:45,330 --> 00:04:46,580
Hopefully it did.

80
00:04:47,010 --> 00:04:51,540
Select group title or so I select the new Wii U controller.

81
00:04:51,870 --> 00:04:52,950
Oh you know what guys.

82
00:04:52,950 --> 00:04:54,150
No wonder it's not showing up.

83
00:04:54,150 --> 00:04:56,610
We didn't create a controller file for it yet.

84
00:04:56,610 --> 00:05:02,430
So right click on controllers click new file Cocco touch class UI view controller is going to be the

85
00:05:02,430 --> 00:05:07,710
subclass and we'll call this group feed Visi create that.

86
00:05:08,040 --> 00:05:11,780
And now we're going to set that as the identity in main storyboard.

87
00:05:14,400 --> 00:05:14,670
All right.

88
00:05:14,670 --> 00:05:17,720
So select your view controller in the identity inspector.

89
00:05:17,730 --> 00:05:19,950
Go ahead and call it group feed visi.

90
00:05:20,130 --> 00:05:26,280
Now it will show up finally and since we have done that we can actually go ahead and go through the

91
00:05:26,280 --> 00:05:28,130
whole feed we see here.

92
00:05:28,140 --> 00:05:32,580
We can see everything that's lovely but we need to be able to go through the whole project and it's

93
00:05:32,580 --> 00:05:33,970
still giving us some trouble.

94
00:05:34,140 --> 00:05:35,250
So let's build it.

95
00:05:35,490 --> 00:05:37,170
Let's see if that fixes anything.

96
00:05:38,170 --> 00:05:41,460
Helps us to understand that everything is good to go.

97
00:05:41,660 --> 00:05:42,950
OK that looks good.

98
00:05:42,970 --> 00:05:43,630
Still not.

99
00:05:43,630 --> 00:05:49,760
So we're going to go off and come back in and we're going to close and reopen our assistant editor as

100
00:05:49,760 --> 00:05:52,790
soon as the beach ball is done spinning around.

101
00:05:52,790 --> 00:05:53,500
There we go.

102
00:05:54,810 --> 00:05:55,310
Maybe not

103
00:05:57,990 --> 00:06:01,220
starting to consider giving up the interface builder now.

104
00:06:01,470 --> 00:06:04,180
Come on you can do it.

105
00:06:04,340 --> 00:06:05,220
I believe in you.

106
00:06:05,240 --> 00:06:06,300
You can do it.

107
00:06:06,800 --> 00:06:07,440
OK.

108
00:06:07,820 --> 00:06:08,480
That looks good.

109
00:06:08,480 --> 00:06:11,220
Looks like we're actually properly accessing the folders now.

110
00:06:11,330 --> 00:06:14,150
So as soon as this decides to play nicely.

111
00:06:14,180 --> 00:06:15,850
That's pretty.

112
00:06:15,860 --> 00:06:17,290
We'll go ahead and set this up.

113
00:06:17,300 --> 00:06:17,780
All right.

114
00:06:17,780 --> 00:06:24,380
So select the cell group feed cell as we've called it and we're going to go into break point view and

115
00:06:24,380 --> 00:06:26,270
select group feed cell.

116
00:06:26,270 --> 00:06:26,920
OK.

117
00:06:27,170 --> 00:06:31,460
So before we do anything we're going to actually select our cell and we're going to give it an identity

118
00:06:31,460 --> 00:06:39,440
of group a group feed cell so that now we can actually properly interface with our subclass here.

119
00:06:39,440 --> 00:06:44,390
So go ahead and I'm going to select the image view you going to right click and drag and I'm going to

120
00:06:44,390 --> 00:06:49,510
go ahead and just call this profile image then we can't see them.

121
00:06:49,550 --> 00:06:50,320
Now we can.

122
00:06:50,330 --> 00:06:50,560
All right.

123
00:06:50,570 --> 00:06:52,220
So I'm going to right click and drag from the label.

124
00:06:52,250 --> 00:06:59,690
We'll call this e-mail label and I'm going to right click from the message content and call this content

125
00:06:59,690 --> 00:07:02,570
label nice.

126
00:07:02,570 --> 00:07:04,170
OK so everything is there.

127
00:07:04,220 --> 00:07:08,540
Now we just need to make a function to configure it set up all of the data we pass in.

128
00:07:08,540 --> 00:07:19,910
So type phunk configure cell and we need to pass in a profile image of Type II image we need to pass

129
00:07:19,910 --> 00:07:24,960
in an e-mail of type string and content of type string.

130
00:07:24,980 --> 00:07:26,770
That's what every cell needs.

131
00:07:26,780 --> 00:07:30,400
Now of course string needs to be with are I not I our.

132
00:07:30,660 --> 00:07:33,640
And now let's set self-taught profile image.

133
00:07:33,740 --> 00:07:41,660
Image is equal to profile image that we pass in self dot email label dot text is equal to the email

134
00:07:41,780 --> 00:07:45,520
that we pass in lips not the icon.

135
00:07:45,590 --> 00:07:46,800
There we go.

136
00:07:47,120 --> 00:07:54,500
And self dot content label text is going to be equal to the content we pass in super easy.

137
00:07:54,500 --> 00:07:55,320
Very cool.

138
00:07:55,340 --> 00:07:56,940
That looks exactly right.

139
00:07:57,090 --> 00:07:58,810
Although you know what we did it again.

140
00:07:58,820 --> 00:07:59,940
Email label.

141
00:07:59,990 --> 00:08:02,120
We accidentally sent it back to you.

142
00:08:02,120 --> 00:08:03,680
That is not correct.

143
00:08:03,710 --> 00:08:04,460
Choose the stack.

144
00:08:04,480 --> 00:08:10,840
You remove the referencing outlet and we're going to actually reconnect this.

145
00:08:11,690 --> 00:08:17,720
Oh sorry we need to call it a label first and then we should be able to drag and release it on the e-mail

146
00:08:17,720 --> 00:08:18,680
label.

147
00:08:18,680 --> 00:08:19,630
That is way better.

148
00:08:19,640 --> 00:08:23,630
OK so Group B group feed cell is now ready to go.

149
00:08:23,660 --> 00:08:26,740
We just need to think about what do we need to do next.

150
00:08:26,810 --> 00:08:29,640
We have properly setup everything for the cell.

151
00:08:29,750 --> 00:08:32,380
But we have not yet set up anything for this view controller.

152
00:08:32,390 --> 00:08:40,520
So click the controller then go to automatic and load up group VBC remove the boilerplate code that

153
00:08:40,520 --> 00:08:41,480
looks great.

154
00:08:41,630 --> 00:08:44,870
And now we need to basically set up our table view here.

155
00:08:44,990 --> 00:08:53,580
So right click and create an outlet for it Table View awesome It looks great and get rid of this comment

156
00:08:53,760 --> 00:08:56,490
and what else should we do here.

157
00:08:56,490 --> 00:08:57,680
Our table view is set.

158
00:08:57,690 --> 00:09:01,050
We should create an action for our button here.

159
00:09:01,050 --> 00:09:04,800
So let's go ahead and I just chose from here because it's pretty small.

160
00:09:04,800 --> 00:09:10,070
Create an action and call this back button was pressed.

161
00:09:10,100 --> 00:09:11,560
K that's cool.

162
00:09:11,600 --> 00:09:13,400
And for back button was pressed.

163
00:09:13,400 --> 00:09:16,410
Let's just go ahead and dismiss for now.

164
00:09:16,520 --> 00:09:20,440
Now by the way we're going to be presenting this Motegi.

165
00:09:20,490 --> 00:09:23,760
It'll pop up over the screen but we don't want it to show.

166
00:09:23,780 --> 00:09:25,610
That way we want it to slide from left to right.

167
00:09:25,610 --> 00:09:29,960
We'll be doing a view controller extension in a video to come.

168
00:09:30,020 --> 00:09:34,190
That will make it make it look like it's loading like a UI navigation controller but it's really not.

169
00:09:34,190 --> 00:09:35,690
It's pretty cool.

170
00:09:35,720 --> 00:09:39,270
But for now we'll just go ahead and dismiss the view controller that's fine.

171
00:09:39,560 --> 00:09:40,930
What else do we need.

172
00:09:40,940 --> 00:09:41,770
We also need.

173
00:09:41,810 --> 00:09:48,980
Yes an outlet for the group title because that will change as we open the view controller so group title

174
00:09:49,250 --> 00:09:51,990
label looks good.

175
00:09:52,130 --> 00:09:54,250
And you know what I forgot something.

176
00:09:54,320 --> 00:09:59,810
We are basically missing some space here for you a label that's going to show all the users who are

177
00:09:59,810 --> 00:10:02,030
a part of this group that's not cool man.

178
00:10:02,090 --> 00:10:08,210
So let's go ahead and let's remove that top constraint and I'm going to go ahead and stretch this down

179
00:10:08,210 --> 00:10:09,320
a little bit.

180
00:10:09,830 --> 00:10:11,520
So we have some room.

181
00:10:11,720 --> 00:10:16,850
I'm going to go ahead and set the background color here to be light gray because that looks like there

182
00:10:16,850 --> 00:10:18,280
is no color.

183
00:10:18,710 --> 00:10:19,630
Let's see is that right.

184
00:10:19,670 --> 00:10:20,210
Yes.

185
00:10:20,210 --> 00:10:21,260
Very good.

186
00:10:21,260 --> 00:10:29,850
And now let's go ahead and just say UI label drag one on.

187
00:10:29,860 --> 00:10:30,710
There we go.

188
00:10:30,940 --> 00:10:32,800
And we're going to put it here.

189
00:10:33,010 --> 00:10:34,030
We're going to stretch it.

190
00:10:34,060 --> 00:10:35,980
The extent of the view controller.

191
00:10:36,250 --> 00:10:40,610
I'm going to pin it so that it stays there 0 from there.

192
00:10:40,630 --> 00:10:41,890
Eight from there zero from there.

193
00:10:41,890 --> 00:10:46,160
And we're going to do eight from the top of the table for you.

194
00:10:46,450 --> 00:10:48,200
OK go ahead and pin it there.

195
00:10:48,260 --> 00:10:49,520
And that looks awesome.

196
00:10:49,780 --> 00:10:56,210
Now we're going to go ahead and change the font like you may be expecting to Menlo.

197
00:10:56,620 --> 00:11:02,320
That's the font of choice for this app and I'm going to lower the font down to maybe 14.

198
00:11:02,700 --> 00:11:04,150
Try 14 out.

199
00:11:04,240 --> 00:11:05,830
That looks pretty good.

200
00:11:05,830 --> 00:11:06,610
Cool cool.

201
00:11:06,610 --> 00:11:07,780
So that looks good.

202
00:11:07,780 --> 00:11:18,380
Let's change it to green excellent and let's go ahead and just say user at breakpoint dot com.

203
00:11:19,210 --> 00:11:23,290
Joe Schmo at break point.

204
00:11:23,800 --> 00:11:25,720
Let's just say this is a group with two users.

205
00:11:25,720 --> 00:11:29,700
But as you can tell as I add in users we already run out of space.

206
00:11:29,710 --> 00:11:35,980
So let's set minimum font size so that it can scale well depending on how many users are in the group.

207
00:11:35,980 --> 00:11:37,980
Very cool so now I have a label there.

208
00:11:37,990 --> 00:11:40,590
But in order to do anything with it I need an outlet.

209
00:11:40,750 --> 00:11:47,350
So let's just call this members label and what else do I need do I need anything else.

210
00:11:48,650 --> 00:11:49,490
Yes of course I do.

211
00:11:49,490 --> 00:11:51,260
Guys I almost forgot the most important part.

212
00:11:51,260 --> 00:11:56,030
How are we supposed to send messages if we don't have a text field to send messages and a send button.

213
00:11:56,150 --> 00:11:57,860
That is a major oversight.

214
00:11:57,860 --> 00:11:59,540
So let's add that now.

215
00:11:59,780 --> 00:12:04,670
And to do that we're basically just going to go ahead and we're going to drop in a view over the top

216
00:12:04,670 --> 00:12:05,700
of the table view.

217
00:12:05,780 --> 00:12:08,360
We're going to add in a text field and a button.

218
00:12:08,540 --> 00:12:09,680
It's going to be really easy.

219
00:12:09,680 --> 00:12:16,280
So go ahead and type you I view and we're going to pass it in right here on top of the table you might

220
00:12:16,280 --> 00:12:20,430
take a little while thanks to X code being Solu.

221
00:12:21,540 --> 00:12:28,970
It's going to try to pass it in here into the background but we just want it to basically you know what

222
00:12:29,630 --> 00:12:34,430
we're going to have to pull up our table view here to give us some space to access the background view

223
00:12:34,820 --> 00:12:39,710
because we don't want it to actually be a part of the background view we want it to go on this view

224
00:12:40,400 --> 00:12:43,220
on top of the table view that's perfect.

225
00:12:43,250 --> 00:12:48,570
Let's go ahead and reposition this.

226
00:12:48,580 --> 00:12:50,270
That's good.

227
00:12:50,380 --> 00:13:00,130
Let's pull it a little bit wider and let's lower it down to say let's say 60.

228
00:13:00,150 --> 00:13:00,750
Sweet.

229
00:13:00,750 --> 00:13:01,600
OK.

230
00:13:01,620 --> 00:13:06,990
So we're going to pin this to the bottom left and right and we're going to give it a fixed height of

231
00:13:06,990 --> 00:13:08,320
60.

232
00:13:08,400 --> 00:13:09,450
That looks great.

233
00:13:09,720 --> 00:13:16,440
And we're going to go ahead and we're going to pull this back down by clicking the update frame button.

234
00:13:16,620 --> 00:13:19,310
And of course it's not actually showing the update in frames.

235
00:13:19,320 --> 00:13:22,050
But if I were to go off and come back on I'm sure it would.

236
00:13:22,560 --> 00:13:27,670
But for now let's go ahead and let's set this up by giving it a background color.

237
00:13:27,720 --> 00:13:31,910
Let's set it to be the same as the background of the app.

238
00:13:31,920 --> 00:13:36,740
So it's that nice light gray color you although that is not the right light gray.

239
00:13:36,960 --> 00:13:37,850
Which one is it.

240
00:13:38,950 --> 00:13:41,280
That's the dark gray and we want it to be the light grey.

241
00:13:41,280 --> 00:13:42,850
So I think it's this one.

242
00:13:43,440 --> 00:13:44,460
Oh no that's the dark grey.

243
00:13:44,460 --> 00:13:47,880
Sorry it's hard to tell when you compare it to a very light grey.

244
00:13:47,880 --> 00:13:48,420
OK.

245
00:13:48,720 --> 00:13:51,320
That looks pretty good.

246
00:13:51,360 --> 00:13:54,600
That now matches the background of our table view that's cool.

247
00:13:54,640 --> 00:14:01,080
And now we need to drop in a UI textfield which is where we're going to type our messages.

248
00:14:02,070 --> 00:14:05,050
So draw draw drop that on as soon as you can.

249
00:14:05,610 --> 00:14:13,170
And we're going to drag that to be a little bit longer then we're going to drop on a button like so

250
00:14:14,210 --> 00:14:15,780
and that's going to be our Send button.

251
00:14:16,910 --> 00:14:20,870
So go ahead and add that there and let's get rid of the button text.

252
00:14:20,870 --> 00:14:22,160
We don't need that.

253
00:14:22,160 --> 00:14:27,760
We just have an image already added in for us called Send can that looks really cool.

254
00:14:27,830 --> 00:14:33,140
So our textfield we're going to use inset textfield like we've been using so we should change the font

255
00:14:33,140 --> 00:14:34,220
to green.

256
00:14:34,520 --> 00:14:42,430
We should change the system to custom and this should be Menlo and we want it to be a little smaller

257
00:14:42,440 --> 00:14:44,230
so let's set it to be 14.

258
00:14:44,240 --> 00:14:46,290
That's a good font size for this textfield.

259
00:14:46,580 --> 00:14:53,030
Now if you remember the border style is rectangular and the textfield background itself is the dark

260
00:14:53,090 --> 00:14:53,630
gray.

261
00:14:53,630 --> 00:14:57,050
So let's set that to dark gray.

262
00:14:57,050 --> 00:14:58,170
There we go.

263
00:14:58,190 --> 00:14:58,970
Very good.

264
00:14:58,980 --> 00:14:59,980
So yeah.

265
00:14:59,990 --> 00:15:06,380
The only thing we need to change we need to give it a placeholder that just says send.

266
00:15:06,410 --> 00:15:07,640
Well maybe I'll do lowercase.

267
00:15:07,640 --> 00:15:14,270
Send a message dot dot dot and let's change this to be an inset textfield remember we created that at

268
00:15:14,270 --> 00:15:18,800
the beginning of this course and it's basically a custom subclassed that's going to allow us to look

269
00:15:18,800 --> 00:15:24,700
really cool and have a nice white placeholder and it's going to turn into a nice green one.

270
00:15:24,770 --> 00:15:25,130
Cool.

271
00:15:25,130 --> 00:15:26,140
So this looks great.

272
00:15:26,270 --> 00:15:31,820
Let's go ahead and set this so that it's right where it should be.

273
00:15:31,880 --> 00:15:33,810
I don't really like it there.

274
00:15:35,410 --> 00:15:35,810
OK.

275
00:15:35,850 --> 00:15:36,490
That looks great.

276
00:15:36,510 --> 00:15:38,300
Let's pin this where it should be.

277
00:15:38,430 --> 00:15:41,600
15 from the top 15 from the bottom.

278
00:15:41,610 --> 00:15:46,680
Let's also do 15 from the left and let's do 8 from the right to the button.

279
00:15:47,310 --> 00:15:48,070
That looks good.

280
00:15:48,090 --> 00:15:54,240
And now we're going to pin the button 15 from the top 15 from the bottom and 15 from the right.

281
00:15:54,240 --> 00:15:56,600
It's already pinned to our text view.

282
00:15:56,940 --> 00:16:03,190
And you know what let's give it a fixed width and height of 13:30 and add five constraints.

283
00:16:03,280 --> 00:16:04,930
Really cool so that's in place.

284
00:16:04,930 --> 00:16:06,000
That's good to go.

285
00:16:06,210 --> 00:16:07,170
Now let's go ahead.

286
00:16:07,170 --> 00:16:12,390
We're going to basically keep everything inside this view and we're going to slide it up as our keyboard

287
00:16:12,390 --> 00:16:13,090
goes up.

288
00:16:13,290 --> 00:16:21,390
So let's go ahead and right click and let's create an outlet called Send button view then let's create

289
00:16:21,390 --> 00:16:24,460
an outlet for the text field itself.

290
00:16:24,600 --> 00:16:26,410
Message textfield.

291
00:16:27,510 --> 00:16:33,090
Then let's create an action or an outlet for the button because we're going to disable it when we send

292
00:16:33,090 --> 00:16:37,120
it until it's sent send button looks good.

293
00:16:37,350 --> 00:16:40,390
And of course for the send button we're going to need an action.

294
00:16:40,420 --> 00:16:49,060
So go ahead and let's create that send button was pressed OK let's create some space here.

295
00:16:49,240 --> 00:16:49,520
OK.

296
00:16:49,520 --> 00:16:50,720
Really really really cool guys.

297
00:16:50,720 --> 00:16:52,290
We have a view.

298
00:16:52,610 --> 00:16:55,520
We have a textfield and we have a send button now.

299
00:16:55,540 --> 00:16:59,510
We should do is to make sure that the send button view is bound to the keyboard.

300
00:16:59,510 --> 00:17:02,550
So let's go ahead and call send button view.

301
00:17:02,990 --> 00:17:07,400
Bind to keyboard and that's going to use our awesome extension to bind this view to the keyboard so

302
00:17:07,400 --> 00:17:09,740
that it slides up as we want to type.

303
00:17:09,740 --> 00:17:11,140
Super super cool guys.

304
00:17:11,240 --> 00:17:12,540
So this is now built.

305
00:17:12,560 --> 00:17:14,120
We have group feed we.

306
00:17:14,210 --> 00:17:19,320
We actually set up our cell subclassed we set up how it looks we configured it.

307
00:17:19,370 --> 00:17:20,410
This is awesome guys.

308
00:17:20,570 --> 00:17:26,870
In the next video we're going to basically start setting up our cells so that when we select them it

309
00:17:26,870 --> 00:17:33,500
can present this view we can pass in the title the users and we can access all of our feed messages

310
00:17:33,770 --> 00:17:38,030
in the next video what we're going to do is we're going to set up our table view in groups AVC so that

311
00:17:38,030 --> 00:17:43,880
when we tap on a cell it's going to present this view controller load in the group title to the users

312
00:17:43,880 --> 00:17:45,470
and all of that good stuff.

313
00:17:45,470 --> 00:17:50,130
And we're going to do that in the next video so let's head over that way and let's do it now.