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