1 00:00:08,040 --> 00:00:12,810 It hey everybody this is Caleb with Dev slopes dotcom and in this video we're going to go ahead and 2 00:00:12,810 --> 00:00:18,240 set up our users cell which is what we're going to use when we search for a user when we're trying to 3 00:00:18,240 --> 00:00:19,320 create a group. 4 00:00:19,350 --> 00:00:25,950 It will show a profile image their email and it'll also have a check so we can determine whether or 5 00:00:25,950 --> 00:00:28,140 not we have added them to a group or not. 6 00:00:28,140 --> 00:00:34,590 So go ahead and pull open that code project and what we're going to do is we're going to start by designing 7 00:00:35,190 --> 00:00:37,170 the cell here the user's cell. 8 00:00:37,260 --> 00:00:41,040 And then after we design it we're going to create the subclass in code. 9 00:00:41,310 --> 00:00:44,550 So this is a little bit too skinny for my liking. 10 00:00:44,550 --> 00:00:49,120 I'm going to go ahead and pull it down to maybe 55. 11 00:00:49,230 --> 00:00:50,750 That looks like a pretty good height. 12 00:00:51,030 --> 00:00:58,940 And let's go ahead and I'm going to change the background to be Let's see does light gray look better. 13 00:00:59,100 --> 00:01:00,090 Yeah I like that. 14 00:01:00,090 --> 00:01:04,170 The light gray looks better compared to the dark gray which will be the background. 15 00:01:04,170 --> 00:01:05,840 I think that looks pretty cool. 16 00:01:05,970 --> 00:01:13,020 And now I'm going to do is I'm going to drag on a UI image view like so OK. 17 00:01:13,140 --> 00:01:15,360 And drag it onto the cell. 18 00:01:15,360 --> 00:01:16,710 Now I'm going to resize it. 19 00:01:16,710 --> 00:01:20,220 So it's a nice little square and we want it to fit inside that cell. 20 00:01:20,220 --> 00:01:23,700 So it had better be pretty small. 21 00:01:24,120 --> 00:01:25,130 Well you know what. 22 00:01:25,140 --> 00:01:29,450 Now that I'm thinking about it maybe our table view cell here is a little too short. 23 00:01:29,520 --> 00:01:35,100 Maybe let's make it 60 0 and something we need to remember is we also need to select the table view 24 00:01:35,130 --> 00:01:37,520 and change the row height to match. 25 00:01:37,530 --> 00:01:38,150 Ok cool. 26 00:01:38,160 --> 00:01:42,260 So let's go ahead and let's resize this it looks like 44 by 44. 27 00:01:42,320 --> 00:01:44,030 It's going to be a good size for us. 28 00:01:44,370 --> 00:01:51,620 And let's go ahead and fill this with our default profile image for now let's just select that aspect 29 00:01:51,630 --> 00:01:53,540 fill clip bounds. 30 00:01:53,910 --> 00:02:00,330 That looks good and I'm going to go ahead and pin this zero from the left zero from the top zero from 31 00:02:00,330 --> 00:02:00,770 the bottom. 32 00:02:00,780 --> 00:02:04,810 And I'm actually going to pin it 10 from the left. 33 00:02:05,220 --> 00:02:06,600 Oh that's odd. 34 00:02:06,900 --> 00:02:10,170 Well as you can see it kind of messed up the height and width there so let's go ahead and give it a 35 00:02:10,170 --> 00:02:13,860 height and width constraint of 44 and 44. 36 00:02:13,860 --> 00:02:14,720 There we go. 37 00:02:15,000 --> 00:02:15,440 Nice. 38 00:02:15,460 --> 00:02:17,120 OK so that looks great. 39 00:02:17,130 --> 00:02:20,490 Now let's go ahead and add a label for the e-mail. 40 00:02:20,640 --> 00:02:23,600 So search for label and drag one on. 41 00:02:23,760 --> 00:02:25,140 There we go. 42 00:02:25,170 --> 00:02:26,070 That looks good. 43 00:02:26,100 --> 00:02:35,460 Let's modify the font to custom Menlo And I think size 18 is probably OK but I'm going to go down to 44 00:02:35,460 --> 00:02:41,410 16 just to give us a little more room and choose that nice green color. 45 00:02:41,430 --> 00:02:42,390 Very cool. 46 00:02:42,390 --> 00:02:47,970 We're not going to give it constrains just yet because we have another image to add let's add that on 47 00:02:47,970 --> 00:02:55,810 this side here and we're going to stretch this down and we're going to make this actually just fit right 48 00:02:55,810 --> 00:02:56,190 here. 49 00:02:56,200 --> 00:03:00,910 Let's fill the image first and then let's determine what we need to do with it. 50 00:03:00,910 --> 00:03:05,670 So let's go ahead and search for a white checkmark. 51 00:03:05,680 --> 00:03:10,710 There we go and let's do aspect fit boops aspect fit. 52 00:03:10,840 --> 00:03:13,740 And we're going to make it small. 53 00:03:13,980 --> 00:03:17,400 And so we're going to go ahead and let's see how that looks. 54 00:03:19,200 --> 00:03:21,700 Does that look pixillated to you it looks a little pixilated to me. 55 00:03:21,710 --> 00:03:22,910 Let's zoom in here. 56 00:03:22,920 --> 00:03:23,920 Let's see. 57 00:03:24,510 --> 00:03:26,040 It's not going to let me of course. 58 00:03:26,040 --> 00:03:28,770 That's nice. 59 00:03:28,860 --> 00:03:29,140 OK. 60 00:03:29,160 --> 00:03:34,830 So I can't zoom in but I definitely can zoom in enough to see that that is definitely pixilated. 61 00:03:34,830 --> 00:03:42,080 So let's go ahead and reduce it in size a little bit K and let's give that constraint here zero to the 62 00:03:42,080 --> 00:03:45,330 top 10 to the right and zero to the bottom. 63 00:03:45,350 --> 00:03:46,460 Go ahead and pin it there. 64 00:03:46,460 --> 00:03:47,280 That looks good. 65 00:03:47,300 --> 00:03:48,500 Oh and now it's not pixilated. 66 00:03:48,530 --> 00:03:49,700 Awesome. 67 00:03:49,700 --> 00:03:50,430 Very cool. 68 00:03:50,450 --> 00:03:55,690 And let's go ahead and let's set this label up as well so that it comes right up next to the image. 69 00:03:55,910 --> 00:03:58,410 And we're going to go ahead and pin this. 70 00:03:58,650 --> 00:04:07,490 Well 12 let's do 10 from the top 10 from the left 10 and 10 let's just pin it 10 all around all right 71 00:04:07,500 --> 00:04:08,200 cool. 72 00:04:08,350 --> 00:04:13,390 The only issue with this image here is we've not given it a with constraint so let's let's pin it at 73 00:04:13,480 --> 00:04:15,640 20 and let's keep it there. 74 00:04:16,450 --> 00:04:19,890 And now everything should stay in place nicely. 75 00:04:20,110 --> 00:04:20,820 OK that's great. 76 00:04:20,830 --> 00:04:24,980 Although it looks like the labels now a little bit too close to the image. 77 00:04:25,030 --> 00:04:29,160 Let's go ahead and let's set the leading space to actually be 20. 78 00:04:29,410 --> 00:04:36,360 So it's not so so so close and let's just change the default text to say user at break point. 79 00:04:37,810 --> 00:04:38,140 Awesome. 80 00:04:38,140 --> 00:04:40,890 OK so that's a good fit for a pretty average e-mail. 81 00:04:41,110 --> 00:04:46,840 But if for some reason it didn't fit all the way I'm going to set a minimum font size of 8 so that it 82 00:04:46,840 --> 00:04:51,450 can scale down if it's a little bit longer so we can fit the whole thing in the cell. 83 00:04:51,460 --> 00:04:51,860 All right. 84 00:04:51,880 --> 00:04:52,330 Excellent. 85 00:04:52,330 --> 00:04:57,020 So this is now built out we've built out a nice little table view cell. 86 00:04:57,040 --> 00:05:02,700 Now we're going to go ahead and right click on View new file and select cocoa touch class. 87 00:05:02,740 --> 00:05:12,250 We're going to create the table view cell subclass for this cell and we're going to call this user cell 88 00:05:12,280 --> 00:05:16,200 because it's a cell that holds information about a user so that just makes sense. 89 00:05:16,210 --> 00:05:20,030 So click Create and you should see it come up here. 90 00:05:20,210 --> 00:05:22,170 User so awesome. 91 00:05:22,480 --> 00:05:28,090 Now go ahead and click on Main storyboard and we are actually going to set the identity of our cell 92 00:05:28,090 --> 00:05:34,210 in the table view as a user cell so that we can modify it here on the on the right so select table view 93 00:05:34,210 --> 00:05:39,400 cell from the document outline and then we're going to go ahead and in the class we're going to choose 94 00:05:39,460 --> 00:05:40,550 user's cell. 95 00:05:41,110 --> 00:05:46,630 And you know while we're at it before we forget we should also change the reuse identifier because we'll 96 00:05:46,630 --> 00:05:51,490 be using that in just a moment to create all of these when we dequeue it from the table view. 97 00:05:51,490 --> 00:05:56,980 So go ahead and type user cell and just paste that in there. 98 00:05:56,980 --> 00:06:02,530 I like to use the camel casing here with lower case first word and uppercase second word for the reuse 99 00:06:02,530 --> 00:06:03,070 identifier. 100 00:06:03,070 --> 00:06:05,050 That's just what what is common. 101 00:06:05,050 --> 00:06:06,580 So that's what I do. 102 00:06:06,940 --> 00:06:14,730 And now we should be able to select our user cell and then come into manual go to View and choose user's 103 00:06:14,730 --> 00:06:15,620 cell. 104 00:06:15,640 --> 00:06:19,720 And now we should be able to access all of this how we want. 105 00:06:19,750 --> 00:06:22,790 So we can get rid of Awake from NIB. 106 00:06:22,810 --> 00:06:26,480 We're not going to need it but we are going to save set selected. 107 00:06:26,590 --> 00:06:32,540 OK because this configures the view for the selected state how we're going to use this is we're going 108 00:06:32,540 --> 00:06:34,770 to use it to toggle the checkmark. 109 00:06:34,780 --> 00:06:38,900 So when we select it the checkmark will be non hidden. 110 00:06:39,010 --> 00:06:41,130 When we selected again it will hide. 111 00:06:41,140 --> 00:06:47,440 So this will be hidden by default and we will go ahead and show it when it's selected. 112 00:06:47,500 --> 00:06:48,700 That would be pretty cool. 113 00:06:48,700 --> 00:06:55,780 So let's go ahead and set up Iby outlets for now for these images the label and yeah that's it. 114 00:06:55,780 --> 00:07:00,600 So right click and drag from the image call this profile image. 115 00:07:01,030 --> 00:07:01,970 That's good. 116 00:07:01,990 --> 00:07:11,540 Select the label call this e-mail label and then select the check and call this check image. 117 00:07:12,040 --> 00:07:12,750 All right. 118 00:07:12,970 --> 00:07:13,720 Very cool. 119 00:07:13,720 --> 00:07:19,450 So now we can properly access all of the elements in every cell and we're going to now create a configure 120 00:07:19,450 --> 00:07:22,540 cell function just like we've done with other table cells. 121 00:07:22,570 --> 00:07:23,440 So go ahead and do that. 122 00:07:23,440 --> 00:07:32,140 Call phunk configure cell and we have three things that we need a profile image and e-mail and we're 123 00:07:32,140 --> 00:07:35,650 going to pass in a boolean called is selected. 124 00:07:35,650 --> 00:07:39,940 And that's going to determine whether or not the check image shows. 125 00:07:39,940 --> 00:07:47,640 So like I said we need a profile image and I'm going to use an internal parameter of image here. 126 00:07:47,890 --> 00:07:52,050 We have a user name which That's fine just. 127 00:07:52,180 --> 00:07:56,770 Well no let's call it e-mail that username because we're not really using usernames using e-mails. 128 00:07:56,860 --> 00:08:01,600 And then for the boolean Let's go ahead and call it is selected. 129 00:08:02,620 --> 00:08:05,290 So those are the three important things we're going to pass in. 130 00:08:05,600 --> 00:08:06,270 OK. 131 00:08:06,520 --> 00:08:09,590 An image an e-mail and is selected as boolean. 132 00:08:09,730 --> 00:08:17,680 So first we're going to set up the profile image by calling self profile image image a profile image 133 00:08:17,680 --> 00:08:19,350 being the image view. 134 00:08:19,750 --> 00:08:23,770 And we're going to set the image to be the image that we pass in here. 135 00:08:24,190 --> 00:08:25,060 OK. 136 00:08:25,060 --> 00:08:31,110 Next we're going to set the username self dot whip's e-mail label. 137 00:08:31,330 --> 00:08:34,060 Text equals e-mail. 138 00:08:34,300 --> 00:08:36,580 The one we pass in from our function. 139 00:08:36,580 --> 00:08:37,810 Very cool. 140 00:08:37,810 --> 00:08:41,860 Now here's where we need to use a little bit of conditional code. 141 00:08:42,550 --> 00:08:45,380 Oh whoops it looks like I made a mistake here. 142 00:08:45,400 --> 00:08:51,580 Bringing in my e-mail label it looks like I got the background view and called that e-mail the e-mail 143 00:08:51,640 --> 00:08:52,830 label accidentally. 144 00:08:52,840 --> 00:08:53,830 Let's remove that. 145 00:08:53,830 --> 00:08:56,430 That's going to cause us all kinds of problems. 146 00:08:56,810 --> 00:08:57,070 OK. 147 00:08:57,070 --> 00:09:02,710 Get rid of that and leave space here and let's select the label from the document outline sometimes 148 00:09:02,710 --> 00:09:03,820 that's easier. 149 00:09:04,220 --> 00:09:05,160 There I should have checked. 150 00:09:05,170 --> 00:09:07,670 But you can tell it's an eye label right there. 151 00:09:08,120 --> 00:09:08,600 OK. 152 00:09:08,600 --> 00:09:10,710 E-mail label is now accessible. 153 00:09:10,790 --> 00:09:11,250 Beautiful. 154 00:09:11,270 --> 00:09:11,510 OK. 155 00:09:11,510 --> 00:09:14,450 Now we're going to do some conditional code for is selected. 156 00:09:14,480 --> 00:09:20,090 So if is selected meaning if our name has been selected already. 157 00:09:20,120 --> 00:09:20,370 Right. 158 00:09:20,360 --> 00:09:26,900 If we have pressed on the table the cell then the check image should show right it should not be hidden. 159 00:09:26,900 --> 00:09:28,130 So go ahead and call. 160 00:09:28,370 --> 00:09:28,680 Check. 161 00:09:28,680 --> 00:09:32,450 Image is hidden equals false. 162 00:09:32,810 --> 00:09:33,880 OK. 163 00:09:34,670 --> 00:09:42,190 And then else meaning if it is not selected We're going to hide the check image because if it you have 164 00:09:42,190 --> 00:09:47,140 to kind of think about it in reverse if it is selected the check image is not hidden. 165 00:09:47,140 --> 00:09:49,700 If it isn't selected the check image is hidden. 166 00:09:49,720 --> 00:09:52,220 It's not showing because we haven't selected anybody yet. 167 00:09:52,220 --> 00:09:53,430 So go ahead and call check. 168 00:09:53,430 --> 00:09:56,030 Image is hidden. 169 00:09:56,180 --> 00:09:56,750 Equals. 170 00:09:56,750 --> 00:09:57,830 True. 171 00:09:57,830 --> 00:09:58,760 All righty. 172 00:09:59,330 --> 00:10:01,560 Very very cool. 173 00:10:01,880 --> 00:10:07,510 You know what just to make sure that we are referring to the right one we should call self check image 174 00:10:08,330 --> 00:10:10,530 and that looks pretty good. 175 00:10:10,670 --> 00:10:14,180 So if it is selected it will be false. 176 00:10:14,210 --> 00:10:18,000 If it is not it will be true. 177 00:10:18,050 --> 00:10:20,050 I think this is pretty good. 178 00:10:20,060 --> 00:10:24,580 We're going to go ahead and just leave this like this for now. 179 00:10:24,680 --> 00:10:26,370 OK we'll see how that does. 180 00:10:26,510 --> 00:10:32,930 And let's go ahead and let's go set up our table view in create groups Visi so that we can show some 181 00:10:32,930 --> 00:10:34,550 cells on the table for you. 182 00:10:34,670 --> 00:10:35,180 OK. 183 00:10:35,450 --> 00:10:41,160 So click create groups Fisi and close the assistant editor just like that. 184 00:10:41,210 --> 00:10:42,350 Very good. 185 00:10:42,350 --> 00:10:46,110 And now we need to go ahead and set up our table view. 186 00:10:46,400 --> 00:10:50,690 I'm going to get rid of that boilerplate code and in order to start I'm going to create an extension 187 00:10:50,690 --> 00:10:55,590 of this view controller and conform to the table view delegate and data source. 188 00:10:55,670 --> 00:10:59,450 So type extension create groups VC. 189 00:10:59,630 --> 00:11:01,120 Make sure you type the right one. 190 00:11:01,190 --> 00:11:02,980 Create groups visi. 191 00:11:03,410 --> 00:11:12,740 And we're going to conform to you Table View delegate and you table view data source already and as 192 00:11:12,740 --> 00:11:19,220 you know there are three that we need to conform to number of sections in table view number of rows 193 00:11:19,220 --> 00:11:23,190 in Section and cell for index path. 194 00:11:23,210 --> 00:11:23,880 All righty. 195 00:11:24,260 --> 00:11:31,530 Now a number of sections just like most times we'll be returning one LME and return down here. 196 00:11:31,550 --> 00:11:35,910 You can see a little better number of rows in section for now. 197 00:11:36,050 --> 00:11:39,680 Let's go ahead and let's return three. 198 00:11:40,100 --> 00:11:42,010 Let's just see what 3 looks like. 199 00:11:42,050 --> 00:11:46,500 And for self-growth index path let's go ahead and let's set up an instance of user cell. 200 00:11:46,670 --> 00:11:49,530 Let's dequeue them and let's just see if they show. 201 00:11:49,610 --> 00:12:00,740 So let's go ahead and let's think we need to do a guard let cell equals table view d q reusable cell 202 00:12:00,740 --> 00:12:04,040 with identifier K and there the identifier. 203 00:12:04,040 --> 00:12:08,690 If you remember that's the reuse identifier we already set it as user cell. 204 00:12:09,020 --> 00:12:09,880 OK. 205 00:12:10,160 --> 00:12:15,050 Now we're using guard let just in case it can't create the amount of cells it needs it's not going to 206 00:12:15,050 --> 00:12:16,420 crash. 207 00:12:16,550 --> 00:12:23,870 So we need to cast this as a user cell in order for it to actually have that identity as user cell. 208 00:12:24,050 --> 00:12:26,330 But if this can't work then we need to call. 209 00:12:26,360 --> 00:12:29,180 Else and we can't just return. 210 00:12:29,180 --> 00:12:36,140 Watch what happens if I try to just return OK it says non void function should return a value and it's 211 00:12:36,140 --> 00:12:38,570 telling us we need to return a table view cell. 212 00:12:38,570 --> 00:12:43,670 So let's just return a blank one like so and let's instantiate it. 213 00:12:44,030 --> 00:12:54,230 OK so this is good assuming we get a cell back if we do then we can call cell Dom configure cell and 214 00:12:54,260 --> 00:12:57,170 we need to pass it a profile image. 215 00:12:57,180 --> 00:13:04,670 OK so in order to do that we're actually going to go ahead and create a constant appear called profile 216 00:13:04,670 --> 00:13:12,510 image and let's just set it to be UI image and we're going to use you image named like so. 217 00:13:12,800 --> 00:13:18,540 And if you remember it's called default profile image and now we can just pass that in. 218 00:13:18,680 --> 00:13:24,080 Although we will have to unwrap it simply because we are using it with a string type name and there 219 00:13:24,080 --> 00:13:25,510 are chances that it could be a problem. 220 00:13:25,520 --> 00:13:27,760 But we know for sure that that is the name. 221 00:13:27,860 --> 00:13:29,000 So that's great. 222 00:13:29,000 --> 00:13:32,200 Let's go ahead and let's pass in a random e-mail just for now. 223 00:13:32,210 --> 00:13:36,800 How about mart at back to the future com. 224 00:13:36,950 --> 00:13:37,910 Nice. 225 00:13:37,910 --> 00:13:40,280 And how about four is selected let's just say. 226 00:13:40,280 --> 00:13:40,870 True. 227 00:13:40,910 --> 00:13:45,690 So we can see if the check image shows all right now the cell is configured. 228 00:13:45,710 --> 00:13:48,050 Let's go ahead and return the cell. 229 00:13:48,380 --> 00:13:56,300 And now we should be good to go although I am remembering for a table view we need to set the delegate 230 00:13:56,330 --> 00:13:57,840 and data source in view to load. 231 00:13:57,860 --> 00:13:59,950 So let's go ahead and type table view. 232 00:14:00,080 --> 00:14:06,510 Delegate equal self and table view data source also equal self. 233 00:14:06,660 --> 00:14:08,260 You guys will see if this works. 234 00:14:08,270 --> 00:14:08,980 All right let's go try. 235 00:14:08,990 --> 00:14:15,420 So build and run that building to my phone and let's build it to the simulator instead. 236 00:14:16,340 --> 00:14:17,410 And let's go see if it worked. 237 00:14:17,420 --> 00:14:19,160 I'm so excited to see if these cells show up. 238 00:14:19,160 --> 00:14:20,810 I think they're pretty pretty cool. 239 00:14:20,810 --> 00:14:21,770 They look pretty nice. 240 00:14:21,770 --> 00:14:26,210 And that's a really really awesome way for the user to search through and add people they want to their 241 00:14:26,210 --> 00:14:28,640 group supercool experience. 242 00:14:28,790 --> 00:14:30,530 And let's see if it worked. 243 00:14:32,760 --> 00:14:33,150 All right. 244 00:14:33,150 --> 00:14:39,280 So we need to go into groups add groups Visi And hey look at that. 245 00:14:39,390 --> 00:14:42,470 They showed up supercool. 246 00:14:42,630 --> 00:14:45,510 So there's an image there's an e-mail and the check. 247 00:14:45,510 --> 00:14:47,400 We said it to be selected. 248 00:14:47,820 --> 00:14:49,380 And that's that's exactly right. 249 00:14:49,380 --> 00:14:50,340 That's perfect. 250 00:14:50,340 --> 00:14:57,120 So now we properly have table view cell showing up we have the check showing if we pass in selected 251 00:14:57,660 --> 00:15:02,970 or hidden if we don't pass and selected we can give it an email we could pass in an image. 252 00:15:02,970 --> 00:15:08,430 This is good to go guys we now have a user cell that properly works in the next video we're going to 253 00:15:08,430 --> 00:15:13,470 set up our function that's going to search through all of our users and firebase download them down 254 00:15:13,470 --> 00:15:16,980 into the cell and we're also going to go into. 255 00:15:16,980 --> 00:15:18,160 Let me show you. 256 00:15:18,270 --> 00:15:23,880 We'll go into the user's cell and we're going to set up a set selected to hide and show the check image 257 00:15:23,880 --> 00:15:26,040 depending on whether or not we tap on the cell. 258 00:15:26,100 --> 00:15:27,210 It will be super super cool. 259 00:15:27,210 --> 00:15:29,790 Let's head over to that video now and let's get started.