1 00:00:07,880 --> 00:00:10,560 Everybody this is Caleb with slopes dot com. 2 00:00:10,570 --> 00:00:15,400 And in this video we're going to go ahead and we're going to create group cell which is going to go 3 00:00:15,400 --> 00:00:16,190 right here. 4 00:00:16,330 --> 00:00:18,900 It'll show a title for the title of our group. 5 00:00:18,910 --> 00:00:24,130 It will show a description and will also have a label to show how many members are in the group. 6 00:00:24,310 --> 00:00:30,730 So we're going to go ahead and start by building out that cell now by opening up X code going into main 7 00:00:30,950 --> 00:00:31,970 storyboard. 8 00:00:32,110 --> 00:00:37,540 And as soon as it loads we're going to go ahead and design it first by going to groups we then we're 9 00:00:37,540 --> 00:00:42,940 going to build the subclass write it out in code to configure the cell and then we're going to configure 10 00:00:42,940 --> 00:00:46,390 some static data just to make sure that our cells are loading properly. 11 00:00:46,630 --> 00:00:47,680 Let's do it. 12 00:00:47,680 --> 00:00:54,180 So select that cell and we're going to give it a background of dark gray and all we need to do is drag 13 00:00:54,180 --> 00:00:56,330 on three UI labels it's really easy. 14 00:00:56,350 --> 00:01:04,050 So go ahead and drag on a UI label beautiful and drag on another one and drag on a third one. 15 00:01:04,180 --> 00:01:05,000 Looks good. 16 00:01:05,300 --> 00:01:05,580 OK. 17 00:01:05,590 --> 00:01:09,550 So we're going to do the same thing for all three of these because the font and the color will be the 18 00:01:09,550 --> 00:01:10,330 same. 19 00:01:10,330 --> 00:01:18,010 So select custom change it to Menlo And let's not mess with the size yet because the top label is going 20 00:01:18,010 --> 00:01:24,190 to have slightly bigger font but we can change the color to our teal color which is really cool and 21 00:01:24,250 --> 00:01:26,730 we can go ahead and start kind of maneuvering these around now. 22 00:01:26,860 --> 00:01:31,480 So this will be for the group title. 23 00:01:31,480 --> 00:01:41,830 This will be for group description and this will be blank members that will show how many members are 24 00:01:41,830 --> 00:01:43,060 in the group. 25 00:01:43,060 --> 00:01:44,340 Now the group title. 26 00:01:44,350 --> 00:01:49,740 I'm going to put kind of up here to the side and I'm going to actually bump it up to about 20. 27 00:01:50,050 --> 00:01:51,490 And let's actually make it bold. 28 00:01:51,490 --> 00:01:55,910 So it kind of stands apart from the rest of the cell. 29 00:01:56,050 --> 00:01:59,750 The others the other members were going to go ahead and put slightly in. 30 00:02:00,220 --> 00:02:05,700 And we're going to set them so that they basically fill the entire cell just like that. 31 00:02:05,710 --> 00:02:11,590 So for the group title we're going to go ahead and let's pin that maybe let's do eight from the top 32 00:02:11,800 --> 00:02:14,390 eight from the left eight from the right. 33 00:02:14,440 --> 00:02:22,780 And let's do eight from the nearest text text field no label you white label a label I promise. 34 00:02:23,070 --> 00:02:23,330 OK. 35 00:02:23,340 --> 00:02:23,740 Beautiful. 36 00:02:23,740 --> 00:02:24,850 So that's in place. 37 00:02:25,000 --> 00:02:27,010 Let's go ahead and let's set some constraints here. 38 00:02:27,010 --> 00:02:29,840 We're going to set eight from the top. 39 00:02:30,190 --> 00:02:33,960 Well no you know what we already have a constraint there so we don't need to pin that. 40 00:02:34,150 --> 00:02:37,850 Let's go ahead and pin 15 from the left 0. 41 00:02:37,930 --> 00:02:41,330 Well no let's do it from the right and let's do it. 42 00:02:41,350 --> 00:02:43,690 Eight from the one right beneath it. 43 00:02:43,750 --> 00:02:50,950 Very cool although it looks like we may have some issues with our constraint at the very end on the 44 00:02:50,950 --> 00:02:51,920 trailing side. 45 00:02:51,970 --> 00:02:53,240 Try negative eight. 46 00:02:53,590 --> 00:02:54,110 OK. 47 00:02:54,400 --> 00:02:54,790 So good. 48 00:02:54,790 --> 00:02:59,920 Looks like we need to go negative 8 pull it in the way we want and for the members we're going to basically 49 00:02:59,920 --> 00:03:08,800 do the same thing except we'll do 15 from the left whoopsies 8 from the right and we're going to do 50 00:03:09,150 --> 00:03:11,390 eight from the bottom just like that. 51 00:03:11,440 --> 00:03:14,770 We don't need to give it a top constraint because it already has one. 52 00:03:14,890 --> 00:03:17,260 We're already pinning it to the top here. 53 00:03:18,990 --> 00:03:21,930 Although you know what it looks like we actually do need to do that. 54 00:03:21,930 --> 00:03:23,180 I don't know what I'm thinking. 55 00:03:23,190 --> 00:03:23,460 OK. 56 00:03:23,460 --> 00:03:25,470 Pin the top to that label. 57 00:03:25,500 --> 00:03:27,370 Whoops we already pin that one. 58 00:03:27,420 --> 00:03:35,210 We're going to actually pin the bottom of this oh no we're good. 59 00:03:35,790 --> 00:03:36,940 Interesting. 60 00:03:37,530 --> 00:03:38,520 So you know what 61 00:03:42,250 --> 00:03:44,380 trailing space is not matching up. 62 00:03:44,380 --> 00:03:46,450 Let's let's actually you know what guys. 63 00:03:46,460 --> 00:03:47,710 Sorry I don't like how I'm doing this. 64 00:03:47,710 --> 00:03:53,090 I'm going to go ahead and I'm just going to remove all the constraints for now for these two labels 65 00:03:53,530 --> 00:03:57,880 and since they're basically doing the same thing I'm going to just go ahead and put them in a stack 66 00:03:57,910 --> 00:04:02,560 view and let's go ahead and set it to fill. 67 00:04:02,560 --> 00:04:04,680 So it goes across the whole stack of you. 68 00:04:05,030 --> 00:04:09,570 And now we should be able to constrain the stack view the way we want. 69 00:04:09,580 --> 00:04:16,540 So let's go ahead and pin that 8 from the top let's do 20 from the left 20 from the right and maybe 70 00:04:16,600 --> 00:04:18,120 8 from the bottom. 71 00:04:18,280 --> 00:04:18,710 OK. 72 00:04:18,820 --> 00:04:19,440 Awesome. 73 00:04:19,660 --> 00:04:21,310 So that looks exactly how we wanted it. 74 00:04:21,340 --> 00:04:27,750 Although we definitely need a little bit of spacing so let's give it five pieces of spacing pieces at 75 00:04:27,780 --> 00:04:28,760 points. 76 00:04:28,840 --> 00:04:34,480 And since we're adding spacing Let's go ahead and let's move the bottom constraint down to zero so that 77 00:04:34,480 --> 00:04:35,690 we can fit everything in. 78 00:04:35,770 --> 00:04:36,770 And that looks pretty good. 79 00:04:36,940 --> 00:04:41,820 So this is now a group cell it'll show the group's title description and the number of members. 80 00:04:42,040 --> 00:04:43,900 So let's go ahead and create the subclass. 81 00:04:43,910 --> 00:04:51,220 Now in code right click on view click new file Cocco touch class and you table you sell it's already 82 00:04:51,220 --> 00:04:55,010 there but we're just going to call this group cell. 83 00:04:55,210 --> 00:04:56,000 Click next. 84 00:04:56,020 --> 00:04:58,670 And go ahead and create that into our project. 85 00:04:58,870 --> 00:05:05,680 And now we can get rid of all of this junk that we do not need but we do need to go set the identity 86 00:05:06,010 --> 00:05:11,830 in main but storyboard so go back to main storyboard open the assistant editor while we're here we're 87 00:05:11,830 --> 00:05:17,380 going to use it in just a second and we're going to select the table view cell just like that in the 88 00:05:17,380 --> 00:05:21,560 identity Inspector go ahead and give it an identity of group cell. 89 00:05:21,820 --> 00:05:22,380 Perfect. 90 00:05:22,390 --> 00:05:29,750 And now we should be able to see that when we go to View group sell we should be able to interface between 91 00:05:29,750 --> 00:05:30,630 these two. 92 00:05:30,650 --> 00:05:35,970 So let's create some ivy outlets so that we can properly interface with groups. 93 00:05:36,320 --> 00:05:41,480 And to do that we're basically going to select each label right click and drag and we'll call this group 94 00:05:41,480 --> 00:05:43,910 title label. 95 00:05:43,910 --> 00:05:55,040 Next we're going to go ahead and we will call this group description label and this will be member count 96 00:05:55,100 --> 00:05:59,540 label to denote the number of members. 97 00:05:59,540 --> 00:06:00,670 Very cool. 98 00:06:00,680 --> 00:06:05,750 Now of course in order to actually properly show information we need to write a configure cell function 99 00:06:05,960 --> 00:06:07,260 so let's do that. 100 00:06:07,260 --> 00:06:10,270 Phunk configure cell. 101 00:06:10,910 --> 00:06:17,300 And what we're going to do is when we can figure this we need to pass in a title for the group of type 102 00:06:17,300 --> 00:06:24,950 String we need to pass in a description of type string not a Stern string and we need to pass in a member 103 00:06:24,950 --> 00:06:27,530 count of type int because it's a value right. 104 00:06:27,530 --> 00:06:29,900 Three members four members five members. 105 00:06:29,900 --> 00:06:36,860 Now what we need to do is we need to set these labels so self group title label text is going to be 106 00:06:36,860 --> 00:06:43,910 equal to the title Whichever one we pull down from firebase self description label group description 107 00:06:43,910 --> 00:06:44,580 label. 108 00:06:44,720 --> 00:06:51,590 That text is going to be equal to description then self dot member count label dot text is going to 109 00:06:51,590 --> 00:06:54,170 be equal to the member count. 110 00:06:54,170 --> 00:06:57,370 But we need to create a string and pass in the number. 111 00:06:57,380 --> 00:07:07,100 So to do that go ahead and type a quotation mark and then inside use a forward slash and parentheses 112 00:07:07,130 --> 00:07:12,440 and we can pass in member count and then we can say members. 113 00:07:12,440 --> 00:07:17,930 So that'll basically create a string version of that number and add members at the end and it will show 114 00:07:17,930 --> 00:07:19,130 the proper information. 115 00:07:19,160 --> 00:07:20,100 Super easy. 116 00:07:20,300 --> 00:07:26,180 So now that we have properly created a group cell and set up its subclass what we need to do is set 117 00:07:26,180 --> 00:07:30,740 up the reuse identifier because we're about to load some data and we're going to try to fill in some 118 00:07:30,740 --> 00:07:31,080 cells. 119 00:07:31,080 --> 00:07:37,310 So since this is called Group cell I'm going to copy that and just paste it in as the reuse identifier 120 00:07:37,340 --> 00:07:41,630 but make the G at the front lower case just personal preference. 121 00:07:41,630 --> 00:07:47,660 All right so now we need to set up groups you see we have not yet connected outlets for the table view 122 00:07:47,660 --> 00:07:48,910 or for anything else. 123 00:07:49,220 --> 00:07:50,080 Let's go do that now. 124 00:07:50,090 --> 00:07:53,300 Actually sorry back into Main Story storyboard. 125 00:07:53,330 --> 00:07:58,480 Go ahead and open up the assistant editor and here's what we're going to do. 126 00:07:58,490 --> 00:08:00,500 We're going to select our table view. 127 00:08:00,500 --> 00:08:06,290 We're going to select automatic and go to groups Visi then we're going to right click and drag to create 128 00:08:06,680 --> 00:08:09,170 a groups table view. 129 00:08:09,620 --> 00:08:13,280 OK create an ID outlet there to save that in place. 130 00:08:13,280 --> 00:08:14,310 Very cool. 131 00:08:14,540 --> 00:08:19,620 And now we can close the assistant editor and just do work in VC. 132 00:08:19,700 --> 00:08:23,930 So let's go ahead let's get rid of it did receive memory warning and we're going to actually create 133 00:08:23,960 --> 00:08:30,440 an extension of groups Fisi so that we can conform to the table view delegate table view data source 134 00:08:30,710 --> 00:08:31,300 protocols. 135 00:08:31,310 --> 00:08:37,740 So go ahead and type extension groups VC and type you. 136 00:08:37,760 --> 00:08:42,940 Table View delegate and you table view data source. 137 00:08:43,310 --> 00:08:44,180 Excellent. 138 00:08:44,240 --> 00:08:47,720 There are three functions we have to conform to. 139 00:08:47,720 --> 00:08:56,500 So a number of sections which usually we just return one then we have a number of rows in S.. 140 00:08:56,600 --> 00:08:58,250 Let's just return three. 141 00:08:58,250 --> 00:09:00,640 Let's see just three of our cells. 142 00:09:00,650 --> 00:09:04,280 And then there cell for row an index path. 143 00:09:04,280 --> 00:09:08,900 So to do this we're just going to generate three cells and we're going to just set them with all the 144 00:09:08,900 --> 00:09:11,840 same information just to see if our table is working. 145 00:09:11,870 --> 00:09:13,420 And so let's do it. 146 00:09:13,430 --> 00:09:14,740 Go ahead and type guard. 147 00:09:14,750 --> 00:09:22,150 Let cell equals groups table view dequeue reusable cell with identifier. 148 00:09:22,160 --> 00:09:29,770 Now remember our identifier is group cell and the index path is just the index path from the table view. 149 00:09:29,810 --> 00:09:37,000 Now in order to actually instantiate this as a group cell we need to optionally cast it as a group cell. 150 00:09:37,370 --> 00:09:44,590 Otherwise if we don't get anything back if we can't do QSL we're just going to return a table view cell. 151 00:09:44,630 --> 00:09:45,450 Very cool. 152 00:09:45,650 --> 00:09:49,740 So now we need to configure our cell to show all the proper information. 153 00:09:49,760 --> 00:09:55,400 So go ahead and type Celcom configure cell for the title let's just say nerd herd. 154 00:09:55,520 --> 00:10:01,940 The description is the nerdiest nerds around I think we've done this already and the member count let's 155 00:10:01,940 --> 00:10:05,960 say there's three members Me and two other people great. 156 00:10:05,990 --> 00:10:12,860 After we configure the cell we're going to go ahead and return the cell so that the table view can use 157 00:10:12,860 --> 00:10:14,310 it the way that it needs to. 158 00:10:14,600 --> 00:10:17,230 Awesome So that looks great. 159 00:10:17,390 --> 00:10:22,260 There's one thing we need to definitely set our groups table view to have a delegate. 160 00:10:22,270 --> 00:10:23,900 So type groups table view. 161 00:10:24,020 --> 00:10:29,740 Delegate is going to be self and groups table view datasource is also going to be self. 162 00:10:29,750 --> 00:10:32,060 So it knows where to get all of the information it needs. 163 00:10:32,180 --> 00:10:38,510 So let's go ahead let's build and run let's see if this shows our three cells that we want to display 164 00:10:39,480 --> 00:10:41,610 and build and run. 165 00:10:41,630 --> 00:10:42,380 There we go. 166 00:10:42,380 --> 00:10:43,790 It's opening up. 167 00:10:43,790 --> 00:10:48,640 And when we click on groups we should definitely see a table view loading three cells. 168 00:10:48,920 --> 00:10:53,110 Click oh and we get a crash. 169 00:10:53,110 --> 00:10:54,300 Interesting. 170 00:10:54,760 --> 00:10:55,630 OK. 171 00:10:55,630 --> 00:11:03,940 Terminating app to uncaught exception an unknown key exception UI you control or set value for undefined 172 00:11:03,940 --> 00:11:04,610 key. 173 00:11:04,630 --> 00:11:11,410 This class is not a key value coding compliant for the key groups table view interesting. 174 00:11:11,680 --> 00:11:14,610 Let's go back and let's take a look at what we've done here. 175 00:11:14,920 --> 00:11:16,770 We have set up a table view. 176 00:11:16,950 --> 00:11:18,720 OK we have an IB outlet. 177 00:11:18,910 --> 00:11:26,380 We have given it a delegate a data source we have told it all of the required things we are returning 178 00:11:26,410 --> 00:11:30,490 a table view cell like we're supposed to. 179 00:11:31,390 --> 00:11:39,730 OK let's go check to make sure that we didn't accidentally connect this to the wrong thing. 180 00:11:39,730 --> 00:11:41,320 No it's connected to groups. 181 00:11:41,320 --> 00:11:43,210 That's exactly what we want. 182 00:11:43,220 --> 00:11:43,740 Actually 183 00:11:49,500 --> 00:11:53,650 group sell gay group sell That's exactly right. 184 00:11:53,880 --> 00:11:57,580 Groups cell is the name. 185 00:11:58,080 --> 00:11:59,170 Interesting. 186 00:11:59,640 --> 00:12:02,040 So that's not working. 187 00:12:02,040 --> 00:12:10,220 Now when we open the view controller on feuded load we are showing everything. 188 00:12:10,220 --> 00:12:16,220 Let's let's just see if we remove these it should just show the empty table view if it doesn't if it 189 00:12:16,220 --> 00:12:18,010 crashes again we'll know we have another problem. 190 00:12:18,020 --> 00:12:21,940 But I'm just making sure that it's not to do with the table view. 191 00:12:21,980 --> 00:12:22,320 OK. 192 00:12:22,340 --> 00:12:22,910 And you know what. 193 00:12:22,920 --> 00:12:27,100 It actually appears to be a problem with the table view. 194 00:12:27,170 --> 00:12:29,320 That's really weird. 195 00:12:39,110 --> 00:12:40,100 We have a group so 196 00:12:49,440 --> 00:12:51,980 OK so I think I found the problem guys. 197 00:12:52,010 --> 00:12:54,200 It's a really really weird issue. 198 00:12:54,230 --> 00:12:59,990 Now if you click on feedback you'll notice that its identity is feed Visi and we're inheriting it from 199 00:12:59,990 --> 00:13:04,660 the target meaning that it's pulling feed the sea from our feet to the C-code files. 200 00:13:04,730 --> 00:13:10,940 Watch what happens when we select groups somehow inherit from Target got unchecked meaning it's not 201 00:13:10,940 --> 00:13:13,310 actually pulling groups Fisi from anywhere. 202 00:13:13,310 --> 00:13:18,350 So it's sort of like somehow we have until that and now it's no longer a part of our app. 203 00:13:18,350 --> 00:13:20,780 I bet that this has been working the whole time. 204 00:13:20,840 --> 00:13:22,770 We just did not have that. 205 00:13:22,790 --> 00:13:24,120 Let's build and run. 206 00:13:24,140 --> 00:13:28,650 Let's see if that works again that's a really weird problem. 207 00:13:28,660 --> 00:13:35,180 And this code beta bug is really bothering me with this gray thing he just stays there no matter what. 208 00:13:35,180 --> 00:13:36,110 OK let's try it again. 209 00:13:36,110 --> 00:13:39,710 Groups and we have our groups showing up now. 210 00:13:39,770 --> 00:13:42,220 The font is way too big as you notice. 211 00:13:42,290 --> 00:13:45,180 We're going to go ahead and change that really quickly. 212 00:13:45,180 --> 00:13:50,220 And sorry for this giant grey depressing thing. 213 00:13:50,360 --> 00:13:54,050 But we're going to fix it really quickly let's notice in this cell. 214 00:13:54,050 --> 00:13:55,510 I believe it was 14. 215 00:13:55,520 --> 00:14:00,350 Let's set both of these down to 14 looks good. 216 00:14:00,350 --> 00:14:04,360 And that means this could probably be maybe 18. 217 00:14:04,500 --> 00:14:06,640 It's build and run one more time. 218 00:14:06,650 --> 00:14:10,760 I knew that I had set that up properly but I was just trying to figure out why it wasn't working it 219 00:14:10,760 --> 00:14:13,010 was just some super weird fluky bug. 220 00:14:13,010 --> 00:14:18,900 You probably won't have that bug because you probably didn't accidentally tick the wrong box. 221 00:14:18,920 --> 00:14:19,860 So let's check it out. 222 00:14:19,930 --> 00:14:21,390 Ah that looks much better. 223 00:14:21,410 --> 00:14:23,100 Much more consistent. 224 00:14:23,330 --> 00:14:28,940 Now we are successfully loading static data into our table view in the next video we're going to write 225 00:14:28,940 --> 00:14:34,430 a function called Get all groups that's going to allow us to download all the groups from firebase and 226 00:14:34,430 --> 00:14:36,140 pass them into our table view. 227 00:14:36,140 --> 00:14:41,120 Now the cool thing is that if someone adds us to a group it's going to show up immediately in table 228 00:14:41,120 --> 00:14:41,420 view. 229 00:14:41,510 --> 00:14:42,460 Really really cool stuff. 230 00:14:42,470 --> 00:14:45,770 And just an amazing part of the real time firebase database. 231 00:14:45,770 --> 00:14:48,820 Let's head over to the next video where we'll download all of our groups. 232 00:14:48,830 --> 00:14:49,610 I'll see you there.