1 00:00:06,980 --> 00:00:12,380 So ladies and gentlemen welcome back Johnny be here with devah slopes dot com. 2 00:00:12,450 --> 00:00:18,570 And then this lesson we are going to take a break from the API for just a little bit and work on our 3 00:00:18,570 --> 00:00:19,980 UI a little bit more. 4 00:00:19,980 --> 00:00:20,560 All right. 5 00:00:20,760 --> 00:00:24,220 So right now we can open up and go into loggin. 6 00:00:24,330 --> 00:00:26,540 Go to her don't have an account. 7 00:00:26,760 --> 00:00:32,180 But if you click on this doesn't do anything we want to be able to pick our avatar image. 8 00:00:32,610 --> 00:00:39,860 So we want to end up with is when we're here and we click on our Choose Avatar we want to jump over 9 00:00:39,870 --> 00:00:47,570 into this view where we have a collection view of a whole bunch of different cute little avatar images. 10 00:00:48,210 --> 00:00:57,020 And speaking of this is the I got these assets off of the Noun Project. 11 00:00:57,150 --> 00:01:04,650 And so to give attribution where attribution is do these are the artists that created these awesome 12 00:01:04,680 --> 00:01:05,130 assets. 13 00:01:05,130 --> 00:01:05,590 OK. 14 00:01:05,820 --> 00:01:12,800 So you can find each of these at the back from these authors here at the Noun Project dot com. 15 00:01:12,810 --> 00:01:13,460 OK. 16 00:01:14,130 --> 00:01:16,460 All right so what do we what do we need to do. 17 00:01:16,470 --> 00:01:22,890 We need to create a view controller with a segmented control that will toggle between kind of the dark 18 00:01:22,920 --> 00:01:26,510 and light themed avatars. 19 00:01:26,520 --> 00:01:30,360 We've got a backbone and that's pretty much it shouldn't be. 20 00:01:30,360 --> 00:01:35,310 Shouldn't be too hard but let's let's get cracking and we're going to see if we can get through all 21 00:01:35,310 --> 00:01:38,460 of this in just this one video OK. 22 00:01:38,490 --> 00:01:42,690 So without me jabbering on any further let's get going. 23 00:01:42,690 --> 00:01:45,920 All right so first off let's jump in to storyboard. 24 00:01:47,790 --> 00:01:50,910 We're going to need a new controller. 25 00:01:51,120 --> 00:01:58,690 So I'm going to zoom out a little bit here scroll over and drop in a new View Controller. 26 00:01:59,000 --> 00:02:01,330 Let's go ahead and add our segue right away. 27 00:02:01,330 --> 00:02:08,170 So when a controlled jet can create a counter Visi to our new avatar picture visi. 28 00:02:08,340 --> 00:02:14,910 And I'm going to look at the Segway and come over to our Actually inspector and give it an identifier 29 00:02:15,240 --> 00:02:18,810 right to call this to create account. 30 00:02:19,340 --> 00:02:26,190 And just like we've been doing with our other segues my computer and jump into our Constans file and 31 00:02:26,190 --> 00:02:27,820 I'm going to add a segue. 32 00:02:27,820 --> 00:02:36,490 Constance I want to say let two Avatar pick her equal to. 33 00:02:36,690 --> 00:02:43,800 And then when I paste in what I copied in there that I say to create count that's not what I wanted. 34 00:02:43,860 --> 00:02:46,240 Back to storyboard not to create a count. 35 00:02:46,300 --> 00:02:48,910 We called it too. 36 00:02:49,270 --> 00:02:52,680 I meant to Avatar picture. 37 00:02:52,840 --> 00:02:55,100 I've been working on that create account Visi for too long. 38 00:02:55,100 --> 00:02:55,480 All right. 39 00:02:55,560 --> 00:02:57,420 Avatar picker going to copy that. 40 00:02:57,540 --> 00:02:59,740 Jump over to Constance. 41 00:02:59,760 --> 00:03:00,530 There we go. 42 00:03:00,570 --> 00:03:01,100 Was weird. 43 00:03:01,290 --> 00:03:01,540 All right. 44 00:03:01,550 --> 00:03:02,750 I'm going to say that. 45 00:03:02,960 --> 00:03:12,150 And let's jump back over to our story board and actually let's open up our assistant editor with our 46 00:03:12,150 --> 00:03:19,740 create a count Visi selected in the summer I do mean that one because we're going to add the the action 47 00:03:19,740 --> 00:03:20,070 forward. 48 00:03:20,070 --> 00:03:21,260 If we don't already have it. 49 00:03:21,300 --> 00:03:23,580 Let's see if we have it and create a count b c 50 00:03:26,160 --> 00:03:27,900 c here. 51 00:03:28,320 --> 00:03:29,510 Hey we do already have it. 52 00:03:29,520 --> 00:03:30,720 I remember adding that now. 53 00:03:30,750 --> 00:03:31,020 OK. 54 00:03:31,020 --> 00:03:32,140 So creative. 55 00:03:32,250 --> 00:03:34,790 VC what we're going to do here. 56 00:03:34,950 --> 00:03:36,170 Pick Avatar pressed. 57 00:03:36,180 --> 00:03:37,330 OK good. 58 00:03:37,350 --> 00:03:44,580 So we were going to say perform Segway and it looks like my auto complete is on the fritz. 59 00:03:44,580 --> 00:03:48,390 I'm going to clean it holding Shift command OK. 60 00:03:48,560 --> 00:03:52,090 I clean succeeded and I say perform. 61 00:03:52,170 --> 00:03:59,610 There we go perform Segway with identifier and this identifier is to have a tar picker. 62 00:03:59,610 --> 00:04:01,700 Sender is new. 63 00:04:02,100 --> 00:04:02,390 OK. 64 00:04:02,430 --> 00:04:05,280 So when I say that and all right. 65 00:04:05,280 --> 00:04:07,000 Now let's jump back into storyboard. 66 00:04:07,350 --> 00:04:16,260 So now when we click on that button we are going to get sent on over to this empty view controller and 67 00:04:16,340 --> 00:04:18,700 let's go ahead and start adding some stuff that we need. 68 00:04:18,720 --> 00:04:25,820 We're going to button in the top left that is going to take us back to this view right here. 69 00:04:25,980 --> 00:04:33,240 And so we're going to go ahead and get rid of its title and change its image to this one is going to 70 00:04:33,240 --> 00:04:35,750 be called smack back. 71 00:04:36,000 --> 00:04:41,370 So right there puts you right there and constrain you. 72 00:04:41,430 --> 00:04:50,040 It's going to be eight from the top with margins checked and with an height had four constraints. 73 00:04:50,700 --> 00:04:55,330 They're going to need a cig mounted control right here. 74 00:04:55,980 --> 00:04:59,980 And the first thing I want to do is get rid of that awful blue tint. 75 00:05:00,000 --> 00:05:01,690 I really can't stand it. 76 00:05:01,860 --> 00:05:02,890 OK right here tent. 77 00:05:03,030 --> 00:05:05,160 Let's give it our nice blue color. 78 00:05:05,160 --> 00:05:06,530 There we go. 79 00:05:06,540 --> 00:05:09,840 All right and then we're going to change its titles right here. 80 00:05:09,960 --> 00:05:10,760 Segment zero. 81 00:05:10,770 --> 00:05:13,230 First the title is dark. 82 00:05:13,230 --> 00:05:21,850 It's going to be our default then change it to segment one and change that to light and that looks great. 83 00:05:22,080 --> 00:05:28,050 All right going to constrain this and we're going to go eight from the top with margin's checked and 84 00:05:28,080 --> 00:05:34,380 our with we're going to get to one hundred and sixty and we are going to send two of that horizontally 85 00:05:34,380 --> 00:05:35,970 in container. 86 00:05:35,970 --> 00:05:37,130 Wonderful. 87 00:05:37,140 --> 00:05:37,420 All right. 88 00:05:37,440 --> 00:05:41,380 Now let's go ahead and add in a collection view. 89 00:05:41,580 --> 00:05:51,150 So here in our library just search for collection view and just drop that in and go ahead and let's 90 00:05:51,150 --> 00:05:59,400 give this some constraints of 20 from the top zero from the left zero from the right and zero from the 91 00:05:59,490 --> 00:06:00,300 bottom. 92 00:06:00,690 --> 00:06:02,870 Add those four constraints. 93 00:06:02,880 --> 00:06:05,410 See here then here. 94 00:06:05,560 --> 00:06:06,120 See where is that. 95 00:06:06,120 --> 00:06:15,130 Here in the Cyzon Specter said the cell size to 100 and 100 just for starters. 96 00:06:19,780 --> 00:06:27,620 And then let's go ahead and add an image vu to our prototype cell right here. 97 00:06:27,620 --> 00:06:29,090 Of course it's huge. 98 00:06:29,240 --> 00:06:35,090 So we're going to resize it just a little bit and then we'll go ahead and give it its constraints. 99 00:06:35,090 --> 00:06:43,280 So this is going to be without constrained to margins checked so unchecked what 10 10 10 and 10. 100 00:06:43,280 --> 00:06:43,520 All right. 101 00:06:43,520 --> 00:06:44,780 Wonderful. 102 00:06:45,140 --> 00:06:52,190 And that is pretty much all of the UI that we are going to require here in this view control it a couple 103 00:06:52,190 --> 00:06:55,570 of things we're going to do on the collection of you though make sure you've got your collection be 104 00:06:55,590 --> 00:06:56,750 selected. 105 00:06:56,750 --> 00:07:02,120 We are going to give it some section instead so that's just some padding on the left and the right. 106 00:07:02,120 --> 00:07:06,540 We're going to give it padding of 20 on the left and right right there. 107 00:07:06,980 --> 00:07:07,190 All right. 108 00:07:07,190 --> 00:07:08,220 Wonderful. 109 00:07:08,240 --> 00:07:09,630 I'm going to save that. 110 00:07:09,830 --> 00:07:15,440 And you know what let's go ahead and create our view controller file that it's going to be hooked up 111 00:07:15,440 --> 00:07:22,940 to this view right here over here and controller and right click and say new file is going to be Cocco 112 00:07:22,940 --> 00:07:34,190 touch class subclass you view controller and call this avatar picture Visi and press next and create 113 00:07:36,160 --> 00:07:43,530 and we're going to clean up this stuff that we don't use this account or comment. 114 00:07:44,070 --> 00:07:50,850 And then we get a hold option and click on Main storyboard so that we can add our Iby outlet's it's 115 00:07:51,560 --> 00:07:56,850 school over it Hugh Grant closes right Pennel give us a little bit more room and where you're going 116 00:07:56,850 --> 00:07:59,520 to need an action for this back button. 117 00:07:59,580 --> 00:08:05,010 Forgot to set the class for for this view controllers so we do need this right panel. 118 00:08:05,070 --> 00:08:11,500 Back over to our identity inspector for the class select avatar picture visi. 119 00:08:11,940 --> 00:08:13,180 OK good. 120 00:08:13,180 --> 00:08:19,090 Now I can control drag over here and I can say back pressed. 121 00:08:19,280 --> 00:08:24,400 And this is going to be an action and touch up inside is good. 122 00:08:24,660 --> 00:08:29,450 And we're just here I'm going to write right off the bat my Sapre not perform it. 123 00:08:29,470 --> 00:08:34,600 This is going to be dismiss animated is true. 124 00:08:34,620 --> 00:08:36,480 And the completion is new. 125 00:08:36,630 --> 00:08:39,310 All right so that takes care of the back button. 126 00:08:39,330 --> 00:08:43,370 Now we're going to need an outlet for the collection of you. 127 00:08:43,560 --> 00:08:47,200 So here we are right out. 128 00:08:47,460 --> 00:08:55,310 Let's I'm going to control drag from the collection view over to our avatar bigger VC and this is going 129 00:08:55,310 --> 00:08:56,100 to be an outlet. 130 00:08:56,100 --> 00:08:59,660 I'm just going to call this collection view. 131 00:08:59,850 --> 00:09:08,170 I'm going to say connect and then I'm going to grab the segmented control and get an outlet here. 132 00:09:08,790 --> 00:09:14,620 And this is there is going to call this segment control and that's an outlet. 133 00:09:14,630 --> 00:09:16,110 We need to connect. 134 00:09:16,620 --> 00:09:16,830 OK. 135 00:09:16,830 --> 00:09:24,690 Now remember when we could go on this we want to go back and forth between the dark and the light Avatar 136 00:09:24,720 --> 00:09:25,340 images. 137 00:09:25,440 --> 00:09:29,090 So we're also going to need an IP action for the segmented control. 138 00:09:29,100 --> 00:09:31,170 So again control dragging. 139 00:09:31,320 --> 00:09:34,650 We're going to make an action and the event. 140 00:09:34,800 --> 00:09:38,010 There's a few here but the event that we want is the value changed. 141 00:09:38,010 --> 00:09:44,640 So whenever we click on a different one then than what is selected in the segment to control this function 142 00:09:44,640 --> 00:09:46,620 is going to be called a value changed. 143 00:09:46,620 --> 00:09:51,910 All right and we're going to name this segment control changed. 144 00:09:52,130 --> 00:09:52,740 All right. 145 00:09:53,010 --> 00:09:54,470 Looks good. 146 00:09:55,320 --> 00:09:59,740 All right jump in back closing or assistant editor now we're just here in our topic. 147 00:09:59,740 --> 00:10:02,960 VC What do we need next quiz. 148 00:10:03,120 --> 00:10:08,430 We need to be able to work with collection views so we need to implement our protocols. 149 00:10:08,430 --> 00:10:09,010 That's right. 150 00:10:09,240 --> 00:10:20,190 So it is going to take a collection view delegate UI collection view a data source and a little tip 151 00:10:20,190 --> 00:10:25,150 you don't actually need to take out the entire thing and doesn't even need to be in the order that someone 152 00:10:25,180 --> 00:10:31,610 write you like collection them are going to write flow and there we go you collection view delegate 153 00:10:31,610 --> 00:10:35,550 flow lay out instead of having to type out that whole thing you're able to just get the pop right up 154 00:10:36,320 --> 00:10:36,910 and there we go. 155 00:10:36,900 --> 00:10:39,480 So we have added our protocols. 156 00:10:39,480 --> 00:10:43,570 Now we need to set our delegate and data source. 157 00:10:43,720 --> 00:10:50,200 So when I say collection the dot delegate is equal to self. 158 00:10:50,220 --> 00:10:55,530 So if we click on delegate this is just saying the description says the object that acts as the delegate 159 00:10:55,590 --> 00:11:00,600 of the collection view and the delegate is this you control. 160 00:11:00,600 --> 00:11:07,620 That's why we're setting it to self then we're going to say collection the data source is also self 161 00:11:08,530 --> 00:11:10,300 that's going to see this and build it. 162 00:11:10,310 --> 00:11:16,270 And she gets some errors because now that we have implemented our protocols we need to conform to them. 163 00:11:16,280 --> 00:11:18,770 So let's go ahead and do that. 164 00:11:18,980 --> 00:11:19,480 We need. 165 00:11:19,520 --> 00:11:27,000 So for item add sulphur item and that's the one we want and just for now we're going to see a return 166 00:11:27,020 --> 00:11:30,100 a UI collection. 167 00:11:30,140 --> 00:11:33,300 So it's good. 168 00:11:33,320 --> 00:11:38,770 Next step we need to know how many sections we have Serenus a number of sections and only have one section 169 00:11:38,780 --> 00:11:46,130 so we're going to return one and then we're going need to know how many items are in the sections or 170 00:11:46,130 --> 00:11:54,920 in a number of items in section and if we pop over to our assets we see that we have numbered 0 through 171 00:11:54,920 --> 00:11:56,110 27. 172 00:11:56,210 --> 00:11:59,570 So we have in total 28. 173 00:11:59,620 --> 00:12:03,010 So return 28 items. 174 00:12:03,120 --> 00:12:05,700 All right go ahead and build that and see how that looks. 175 00:12:05,880 --> 00:12:12,780 All right so the build was successful but we could probably even run this and if I come over here over 176 00:12:12,780 --> 00:12:16,300 here and have an account click on it. 177 00:12:16,450 --> 00:12:20,060 Oh we got a crash and see what happened. 178 00:12:21,970 --> 00:12:26,440 So for item does not have a reuse identifier cells must be retrieved by calling. 179 00:12:26,460 --> 00:12:33,040 OK so you get to do a couple of things here in our self or item at thingamajigs So what we're going 180 00:12:33,040 --> 00:12:37,870 to do is we need to create a custom class for our cell. 181 00:12:37,930 --> 00:12:39,340 Let's go ahead and do that right now. 182 00:12:39,430 --> 00:12:45,880 So it's a view and I'm going to see a new file and this is going to be a cook touch class and it's going 183 00:12:45,880 --> 00:12:52,970 to be of subclass UI collection that you sell. 184 00:12:53,140 --> 00:12:55,510 And this can be called Avatar. 185 00:12:55,600 --> 00:13:05,410 So I'm going to say next I said now we have our custom class for the avatar so let's go ahead and open 186 00:13:05,410 --> 00:13:12,370 up our main story board and the assistant editor and we're going to set our prototype so here equal 187 00:13:12,370 --> 00:13:19,660 to this new avatar so class with the collection view item selected here we're going to go to its class 188 00:13:19,720 --> 00:13:21,790 and say Avatar. 189 00:13:21,970 --> 00:13:22,730 So. 190 00:13:23,070 --> 00:13:30,160 So now with that done we can select our image in here and we can drag over and create an outlet here 191 00:13:30,160 --> 00:13:31,810 in our avatar cell class. 192 00:13:31,810 --> 00:13:36,540 And here we can see a tire image can connect that. 193 00:13:36,580 --> 00:13:39,640 And that's pretty much all of the connections that we need. 194 00:13:39,640 --> 00:13:41,390 It's a pretty simple cell. 195 00:13:41,680 --> 00:13:43,200 So we're going to come back here. 196 00:13:43,540 --> 00:13:51,390 And let's go ahead and actually set up our our view and our functions are going to be creating as well. 197 00:13:51,640 --> 00:14:00,040 So first I'm going to say awake from NIB so delete that placeholder if you click on a weight from NIB. 198 00:14:00,070 --> 00:14:05,710 It says it prepares the receiver for a service for service after it has been loaded from an Interface 199 00:14:05,710 --> 00:14:08,220 Builder or archive or NIB file. 200 00:14:08,240 --> 00:14:13,520 I so this is the first thing that's called when it wakes up from being a NIB. 201 00:14:13,540 --> 00:14:13,750 All right. 202 00:14:13,750 --> 00:14:18,950 And so we are going to say it also says let's see here. 203 00:14:19,030 --> 00:14:24,580 Just wanted to show you this other thing says you must call the super implementation awake from nib 204 00:14:24,930 --> 00:14:29,820 to your parent class the opportunity to perform any additional initialization they require. 205 00:14:29,820 --> 00:14:33,770 All right so we're going to say super dot awake from NIB. 206 00:14:33,790 --> 00:14:37,790 There you are and then we're going to create a function here. 207 00:14:37,800 --> 00:14:40,000 Call this set up. 208 00:14:40,950 --> 00:14:51,500 Can and we look at our design mockups it looks like our cells have a background gray and rounded corners 209 00:14:51,510 --> 00:14:51,940 OK. 210 00:14:52,000 --> 00:14:55,230 So let's go ahead and add that here. 211 00:14:55,260 --> 00:15:08,360 We're going to see soft layer dubbed back ground color is equal to eye color dot light gray C-g color. 212 00:15:08,750 --> 00:15:10,200 And Marina itself that 213 00:15:13,060 --> 00:15:18,630 there corner radius equal to 10. 214 00:15:19,100 --> 00:15:26,250 And then when you say self that clips two bounds is equal to true. 215 00:15:26,330 --> 00:15:36,330 And I would just make sure that the view doesn't spill outside of the corner radius corners there. 216 00:15:36,550 --> 00:15:36,820 OK. 217 00:15:36,830 --> 00:15:45,190 So go ahead and say this and let's jump in to our main story board and we need to add a reuse identifier 218 00:15:45,200 --> 00:15:47,730 that was one of the reasons for the crash. 219 00:15:47,990 --> 00:15:49,990 So our avatars cell. 220 00:15:50,090 --> 00:15:57,730 See here here in the recent specter under identifier we need to say give this reuse identifier. 221 00:15:57,730 --> 00:15:59,640 So I want to see Avatar. 222 00:16:00,050 --> 00:16:02,310 So that's how reuse identifiers. 223 00:16:02,330 --> 00:16:07,720 Copy that and jump over to our avatar picker visi. 224 00:16:08,330 --> 00:16:18,320 And here in our cell for item at function I'm going to say if that cell is equal to collection 225 00:16:20,880 --> 00:16:33,160 the U dot D Q reusable cell with reuse identifier and our reuse identifier is that I copy that. 226 00:16:33,160 --> 00:16:35,550 Yeah Avatar cell 4. 227 00:16:35,680 --> 00:16:41,300 And that's just index path curly brace. 228 00:16:41,580 --> 00:16:50,460 So if we are able to get a sale deed qued and the reuse identifier for it is Avatar's sell then we are 229 00:16:50,460 --> 00:17:01,230 going to let's just return that step and we need to cast this though we need to say as Avatar so else 230 00:17:02,070 --> 00:17:09,760 we're just going to return an empty habitat or come on out to compete. 231 00:17:09,900 --> 00:17:10,780 So there you go. 232 00:17:12,200 --> 00:17:14,770 So save that and run it and see how that looks. 233 00:17:14,910 --> 00:17:19,460 Well we should see is just a whole bunch of rounded gray squares. 234 00:17:19,810 --> 00:17:24,780 And click here because log in don't have an account. 235 00:17:24,780 --> 00:17:26,400 Click here. 236 00:17:26,400 --> 00:17:29,370 And you know what I think I forgot to do. 237 00:17:29,370 --> 00:17:30,360 Silly me. 238 00:17:30,360 --> 00:17:36,570 Here in the amateur cell indeed we did not say did not put the function we call the function that we 239 00:17:36,570 --> 00:17:36,990 created. 240 00:17:36,990 --> 00:17:39,300 Try that one more time run. 241 00:17:39,430 --> 00:17:42,650 I'm going to keep your log in. 242 00:17:42,750 --> 00:17:44,100 I don't have an account. 243 00:17:44,100 --> 00:17:45,120 She was after all right. 244 00:17:45,120 --> 00:17:46,640 There we go. 245 00:17:47,140 --> 00:17:47,670 Yeah right. 246 00:17:47,680 --> 00:17:51,620 So we're making progress. 247 00:17:51,810 --> 00:17:55,290 You know how far how long we've been going over 20 minutes. 248 00:17:55,290 --> 00:17:57,270 Let's go ahead and stop this. 249 00:17:57,270 --> 00:17:59,190 This is a pretty good stopping point. 250 00:17:59,190 --> 00:18:05,660 We got our collection views set up and the next one is the rule. 251 00:18:05,670 --> 00:18:13,290 Just go ahead and finish up the rest of the logic to show the specific and the correct Avatar images 252 00:18:13,290 --> 00:18:14,840 here will get to 2. 253 00:18:14,840 --> 00:18:22,440 Or you can click on them and set that as the user's avatar image and maybe even will start working on 254 00:18:22,440 --> 00:18:24,080 the background color. 255 00:18:24,270 --> 00:18:27,340 All right so making some good progress here. 256 00:18:27,420 --> 00:18:29,370 I hope you guys are having fun. 257 00:18:29,370 --> 00:18:36,550 I'm going to before we finish up I'm going to go ahead and commit and see if our changes you want to 258 00:18:36,570 --> 00:18:47,950 say get status to get and Dr. get to commit Dasch am and this is less lesson 13 259 00:18:50,410 --> 00:18:54,540 and with that I will see you guys all in the next one.