1 00:00:07,490 --> 00:00:08,810 Everybody welcome back. 2 00:00:08,810 --> 00:00:14,030 Johnny B who with slopes dot com and we are continuing on with our chat app. 3 00:00:14,210 --> 00:00:20,870 Let's go and just run this to see where we left off we were working on our collection of view in our 4 00:00:20,870 --> 00:00:27,430 avatar picker View Controller and yes so in this little lesson we are going to continue working on that. 5 00:00:27,490 --> 00:00:34,370 Get it to where it's showing all of the correct Avatar images as well as being able to select them and 6 00:00:34,370 --> 00:00:36,920 see that to our user data service. 7 00:00:37,100 --> 00:00:45,890 So if this pops up it's just been trying to vamp here while this loads that we click here on our menu 8 00:00:45,990 --> 00:00:51,140 go to log in don't have an account sign up here and this is where we're at right now again. 9 00:00:51,320 --> 00:00:57,490 So we need to work on our configure cell function and I get that all working. 10 00:00:57,890 --> 00:00:58,080 All right. 11 00:00:58,080 --> 00:01:04,640 So let's take a look at our avatar so one of the first things what we're going to need to know to configure 12 00:01:04,640 --> 00:01:08,780 our cell is whether it's supposed to be a dark or light cell right. 13 00:01:09,140 --> 00:01:15,530 So I'm thinking we create an enumerator here and we're going to call this enumerator Avatar type A and 14 00:01:15,650 --> 00:01:16,810 we have two cases. 15 00:01:16,820 --> 00:01:22,460 Case one is dark dark stuff. 16 00:01:22,470 --> 00:01:32,310 That hand is trying to set it equal to an image and cased next cases light. 17 00:01:32,650 --> 00:01:40,640 And so then in our configure cell function or a funk configure configure. 18 00:01:40,680 --> 00:01:50,440 So we are going to need to know the index so that we can set the image and that's going to be of a type. 19 00:01:50,750 --> 00:01:56,580 And we're also going to need to know the type of Avatar that is supposed to be whether it's dark or 20 00:01:56,580 --> 00:01:56,960 light. 21 00:01:57,030 --> 00:02:05,760 And that is of type have a tar type in the area that we just created can cause the bottom pane here. 22 00:02:05,770 --> 00:02:18,300 And so we're going to say if the type is equal to Avatar type dot dark then the avatar image that we 23 00:02:18,300 --> 00:02:26,010 have an IP outlet for the only image the only UI element inside of these cells then the image is going 24 00:02:26,010 --> 00:02:39,030 to be equal to UI image named and it is going to be named dark and then string and interpolate the index 25 00:02:39,150 --> 00:02:41,840 that we are passing into this function. 26 00:02:43,850 --> 00:02:47,430 And then just a little bit of stabilizing. 27 00:02:47,450 --> 00:02:53,020 If it's a dark Avatar we're going to have a light gray background to it. 28 00:02:53,120 --> 00:02:58,310 If it's that light they're going to have a dark gray background just so that the backgrounds accentuate 29 00:02:58,580 --> 00:03:01,280 the Avatar images. 30 00:03:01,280 --> 00:03:01,490 All right. 31 00:03:01,490 --> 00:03:12,120 Francis self-taught layer dot back ground color is equal to you by colored light gray dot C-g color. 32 00:03:13,310 --> 00:03:21,470 So else if this is a light Avatar we are going to say and I'm just going to copy this because it's pretty 33 00:03:21,470 --> 00:03:22,580 much the same thing. 34 00:03:22,760 --> 00:03:28,120 The avatar image is going to be equal to you image named instead of dark. 35 00:03:28,330 --> 00:03:31,900 It's just going to be light. 36 00:03:32,030 --> 00:03:41,560 And just to drive it home one more time if we look at our assets these are named dark and then an integer. 37 00:03:41,570 --> 00:03:49,700 So what's going to happen is when the cell for item is function is called and the controller is going 38 00:03:49,700 --> 00:03:57,410 to cycle through and it's going to send the index 0 through 27 to our configure item cell and it's going 39 00:03:57,410 --> 00:04:03,050 to do the check whether it's supposed to be dark or light and then it's going to pick the Avatar images 40 00:04:03,110 --> 00:04:03,870 based on that. 41 00:04:03,920 --> 00:04:04,550 OK. 42 00:04:05,240 --> 00:04:11,610 And we need to change this color to just a regular Gray. 43 00:04:11,630 --> 00:04:11,900 All right. 44 00:04:11,900 --> 00:04:12,360 Perfect. 45 00:04:12,380 --> 00:04:13,420 And save that 46 00:04:17,130 --> 00:04:22,000 analysis jump into are going to say that Ganjam two are avid her picker visi. 47 00:04:22,430 --> 00:04:27,040 And here we need to call our configure cell function. 48 00:04:27,090 --> 00:04:35,170 Ok I was going to say so dot configure cell and we have we're going to pass in the index and that's 49 00:04:35,170 --> 00:04:36,830 pretty easy because that's. 50 00:04:37,060 --> 00:04:37,380 That's right. 51 00:04:37,380 --> 00:04:47,230 Here the index paths are going to say Index path that item will give us the specific index path index 52 00:04:47,230 --> 00:04:48,580 number that we want. 53 00:04:48,690 --> 00:04:50,220 But here we need to pass in the type. 54 00:04:50,230 --> 00:04:59,500 All right so we need to actually create a variable that stores the type of Avatar type that we are currently 55 00:04:59,500 --> 00:05:00,160 selected. 56 00:05:00,160 --> 00:05:00,720 OK. 57 00:05:00,970 --> 00:05:10,570 So the variable is going to be our avatar type and this is going to equal an avatar type and by default 58 00:05:10,720 --> 00:05:17,560 it's going to be set to the dark because when we load the view controller that's what the segment control 59 00:05:17,590 --> 00:05:20,480 is set to by default in. 60 00:05:20,540 --> 00:05:31,300 So for now we're just passing the Avatar type here and it's just going to be the dark for now until 61 00:05:31,300 --> 00:05:34,480 we get in our segment control changed function working. 62 00:05:34,690 --> 00:05:38,080 All right so let's go ahead and run that. 63 00:05:38,320 --> 00:05:39,510 I'm going to click here. 64 00:05:39,610 --> 00:05:41,390 Click on log in. 65 00:05:41,490 --> 00:05:42,700 Don't have an account. 66 00:05:42,700 --> 00:05:45,060 And drum roll. 67 00:05:45,460 --> 00:05:46,580 Hey every 68 00:05:49,960 --> 00:05:51,650 looks pretty cool. 69 00:05:51,650 --> 00:05:53,710 This doesn't do anything yet though. 70 00:05:53,810 --> 00:05:55,810 So let's go ahead and fix that. 71 00:05:55,910 --> 00:06:02,100 How are we going to do that if we come down here to the segment control changed. 72 00:06:02,450 --> 00:06:05,560 I want you to try and figure this out on your own. 73 00:06:05,750 --> 00:06:06,470 OK. 74 00:06:06,470 --> 00:06:09,890 So just kind of to talk you through it. 75 00:06:10,100 --> 00:06:16,730 What you're going to need to do is you're going to need to do a check to see which segment control is 76 00:06:16,730 --> 00:06:23,320 selected then you're going to need to change this avatar type. 77 00:06:23,660 --> 00:06:28,610 And then you'll need to do something to reload the data. 78 00:06:28,610 --> 00:06:29,050 All right. 79 00:06:29,210 --> 00:06:30,920 So see if you can figure that out on your own. 80 00:06:31,010 --> 00:06:34,760 And if and if not then we're going to do it right now. 81 00:06:34,760 --> 00:06:35,890 Together game. 82 00:06:36,200 --> 00:06:42,050 So we're going to say if segment control that selected segment index. 83 00:06:42,050 --> 00:06:46,850 So that's how we are able to access and know which one is selected. 84 00:06:46,850 --> 00:06:54,690 0 is the first one and then number one is the right one answering to say. 85 00:06:55,070 --> 00:07:05,840 So if it's equal to zero then we know that the dark is selected sorry and say Avatar type is equal to 86 00:07:05,950 --> 00:07:14,850 dot dark and else the Avatar type is equal to dot light. 87 00:07:14,870 --> 00:07:23,320 All right so we are changing the variable here based on which segment control is selected. 88 00:07:24,130 --> 00:07:32,170 And then after we have set that then we're going to say collection view dot reload data and that will 89 00:07:32,260 --> 00:07:39,550 call all these collection view functions again and this time when we pass and so that configure cell 90 00:07:40,150 --> 00:07:48,550 if we have selected the light segment control then the light type of Avatar type will be passed on to 91 00:07:48,550 --> 00:07:53,910 the configure cell and instead of the loading the dark Avatar images will show the lions all right. 92 00:07:54,060 --> 00:08:01,920 So to see that an action was go ahead and run it and open up our menu press log in dont have an account 93 00:08:02,200 --> 00:08:03,830 click on the Avatar. 94 00:08:04,050 --> 00:08:06,310 And hey there we go. 95 00:08:06,430 --> 00:08:09,470 So now we are toggling between the dark and light. 96 00:08:09,520 --> 00:08:18,970 So that looks awesome but this the flow doesn't look great how it's set up and it probably doesn't look 97 00:08:19,690 --> 00:08:26,650 awesome on both of the larger and smaller files like this is a plus so it doesn't look awesome on the 98 00:08:27,040 --> 00:08:32,160 7 or the size either so let's go ahead and let's try and fix that. 99 00:08:32,470 --> 00:08:41,350 So one of the functions that we get here is if you type size four item at let's see I think we won this 100 00:08:41,350 --> 00:08:44,150 round here a size 4 item at. 101 00:08:44,330 --> 00:08:44,750 All right. 102 00:08:44,800 --> 00:08:52,450 And we can type in a and return a C-g size. 103 00:08:52,450 --> 00:08:58,090 But I think what we want to do is we're going to be we're going to do a little bit of math and some 104 00:08:58,090 --> 00:09:01,480 coding here to make it more fluid. 105 00:09:01,480 --> 00:09:01,980 All right. 106 00:09:02,200 --> 00:09:08,260 So we have to take into account the screen sizes from the SE all the way up to the seven plus right. 107 00:09:08,500 --> 00:09:16,450 And so we want the sizes of the cells and even how many columns to be dynamic based on which screen 108 00:09:16,450 --> 00:09:17,320 size we're using. 109 00:09:17,320 --> 00:09:25,900 All right so we are going to calculate the number of columns and the size of the individual cells based 110 00:09:25,900 --> 00:09:27,210 on the screen size. 111 00:09:27,230 --> 00:09:27,650 Right. 112 00:09:27,910 --> 00:09:34,130 So what we're into is we're going to say we're create a variable here called number of columns. 113 00:09:34,250 --> 00:09:35,080 OK. 114 00:09:35,680 --> 00:09:38,760 And that's going to be a see you float. 115 00:09:39,010 --> 00:09:52,150 And we're going to start out with three but we're going to say if the UI screen dot main dot bounds 116 00:09:52,150 --> 00:10:04,600 dot with is greater than 300 and 20 then go ahead and set the number of columns equal to four. 117 00:10:04,920 --> 00:10:05,360 OK. 118 00:10:05,640 --> 00:10:09,750 So we'll talk about this basically right here. 119 00:10:09,780 --> 00:10:15,180 This is just getting the width of the screen size screamed at mean that bounced out with just getting 120 00:10:15,180 --> 00:10:25,870 the width of the current screen and 320 that is the width of the smallest iPhone size the iPhone s e. 121 00:10:26,010 --> 00:10:29,480 So if so we're saying there's going to be three columns. 122 00:10:29,640 --> 00:10:31,020 If it's an iPhone. 123 00:10:31,380 --> 00:10:38,250 If it's anything bigger an iPhone 6 or 7 or any of the pluses then we're going to go with forehands 124 00:10:38,490 --> 00:10:40,860 just because that will look a little bit better. 125 00:10:40,860 --> 00:10:41,360 All right. 126 00:10:41,700 --> 00:10:46,740 So now we need to calculate the size of the width and height of our cells. 127 00:10:46,740 --> 00:10:47,340 OK. 128 00:10:47,610 --> 00:10:57,450 So what we're going to say is going to say let the space between cells of type C.G. float rancid that 129 00:10:57,500 --> 00:11:03,930 equal to 10 and you may be wondering why worse we're explicitly declaring all of these numbers to be 130 00:11:03,990 --> 00:11:05,490 of type e.g. float. 131 00:11:05,490 --> 00:11:13,140 And that's because if you see here the C-g size we're going to be required to when we do math all of 132 00:11:13,140 --> 00:11:18,360 the numbers we want them all to be of the same type so that everything works out OK. 133 00:11:19,020 --> 00:11:22,600 So I'm going to pull this up here again. 134 00:11:22,740 --> 00:11:29,430 Our simulator just to kind of will have a visual aid while I explain the math that we're going to be 135 00:11:29,430 --> 00:11:31,280 looking at here. 136 00:11:31,290 --> 00:11:31,490 All right. 137 00:11:31,500 --> 00:11:37,650 So this space between cells variable is this guy right here. 138 00:11:37,650 --> 00:11:41,670 So this gap as well as this one right here. 139 00:11:42,000 --> 00:11:51,420 And so what we're what our goal is to calculate how tall and how wide we want each of these cells to 140 00:11:51,420 --> 00:11:53,560 be based on the screen with. 141 00:11:54,300 --> 00:11:59,740 And so we're going to need to know the gap that we want between the cells. 142 00:11:59,930 --> 00:12:07,740 And we also need to know the inset distance which I said was this padding on the sides so we said that 143 00:12:07,740 --> 00:12:15,160 to be equal to 20 in case we're going to say let go and call that padding. 144 00:12:15,600 --> 00:12:18,470 And that's also of type C.G. float. 145 00:12:18,550 --> 00:12:24,810 And that is equal to 40 because it is 20 on both sides. 146 00:12:24,810 --> 00:12:30,830 Basically we're going to be eliminating everything that is not purely clutching view OK. 147 00:12:31,290 --> 00:12:37,990 And then we're going to say let cell dimension equal. 148 00:12:38,370 --> 00:12:43,040 And so we're going to say a couple of parentheses here. 149 00:12:43,070 --> 00:12:54,930 We're going to take collection be you dot bounds dot with minus the inset hers minus the padding minus 150 00:12:54,960 --> 00:13:05,870 the number of columns minus one times the space between cells. 151 00:13:06,480 --> 00:13:09,050 All of that divided by the number 152 00:13:11,670 --> 00:13:16,100 of columns I need space right here. 153 00:13:16,170 --> 00:13:16,350 All right. 154 00:13:16,350 --> 00:13:20,080 So just kind of try to take a look at that again. 155 00:13:20,160 --> 00:13:26,530 So let me see if I can find a place for this that will fit Ka-Zar left panel. 156 00:13:28,910 --> 00:13:29,170 OK. 157 00:13:29,180 --> 00:13:37,010 So we're saying we're crying like I said we're trying to get the I mean make the smaller. 158 00:13:37,240 --> 00:13:38,530 There OK. 159 00:13:39,580 --> 00:13:44,330 So we're trying to get the cell width and height mainly the the width. 160 00:13:44,350 --> 00:13:45,020 OK. 161 00:13:45,310 --> 00:13:46,830 Because we're looking at squares here. 162 00:13:47,040 --> 00:13:53,470 All right so we're saying we're getting the space between the cells and we're getting the padding which 163 00:13:53,470 --> 00:13:54,300 is 40. 164 00:13:54,400 --> 00:13:57,010 So we're starting out saying get the entire width. 165 00:13:57,180 --> 00:13:59,770 We're going to subtract from that the padding. 166 00:14:00,020 --> 00:14:00,550 OK. 167 00:14:00,850 --> 00:14:08,610 So that's gone then we're going to subtract from that the gap right here. 168 00:14:08,990 --> 00:14:10,010 OK. 169 00:14:10,720 --> 00:14:15,650 And so all that leaves is this distance this with and this with. 170 00:14:15,850 --> 00:14:19,780 And so we're just going to take that amount and we're going to divide that by the number of columns 171 00:14:20,020 --> 00:14:26,020 and that will give us the width of each individual cell based on the number of columns the space between 172 00:14:26,020 --> 00:14:27,370 the cells and the padding. 173 00:14:27,370 --> 00:14:27,960 All right. 174 00:14:28,300 --> 00:14:36,950 So then all we have to do is return a C.G. size. 175 00:14:37,240 --> 00:14:45,120 And that is going to be with cell dimension and height cell dimension. 176 00:14:45,130 --> 00:14:54,040 All right so when I say that and I'm going to run this on an iPhone 7 plus 6 s and s e and I'll just 177 00:14:54,460 --> 00:14:57,070 come back to you when those are all back up. 178 00:14:57,070 --> 00:14:57,480 All right. 179 00:14:57,520 --> 00:14:59,890 So we got all. 180 00:14:59,910 --> 00:15:01,000 All three of them up here. 181 00:15:01,000 --> 00:15:06,180 The seven plus a 6 s and s e. 182 00:15:06,280 --> 00:15:09,190 And you can see that we have they all look up great. 183 00:15:09,370 --> 00:15:12,380 We have three rows in the. 184 00:15:12,730 --> 00:15:21,250 We have four in the plus and the regular size and each of the sizes they all are dynamically size so 185 00:15:21,520 --> 00:15:24,190 you don't have any weird spacing. 186 00:15:24,250 --> 00:15:27,940 And so yeah it looks it looks real good guys. 187 00:15:27,940 --> 00:15:33,130 All right so I'm going to go ahead and stop that and open up our great pain again. 188 00:15:33,310 --> 00:15:36,010 I said the last thing to do is select an avatar. 189 00:15:36,010 --> 00:15:42,570 All right so what we're going to need to do for that is if we are going to call the function did select. 190 00:15:42,770 --> 00:15:43,080 All right. 191 00:15:43,120 --> 00:15:45,030 So what happens when we click it. 192 00:15:45,130 --> 00:15:53,080 We are going to save whichever one was selected as the user's avatar name. 193 00:15:53,080 --> 00:15:53,480 All right. 194 00:15:53,710 --> 00:16:06,940 So if the Avatar type is equal to that dark when we selected the user data service for instance that 195 00:16:07,270 --> 00:16:10,650 set avatar name Raemer I said we're going to need this. 196 00:16:10,740 --> 00:16:12,520 We are going to set that equal to 197 00:16:14,980 --> 00:16:18,080 dark and we're going to string and interpolate. 198 00:16:18,340 --> 00:16:32,560 And we're going to say Index path that item right else the user data service instance does set an avatar 199 00:16:32,680 --> 00:16:46,110 name will be liked and then string interpolate with the index path that item right there you go. 200 00:16:46,200 --> 00:16:55,780 And then once that's done we are going to just self-doubt dismiss animated as true and completion is 201 00:16:55,950 --> 00:16:56,660 new. 202 00:16:56,950 --> 00:17:05,050 So when we click on it and we are saving to the user data service Let's jump over here and jump over 203 00:17:05,050 --> 00:17:09,750 here to the user data service we saving to the avatar name property. 204 00:17:09,940 --> 00:17:13,900 Whichever one we clicked on basically and then we are just dismissing. 205 00:17:14,170 --> 00:17:14,440 All right. 206 00:17:14,440 --> 00:17:17,440 And then what we want to do is when. 207 00:17:17,440 --> 00:17:24,070 So we're going to dismiss back to the create account VC and what we want to do is when we get back here 208 00:17:24,370 --> 00:17:30,610 we want to update the profile or the users image to the one that we just selected. 209 00:17:30,640 --> 00:17:36,940 So we're Reseda going to see on view did appear and we're going to do a check because when we initialize 210 00:17:36,940 --> 00:17:43,240 the user data service we set the avatar name just equal to an empty string. 211 00:17:43,240 --> 00:17:50,800 So what we're going to do is say if user data services for instance dot have a term name is not still 212 00:17:50,830 --> 00:17:57,700 equal to that empty string meaning we have selected one from the avatar picture then we're going to 213 00:17:57,700 --> 00:18:03,010 set the user image that image equal to that image. 214 00:18:03,040 --> 00:18:05,440 So when I say image name. 215 00:18:08,090 --> 00:18:15,780 And the name of the image is used do a service dot instance dot avatar name. 216 00:18:15,950 --> 00:18:23,630 And then we are also going to set the local variable for Avatar name which we use here in our create 217 00:18:23,630 --> 00:18:25,050 user function. 218 00:18:25,060 --> 00:18:25,530 OK. 219 00:18:25,750 --> 00:18:40,350 So when I say avatar name is equal to I can use a data service that instance that Avatar avatar name 220 00:18:42,330 --> 00:18:48,450 and there we go let's say that and run it I'm going to put this back up on the iPhone 7 and run that 221 00:18:48,480 --> 00:18:50,190 and see how that works. 222 00:18:50,910 --> 00:18:59,000 Let's see here we go in and go on to have an account click here and we're going to select this shark. 223 00:18:59,040 --> 00:19:00,930 And hey there we go. 224 00:19:00,930 --> 00:19:01,960 All right. 225 00:19:04,290 --> 00:19:04,910 Awesome 226 00:19:08,740 --> 00:19:16,420 of these light ones though it's kind of hard to kind of hard to see it but we'll fix that here in the 227 00:19:16,420 --> 00:19:17,860 next videos. 228 00:19:18,420 --> 00:19:20,940 Go ahead and call it good on this one. 229 00:19:21,040 --> 00:19:27,690 So in this video we set out to finish up our avatar picture Visi and that we did. 230 00:19:27,700 --> 00:19:31,770 Now we can select our avatars. 231 00:19:31,780 --> 00:19:38,750 We can we've got the sizing right and dynamic for any of the iPhone sizes. 232 00:19:38,790 --> 00:19:41,630 And yeah it looks really really good so far. 233 00:19:41,710 --> 00:19:47,800 So you guys are doing awesome making great progress when we go ahead and just save our progress here 234 00:19:47,800 --> 00:19:51,700 in Terminal 4 Get set get commit that. 235 00:19:51,750 --> 00:19:55,890 And this is less than 14. 236 00:19:56,920 --> 00:20:01,480 And in the next lesson we're going to work on that background color as well as some other cool things 237 00:20:01,480 --> 00:20:03,580 or so I will see you then.