1 00:00:08,160 --> 00:00:13,290 Hey guys this is Caleb with slopes dotcom and in this video we're going to go ahead and build our group 2 00:00:13,290 --> 00:00:18,510 feed the sea which is going to basically be the group chat room for the groups that you've created. 3 00:00:18,510 --> 00:00:19,420 It's really cool. 4 00:00:19,440 --> 00:00:26,650 And let's go ahead and let's build it out now open up your code project like I just did an open main 5 00:00:26,790 --> 00:00:27,860 storyboard. 6 00:00:28,080 --> 00:00:33,420 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,420 --> 00:00:39,160 group's feces because we have a VC here used for creating a group. 8 00:00:39,180 --> 00:00:43,210 This one is also going to be used for the same kind of thing. 9 00:00:43,320 --> 00:00:48,390 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,390 --> 00:00:52,400 just so we have the same constraints and the same height and the same font. 11 00:00:52,400 --> 00:00:56,700 Everything is just kind of done for us but we need to pin this in place. 12 00:00:56,820 --> 00:00:59,790 So let's go ahead and pin it to the left top and right. 13 00:00:59,970 --> 00:01:05,790 And for some reason it maintains its height constraints so we don't need to do that couldn't add those 14 00:01:05,790 --> 00:01:06,690 constraints. 15 00:01:06,870 --> 00:01:14,170 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 16 00:01:14,940 --> 00:01:18,780 let's see what is it maybe the back button back icon OK. 17 00:01:19,170 --> 00:01:23,390 And basically this looks like a UI navigation controller. 18 00:01:23,590 --> 00:01:26,750 OK because it has a top bar here it has a title and it has buttons. 19 00:01:26,910 --> 00:01:32,100 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,100 --> 00:01:36,660 be able to tap the back button to slide back over to the group's AVC. 21 00:01:36,820 --> 00:01:39,690 Now newgroup doesn't make sense for this one. 22 00:01:39,690 --> 00:01:41,860 It's instead going to show the group title. 23 00:01:42,000 --> 00:01:42,530 OK. 24 00:01:42,810 --> 00:01:46,860 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,860 --> 00:01:52,230 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,260 --> 00:01:54,130 to maybe 200. 27 00:01:54,360 --> 00:01:57,450 That way even if it's a really long title it'll still fit. 28 00:01:57,480 --> 00:01:58,480 That's pretty cool. 29 00:01:58,770 --> 00:02:00,350 So now that that looks great. 30 00:02:00,360 --> 00:02:04,830 Let's make sure there are no lingering constraints here on any of the buttons because we are using them 31 00:02:04,830 --> 00:02:09,220 and as you can see it's still connected to create groups Visi we don't want that. 32 00:02:09,300 --> 00:02:11,700 I don't believe that I put any on the label. 33 00:02:11,700 --> 00:02:12,990 No I did not. 34 00:02:12,990 --> 00:02:13,620 All right. 35 00:02:13,620 --> 00:02:15,690 Very very cool. 36 00:02:15,690 --> 00:02:20,370 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,370 --> 00:02:23,940 our cells are going to look exactly the same as the feed messages. 38 00:02:23,940 --> 00:02:30,060 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,060 --> 00:02:31,800 drag it in place. 40 00:02:31,800 --> 00:02:36,560 Beautiful and drag it up here it's going to snap 8 from the top. 41 00:02:36,600 --> 00:02:43,170 Go ahead and Pinet 0 from all sides you're going to manually enter 0 there and add four constraints. 42 00:02:43,170 --> 00:02:46,460 Now here's where we're going to have to really be careful that's right click. 43 00:02:46,560 --> 00:02:47,040 OK good. 44 00:02:47,040 --> 00:02:48,860 No outlet's we're stuck. 45 00:02:48,870 --> 00:02:50,370 Our cell has a lot. 46 00:02:50,370 --> 00:02:53,480 So get rid of these because we're going to set those up later. 47 00:02:54,090 --> 00:03:00,250 The cell itself is also set with a certain identity and we actually need to pull open our document outline 48 00:03:00,270 --> 00:03:00,930 here. 49 00:03:00,930 --> 00:03:02,320 Select feed cell. 50 00:03:02,550 --> 00:03:05,890 And this is actually going to be called Group feed cell. 51 00:03:06,480 --> 00:03:10,280 And this is not a feed cell it does not have a class yet because we need to make one. 52 00:03:10,290 --> 00:03:19,680 So go ahead and right click on view and create a new file Cocco touch class table view cell. 53 00:03:19,830 --> 00:03:22,740 And this is going to be a group feed cell. 54 00:03:23,030 --> 00:03:23,740 OK. 55 00:03:24,030 --> 00:03:30,050 It's basically going to be the same as a feed cell but it's going to be specific to a group. 56 00:03:30,060 --> 00:03:32,280 So go ahead and click Create. 57 00:03:32,280 --> 00:03:37,590 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. 58 00:03:37,770 --> 00:03:39,230 And we're going to go at those now. 59 00:03:39,390 --> 00:03:45,930 So open the story board and as soon as that loads we're going to open the assistant editor OK like so 60 00:03:46,380 --> 00:03:49,920 give it a second to load. 61 00:03:50,150 --> 00:03:59,180 And now we can go in to automatic wups select select our controller first select our cell and then we 62 00:03:59,180 --> 00:04:06,810 should be able to access that although it's giving us some trouble let's try closing it and opening 63 00:04:06,810 --> 00:04:07,540 it again. 64 00:04:09,550 --> 00:04:11,070 It's going to take its time though. 65 00:04:11,410 --> 00:04:14,290 Lovely spinning beach ball of death. 66 00:04:14,470 --> 00:04:15,420 Gotta love it. 67 00:04:19,190 --> 00:04:24,230 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,230 --> 00:04:25,780 very resource intensive. 69 00:04:26,030 --> 00:04:26,330 OK. 70 00:04:26,330 --> 00:04:27,650 So let's try that again. 71 00:04:27,650 --> 00:04:29,480 Looks like it's still giving us trouble. 72 00:04:29,480 --> 00:04:36,120 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,290 --> 00:04:38,700 While it's even slow in closing. 74 00:04:38,700 --> 00:04:38,950 OK. 75 00:04:38,970 --> 00:04:39,350 Here we go. 76 00:04:39,360 --> 00:04:41,810 Open recent break point. 77 00:04:41,820 --> 00:04:42,620 Let's give it a shot. 78 00:04:42,630 --> 00:04:45,390 Let's see if that fixed our issue. 79 00:04:45,390 --> 00:04:46,700 Hopefully it did. 80 00:04:47,070 --> 00:04:51,600 Select group title or so I select the new Wii U controller. 81 00:04:51,930 --> 00:04:53,010 Oh you know what guys. 82 00:04:53,010 --> 00:04:54,210 No wonder it's not showing up. 83 00:04:54,210 --> 00:04:56,670 We didn't create a controller file for it yet. 84 00:04:56,670 --> 00:05:02,490 So right click on controllers click new file Cocco touch class UI view controller is going to be the 85 00:05:02,490 --> 00:05:07,780 subclass and we'll call this group feed Visi create that. 86 00:05:08,100 --> 00:05:11,840 And now we're going to set that as the identity in main storyboard. 87 00:05:14,450 --> 00:05:14,740 All right. 88 00:05:14,750 --> 00:05:17,770 So select your view controller and the identity inspector. 89 00:05:17,780 --> 00:05:20,030 Go ahead and call it group feed visi. 90 00:05:20,180 --> 00:05:26,330 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,330 --> 00:05:28,180 whole feed we see here. 92 00:05:28,190 --> 00:05:32,630 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,630 --> 00:05:34,190 still giving us some trouble. 94 00:05:34,190 --> 00:05:35,350 So let's build it. 95 00:05:35,540 --> 00:05:37,240 Let's see if that fixes anything. 96 00:05:38,230 --> 00:05:41,530 Helps us to understand that everything is good to go. 97 00:05:41,720 --> 00:05:43,020 OK that looks good. 98 00:05:43,030 --> 00:05:43,680 Still not. 99 00:05:43,690 --> 00:05:49,810 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,810 --> 00:05:52,820 soon as the beach ball is done spinning around. 101 00:05:52,840 --> 00:05:53,560 There we go. 102 00:05:54,870 --> 00:05:55,370 Maybe not 103 00:05:58,050 --> 00:06:01,300 starting to consider giving up the interface builder now. 104 00:06:01,530 --> 00:06:04,240 Come on you can do it. 105 00:06:04,400 --> 00:06:05,280 I believe in you. 106 00:06:05,300 --> 00:06:06,260 You can do it. 107 00:06:06,830 --> 00:06:07,530 OK. 108 00:06:07,880 --> 00:06:08,540 That looks good. 109 00:06:08,540 --> 00:06:11,280 Looks like we're actually properly accessing the folders now. 110 00:06:11,390 --> 00:06:14,210 So as soon as this decides to play nicely. 111 00:06:14,240 --> 00:06:15,920 That's pretty. 112 00:06:15,920 --> 00:06:17,350 We'll go ahead and set this up. 113 00:06:17,360 --> 00:06:17,830 All right. 114 00:06:17,840 --> 00:06:24,110 So select the cell group feed cell as we have called it and we're going to go into break point view 115 00:06:24,200 --> 00:06:26,320 and select group feed cell. 116 00:06:26,330 --> 00:06:27,000 OK. 117 00:06:27,230 --> 00:06:31,490 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,520 --> 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,500 --> 00:06:44,450 So go ahead and I'm going to select the image view I'm going to right click and drag and I'm going to 120 00:06:44,450 --> 00:06:49,560 go ahead and just call this profile image then we can't see them. 121 00:06:49,610 --> 00:06:50,390 Now we can. 122 00:06:50,390 --> 00:06:50,630 All right. 123 00:06:50,630 --> 00:06:52,280 So I'm going to right click and direct from the label. 124 00:06:52,310 --> 00:06:59,750 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,750 --> 00:07:02,090 label. 126 00:07:02,210 --> 00:07:02,630 Nice. 127 00:07:02,630 --> 00:07:04,240 OK so everything is there. 128 00:07:04,280 --> 00:07:08,600 Now we just need to make a function to configure it to set up all of the data we pass in. 129 00:07:08,600 --> 00:07:19,180 So type phunk configure cell and we need to pass in a profile image of Type II image. 130 00:07:19,370 --> 00:07:25,010 We need to pass in an e-mail of type string and content of type string. 131 00:07:25,040 --> 00:07:26,830 That's what every cell needs. 132 00:07:26,830 --> 00:07:30,440 Now of course string needs to be with are I not I our. 133 00:07:30,720 --> 00:07:33,670 And now let's set self-deceit profile image. 134 00:07:33,770 --> 00:07:41,720 Image is equal to profile image that we pass in self dot email label dot text is equal to the email 135 00:07:41,840 --> 00:07:43,450 that we pass in. 136 00:07:43,610 --> 00:07:45,590 Not the icon. 137 00:07:45,650 --> 00:07:46,870 There we go. 138 00:07:47,180 --> 00:07:54,560 And self dot content label dot text is going to be equal to the content we pass in super easy. 139 00:07:54,560 --> 00:07:55,370 Very cool. 140 00:07:55,370 --> 00:07:58,870 That looks exactly right although you know what we did it again. 141 00:07:58,880 --> 00:08:00,000 Email label. 142 00:08:00,050 --> 00:08:02,170 We accidentally sent it back to you. 143 00:08:02,180 --> 00:08:03,750 That is not correct. 144 00:08:03,770 --> 00:08:11,260 Choose the stack view remove the referencing outlet and we're going to actually reconnect this. 145 00:08:11,750 --> 00:08:17,780 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,780 --> 00:08:18,670 label. 147 00:08:18,740 --> 00:08:19,690 That is way better. 148 00:08:19,700 --> 00:08:20,120 OK. 149 00:08:20,180 --> 00:08:23,690 So Group B group feed cell is now ready to go. 150 00:08:23,720 --> 00:08:26,800 We just need to think about what do we need to do next. 151 00:08:26,870 --> 00:08:32,440 We have properly setup everything for the cell but we have not yet set up anything for this view controller. 152 00:08:32,450 --> 00:08:40,130 So click the view controller then go to Automattic and load up group VBC remove the boilerplate code. 153 00:08:40,430 --> 00:08:41,600 That looks great. 154 00:08:41,690 --> 00:08:44,930 And now we need to basically set up our table view here. 155 00:08:45,050 --> 00:08:49,140 So right click and create an outlet for it Table View. 156 00:08:50,090 --> 00:08:50,590 Awesome. 157 00:08:50,610 --> 00:08:51,510 It looks great. 158 00:08:51,920 --> 00:08:56,540 And get rid of this comment and what else should we do here. 159 00:08:56,540 --> 00:08:57,740 Our table view is set. 160 00:08:57,740 --> 00:09:01,020 We should create an IB action for our button here. 161 00:09:01,100 --> 00:09:04,850 So let's go ahead and I just chose from here because it's pretty small. 162 00:09:04,850 --> 00:09:10,050 Create an action and call this back button was pressed. 163 00:09:10,120 --> 00:09:11,620 Ok that's cool. 164 00:09:11,660 --> 00:09:13,460 And for back button was pressed. 165 00:09:13,460 --> 00:09:16,490 Let's just go ahead and dismiss for now. 166 00:09:16,580 --> 00:09:20,380 Now by the way we're going to be presenting this Motegi. 167 00:09:20,560 --> 00:09:23,810 It'll pop up over the screen but we don't want it to show. 168 00:09:23,810 --> 00:09:25,660 That way we want it to slide from left to right. 169 00:09:25,660 --> 00:09:30,080 We'll be doing a View Controller extension in a video to come. 170 00:09:30,080 --> 00:09:33,520 That will make it make it look like it's loading like a UI navigation controller. 171 00:09:33,530 --> 00:09:34,250 But it's really not. 172 00:09:34,250 --> 00:09:35,750 It's pretty cool. 173 00:09:35,780 --> 00:09:39,620 But for now we'll just go ahead and dismiss the view controller that's fine. 174 00:09:39,620 --> 00:09:40,950 What else do we need. 175 00:09:41,000 --> 00:09:47,600 We also need yes an outlet for the group title because that will change as we open the controller so 176 00:09:47,630 --> 00:09:52,060 group title label looks good. 177 00:09:52,190 --> 00:09:54,310 And you know what I forgot something. 178 00:09:54,380 --> 00:09:59,930 We are basically missing some space here for a UI label that's going to show all the users who are a 179 00:09:59,930 --> 00:10:00,830 part of this group. 180 00:10:00,830 --> 00:10:02,090 That's not cool man. 181 00:10:02,150 --> 00:10:08,270 So let's go ahead and let's remove that top constraint and I'm going to go ahead and stretch this down 182 00:10:08,270 --> 00:10:09,390 a little bit. 183 00:10:09,890 --> 00:10:11,570 So we have some room. 184 00:10:11,780 --> 00:10:16,910 I'm going to go ahead and set the background color here to be light gray because that looks like there 185 00:10:16,910 --> 00:10:18,450 is no color. 186 00:10:18,870 --> 00:10:19,700 Let's see is that right. 187 00:10:19,730 --> 00:10:20,270 Yes. 188 00:10:20,270 --> 00:10:21,320 Very good. 189 00:10:21,320 --> 00:10:27,080 And now let's go ahead and just say UI label drag one on 190 00:10:29,910 --> 00:10:34,090 there we go and we're going to put it here we're going to stretch it. 191 00:10:34,120 --> 00:10:41,280 The extent of the view controller I'm going to pin it so that it stays there zero from there from there 192 00:10:41,290 --> 00:10:41,950 zero from there. 193 00:10:41,950 --> 00:10:46,050 And we're going to do eight from the top of the table view. 194 00:10:46,510 --> 00:10:48,280 OK go ahead and pin it there. 195 00:10:48,320 --> 00:10:49,560 And that looks awesome. 196 00:10:49,840 --> 00:10:56,310 Now we're going to go ahead and change the font like you may be expecting to Menlo. 197 00:10:56,680 --> 00:11:02,410 That's the font of choice for this app and I'm going to lower the font down to maybe say 14. 198 00:11:02,870 --> 00:11:04,200 Try 14 out. 199 00:11:04,300 --> 00:11:05,860 That looks pretty good. 200 00:11:05,860 --> 00:11:06,670 Cool cool. 201 00:11:06,670 --> 00:11:07,840 So that looks good. 202 00:11:07,840 --> 00:11:18,440 Let's change it to green excellent and let's go ahead and just say user at breakpoint dot com. 203 00:11:19,270 --> 00:11:23,360 Joe Schmo at break point. 204 00:11:23,860 --> 00:11:25,780 Let's just say this is a group with two users. 205 00:11:25,780 --> 00:11:29,760 But as you can tell as I add in users we already run out of space. 206 00:11:29,770 --> 00:11:36,040 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:36,040 --> 00:11:38,030 Very cool so now I have a label there. 208 00:11:38,050 --> 00:11:40,720 But in order to do anything with it I need an outlet. 209 00:11:40,810 --> 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,710 --> 00:11:49,550 Yes of course I do. 211 00:11:49,550 --> 00:11:51,320 Guys I almost forgot the most important part. 212 00:11:51,320 --> 00:11:56,090 How are we supposed to send messages if we don't have a textfield to send messages and a send button. 213 00:11:56,210 --> 00:11:57,920 That is a major oversight. 214 00:11:57,920 --> 00:11:59,600 So let's add that now. 215 00:11:59,840 --> 00:12:04,730 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,730 --> 00:12:05,750 of the table view. 217 00:12:05,840 --> 00:12:08,370 We're going to add in a text field and a button. 218 00:12:08,600 --> 00:12:09,740 It's going to be really easy. 219 00:12:09,740 --> 00:12:16,340 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,340 --> 00:12:20,480 take a little while thanks to X code in Solu. 221 00:12:21,600 --> 00:12:29,030 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,690 --> 00:12:34,490 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,880 --> 00:12:39,770 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,460 --> 00:12:43,310 on top of the table view that's perfect. 225 00:12:43,310 --> 00:12:48,640 Let's go ahead and reposition this. 226 00:12:48,640 --> 00:12:50,290 That's good. 227 00:12:50,440 --> 00:13:00,120 Let's pull it a little bit wider and let's lower it down to say let's say 60. 228 00:13:00,210 --> 00:13:00,810 Sweet. 229 00:13:00,810 --> 00:13:01,660 OK. 230 00:13:01,680 --> 00:13:07,050 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:07,050 --> 00:13:08,380 60. 232 00:13:08,460 --> 00:13:09,510 That looks great. 233 00:13:09,780 --> 00:13:16,500 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,680 --> 00:13:19,370 And of course it's not actually showing the update in frames. 235 00:13:19,380 --> 00:13:22,130 But if I were to go off and come back on I'm sure it would. 236 00:13:22,620 --> 00:13:27,500 But for now let's go ahead and let's set this up by giving it a background color. 237 00:13:27,780 --> 00:13:31,970 Let's set it to be the same as the background of the app. 238 00:13:31,980 --> 00:13:36,970 So it's that nice light gray color you although that is not the right light gray. 239 00:13:37,020 --> 00:13:37,950 Which one is it. 240 00:13:39,010 --> 00:13:39,960 That's the dark gray. 241 00:13:39,970 --> 00:13:41,340 And we want it to be the light gray. 242 00:13:41,340 --> 00:13:42,950 So I think it's this one. 243 00:13:43,480 --> 00:13:43,790 Oh no. 244 00:13:43,810 --> 00:13:44,530 That's the dark gray. 245 00:13:44,530 --> 00:13:47,950 Sorry it's hard to tell when you compare it to a very light gray. 246 00:13:47,950 --> 00:13:48,560 OK. 247 00:13:48,790 --> 00:13:51,410 That looks pretty good. 248 00:13:51,430 --> 00:13:54,630 That now matches the background of our table view that's cool. 249 00:13:54,670 --> 00:14:00,890 And now we need to drop in a UI textfield which is where we're going to type our messages. 250 00:14:02,110 --> 00:14:05,530 So draw draw drop that on as soon as you can. 251 00:14:05,660 --> 00:14:12,260 And we're going to drag that to be a little bit longer then we're going to drop on a button. 252 00:14:12,660 --> 00:14:15,820 Like so and that's going to be our Send button. 253 00:14:16,970 --> 00:14:18,670 So go ahead and add that there. 254 00:14:19,160 --> 00:14:20,920 And let's get rid of the button text. 255 00:14:20,930 --> 00:14:22,220 We don't need that. 256 00:14:22,220 --> 00:14:27,600 We just have an image already added in for us called Send can that looks really cool. 257 00:14:27,890 --> 00:14:33,170 So our textfield we're going to use inset textfield like we've been using so we should change the font 258 00:14:33,170 --> 00:14:34,270 to green. 259 00:14:34,550 --> 00:14:42,490 We should change the system to custom and this should be Menlo and we want it to be a little smaller 260 00:14:42,500 --> 00:14:44,300 So let's set it to be 14. 261 00:14:44,300 --> 00:14:46,330 That's a good font size for this textfield. 262 00:14:46,640 --> 00:14:53,090 Now if you remember the border style is rectangular and the textfield background itself is the dark 263 00:14:53,150 --> 00:14:53,680 gray. 264 00:14:53,680 --> 00:14:57,110 So let's set that to dark gray. 265 00:14:57,110 --> 00:14:58,230 There we go. 266 00:14:58,250 --> 00:14:59,040 Very good. 267 00:14:59,050 --> 00:15:00,050 So yeah. 268 00:15:00,050 --> 00:15:06,370 The only thing we need to change we need to give it a placeholder that just says Senda. 269 00:15:06,470 --> 00:15:07,700 Well maybe I'll do lowercase. 270 00:15:07,700 --> 00:15:14,330 Send a message dot dot dot and let's change this to be an inset textfield remember we created that at 271 00:15:14,330 --> 00:15:19,160 the beginning of this course and it's basically a custom subclass that's going to allow us to look really 272 00:15:19,160 --> 00:15:24,780 cool and have a nice white placeholder and it's going to turn into a nice green one. 273 00:15:24,830 --> 00:15:25,190 Cool. 274 00:15:25,190 --> 00:15:26,200 So this looks great. 275 00:15:26,330 --> 00:15:31,870 Let's go ahead and set this so that it's right where it should be. 276 00:15:31,940 --> 00:15:33,830 I don't really like it there. 277 00:15:35,510 --> 00:15:35,860 OK. 278 00:15:35,900 --> 00:15:36,550 That looks great. 279 00:15:36,560 --> 00:15:38,300 Let's pin this where it should be. 280 00:15:38,480 --> 00:15:41,690 15 from the top 15 from the bottom. 281 00:15:41,690 --> 00:15:46,500 Let's also do 15 from the left and let's do eight from the right to the button. 282 00:15:47,350 --> 00:15:48,140 That looks good. 283 00:15:48,140 --> 00:15:54,270 And now we're going to pin the button 15 from the top 15 from the bottom and 15 from the right. 284 00:15:54,290 --> 00:15:56,760 It's already pinned to our text view. 285 00:15:57,020 --> 00:16:02,390 And you know what let's give it a fixed width and height of 30 and 30 and add five constraints. 286 00:16:03,000 --> 00:16:04,980 Ok really cool so that's in place. 287 00:16:04,980 --> 00:16:06,060 That's good to go. 288 00:16:06,270 --> 00:16:07,230 Now let's go ahead. 289 00:16:07,230 --> 00:16:12,450 We're going to basically keep everything inside this view and we're going to slide it up as our keyboard 290 00:16:12,450 --> 00:16:13,150 goes up. 291 00:16:13,350 --> 00:16:21,450 So let's go ahead and right click and let's create an outlet called Send button view then let's create 292 00:16:21,450 --> 00:16:24,630 an outlet for the text field itself. 293 00:16:24,630 --> 00:16:31,650 Message textfield then let's create an action or an outlet for the button. 294 00:16:31,680 --> 00:16:37,340 Because we're going to disable it when we send it until it's sent send button looks good. 295 00:16:37,410 --> 00:16:40,480 And of course for the send button we're going to need an action. 296 00:16:40,480 --> 00:16:49,110 So go ahead and let's create that send button was pressed OK let's create some space here. 297 00:16:49,310 --> 00:16:49,580 OK. 298 00:16:49,580 --> 00:16:50,780 Really really really cool guys. 299 00:16:50,780 --> 00:16:55,210 We have a view we have a text field and we have a send button. 300 00:16:55,310 --> 00:16:59,570 Now we should do is to make sure that the send button view is bound to the keyboard. 301 00:16:59,570 --> 00:17:05,840 So let's go ahead and call send button view bind to keyboard and that's going to use our awesome extension 302 00:17:05,840 --> 00:17:09,800 to bind this view to the keyboard so that it slides up as we want to type. 303 00:17:09,800 --> 00:17:11,190 Super super cool guys. 304 00:17:11,300 --> 00:17:12,600 So this is now built. 305 00:17:12,620 --> 00:17:14,160 We have group feed visi. 306 00:17:14,270 --> 00:17:19,390 We actually set up our cell subclassed we set up how it looks we configured it. 307 00:17:19,430 --> 00:17:20,470 This is awesome guys. 308 00:17:20,630 --> 00:17:26,930 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,930 --> 00:17:33,560 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,830 --> 00:17:38,060 in the next video what we're going to do is we're going to set up our table view in groups Visi so that 311 00:17:38,060 --> 00:17:43,940 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,940 --> 00:17:45,530 and all of that good stuff. 313 00:17:45,530 --> 00:17:50,240 And we're going to do that in the next video so let's head over that way and let's do it now.