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