1 00:00:08,080 --> 00:00:12,710 Hey everybody this is Caleb with Debb slopes dot com and in this video we're going to build out the 2 00:00:12,740 --> 00:00:13,680 goal cell. 3 00:00:13,730 --> 00:00:18,380 We're going to set up its subclass and we're also going to set up some outlets and actions so that we 4 00:00:18,380 --> 00:00:20,000 can properly interface with it. 5 00:00:20,030 --> 00:00:22,770 So let's get right down to it. 6 00:00:22,880 --> 00:00:29,240 Go ahead and open up your X code project and we're going to go ahead and build out our prototype cell 7 00:00:29,510 --> 00:00:30,860 for our you know table view. 8 00:00:30,860 --> 00:00:35,770 So I don't really like that it's semi translucent that's just because it's hidden. 9 00:00:35,780 --> 00:00:40,930 But for this we're going to go ahead and turn hidden off so that we can see the full thing. 10 00:00:41,060 --> 00:00:45,200 So scroll down after selecting your table view and unstick hidden. 11 00:00:45,470 --> 00:00:48,440 And we'll just we'll turn that back on at the very end when we're done. 12 00:00:48,470 --> 00:00:51,580 For now we're just going to be building out our prototype cell here. 13 00:00:51,770 --> 00:00:53,670 So let's get right down to it. 14 00:00:53,990 --> 00:00:59,750 So we want to display the goal meaning like our description for what we want to accomplish. 15 00:00:59,750 --> 00:01:03,350 We want to display whether it is a short term or long term goal. 16 00:01:03,350 --> 00:01:09,320 And we also want to display our progress of how many of our goal we have accomplished so that we have 17 00:01:09,320 --> 00:01:11,720 a sense of how close we are to completing it. 18 00:01:11,720 --> 00:01:14,600 So basically we're just going to be using a lot of UI labels. 19 00:01:14,600 --> 00:01:15,970 Let's go ahead and do that now. 20 00:01:16,190 --> 00:01:21,940 Go ahead and type you I label or UI lab as I typed and drag one on OK. 21 00:01:22,160 --> 00:01:27,590 And we're going to go ahead and I'm going to duplicate it because this will be for the goal this will 22 00:01:27,590 --> 00:01:31,390 be for the type and we're going to go ahead and duplicated again. 23 00:01:31,550 --> 00:01:35,130 This is where the description is going to go and duplicated again. 24 00:01:35,150 --> 00:01:38,500 And this is where short term or long term is going to go. 25 00:01:38,720 --> 00:01:43,580 Now before we move on let's go ahead and let's close down the assistant editor we don't need it right 26 00:01:43,580 --> 00:01:44,280 now. 27 00:01:44,450 --> 00:01:48,560 And what we're actually going to do is we're going to select both of these labels and we're going to 28 00:01:48,560 --> 00:01:50,270 put them in a stack view. 29 00:01:50,300 --> 00:01:55,580 We're going to do the same thing with these two labels putting them in a stacked view and then we're 30 00:01:55,580 --> 00:02:02,120 going to select both stack views and put them into a stacked view like so we're going to create a bit 31 00:02:02,120 --> 00:02:04,640 of spacing between both of those stack views. 32 00:02:04,670 --> 00:02:06,310 Maybe 10. 33 00:02:06,360 --> 00:02:07,330 That looks good. 34 00:02:07,640 --> 00:02:14,600 And then between these two stack views we're going to also create spacing of 10 and this one is well 35 00:02:14,630 --> 00:02:16,850 create 10 points of spacing. 36 00:02:17,090 --> 00:02:22,040 And now we have nice spacing between all of them and we can now go ahead and set them up the way we 37 00:02:22,040 --> 00:02:22,400 want. 38 00:02:22,400 --> 00:02:25,070 So this will just say goal. 39 00:02:25,250 --> 00:02:25,830 All right. 40 00:02:26,210 --> 00:02:29,060 And this one is just going to say type. 41 00:02:29,060 --> 00:02:35,150 Now since this is beneath the main description it makes sense that these two are a little bit smaller 42 00:02:35,150 --> 00:02:36,160 than the rest. 43 00:02:36,200 --> 00:02:41,990 So go ahead and we're going to actually while we're at it let's change the font to custom and then set 44 00:02:41,990 --> 00:02:43,270 Avenir next. 45 00:02:43,580 --> 00:02:44,180 OK. 46 00:02:44,180 --> 00:02:48,290 Again this is up to you if you want to do this you can I just like it. 47 00:02:48,290 --> 00:02:58,010 So I'm going to change it to size 14 and then I'm going to go ahead and yeah change this font now to 48 00:02:58,010 --> 00:02:59,040 Avenir next as well. 49 00:02:59,060 --> 00:03:03,830 So change this to custom and the font to ave next. 50 00:03:03,980 --> 00:03:07,260 And I'm going to make it Demi bold because it looks. 51 00:03:07,280 --> 00:03:10,820 It should be a little bit bolder because that's the most important information that our eyes should 52 00:03:10,820 --> 00:03:14,340 be drawn to in our stacked view. 53 00:03:14,360 --> 00:03:15,890 So very cool. 54 00:03:15,950 --> 00:03:18,790 I'm going to make that size 18 I believe. 55 00:03:19,160 --> 00:03:20,760 Let's just make sure that looks good. 56 00:03:21,140 --> 00:03:31,640 And you know just to test this let's go ahead and let's let's just set an imaginary goal eat salad twice 57 00:03:32,660 --> 00:03:39,620 a week maybe that's my goal and the type that's going to be a short term. 58 00:03:39,830 --> 00:03:43,310 Well no dash was just too short term goal. 59 00:03:43,320 --> 00:03:44,090 All right. 60 00:03:44,090 --> 00:03:45,350 Very cool. 61 00:03:45,350 --> 00:03:46,300 That looks awesome. 62 00:03:46,430 --> 00:03:49,010 So we now have a goal we have a type. 63 00:03:49,160 --> 00:03:53,720 And you know as I'm looking at this I don't like that the spacing is so big between the two stacked 64 00:03:53,740 --> 00:03:54,200 use. 65 00:03:54,350 --> 00:03:58,650 So let's actually select the outermost stack for you here and let's drop it to five. 66 00:03:58,790 --> 00:04:00,790 That looks a little better. 67 00:04:01,290 --> 00:04:02,440 Yeah that's great. 68 00:04:02,660 --> 00:04:08,930 So now we need to go ahead and add on a label over here to document how many times we have eaten salads 69 00:04:08,930 --> 00:04:09,980 so that we can meet our goal. 70 00:04:09,980 --> 00:04:14,960 So go ahead and drag on a new label and we're actually going to make this one the height of the entire 71 00:04:14,960 --> 00:04:18,480 cell the way that we the way that we're doing it here. 72 00:04:18,680 --> 00:04:24,440 And we're going to go ahead and remove label and let's just set a static number of maybe 7 or so. 73 00:04:24,890 --> 00:04:25,700 OK. 74 00:04:25,910 --> 00:04:27,060 Let's center it. 75 00:04:27,080 --> 00:04:30,140 And now we need to change the font to our favorite font. 76 00:04:30,260 --> 00:04:34,160 Avenir next or my favorite font and I'm going to make it bold. 77 00:04:34,160 --> 00:04:38,330 We want it to look nice and bold and really draw their attention to that. 78 00:04:38,540 --> 00:04:43,370 K also to draw their attention because it's kind of the most important thing about our APIs. 79 00:04:43,370 --> 00:04:45,530 How close are we to achieving our goals. 80 00:04:45,560 --> 00:04:48,320 So we're going to make it nice and big so it's very easy to see. 81 00:04:48,320 --> 00:04:52,490 So I'm going to actually bump it up to twenty six maybe even 28. 82 00:04:52,670 --> 00:04:54,270 Yeah that looks good. 83 00:04:54,270 --> 00:04:54,660 OK. 84 00:04:54,680 --> 00:04:59,960 So that's great but we're going to change the color of this to actually be the same green that we're 85 00:04:59,960 --> 00:05:03,220 using in the background of our app because that just looks cool. 86 00:05:03,230 --> 00:05:04,860 I think it looks awesome that way. 87 00:05:04,880 --> 00:05:07,690 So we are super close to being done. 88 00:05:07,690 --> 00:05:11,890 However we need to set some constraints so these things don't just fly off the screen and go wherever 89 00:05:11,890 --> 00:05:12,920 the heck they want. 90 00:05:13,000 --> 00:05:19,350 So to do that go ahead and select your text you hear for your label and we're going to pin it eight 91 00:05:19,420 --> 00:05:25,570 from the top 8 from the right and eight from the bottom change seven point five to eight if you need 92 00:05:25,570 --> 00:05:26,170 to. 93 00:05:26,230 --> 00:05:29,350 And then we're going to give it a fixed width of 40. 94 00:05:29,350 --> 00:05:30,220 How about that. 95 00:05:30,520 --> 00:05:31,470 OK. 96 00:05:31,500 --> 00:05:35,980 Height doesn't matter because we've pinned to the top bottom and right we just care about the width 97 00:05:36,010 --> 00:05:39,970 So add those constraints and Austin stays in place. 98 00:05:40,000 --> 00:05:43,380 Next we need to pin our stack few in place so to do that. 99 00:05:43,390 --> 00:05:51,490 Go ahead and select the pin menu and this one looks like it is pinning to the Super view not the margins. 100 00:05:51,490 --> 00:05:55,240 So I'm going to just drag it here and that that might be OK. 101 00:05:55,690 --> 00:05:56,650 But let's just make sure. 102 00:05:56,700 --> 00:05:57,610 Yeah we're doing the right thing. 103 00:05:57,610 --> 00:05:57,840 OK. 104 00:05:57,850 --> 00:06:03,600 So pinnate 0 from the bottom zero from the left and we're going to pinnate zero from the top as well. 105 00:06:03,820 --> 00:06:10,510 And then we're going to pin it maybe 10 from the side of that 7 up there that you I label. 106 00:06:10,550 --> 00:06:13,340 OK so press enter to add those constraints. 107 00:06:13,450 --> 00:06:16,530 And as you can see it shows up just like so. 108 00:06:17,080 --> 00:06:21,880 Now this is a little bit close to the side it's a little squishy so I'm going to fix it and you can 109 00:06:21,880 --> 00:06:24,860 tell that the the labels here got a little bit messed up. 110 00:06:25,060 --> 00:06:26,780 But we will fix that as well. 111 00:06:26,860 --> 00:06:32,170 So go to your leading space constraint and change it to 10 to match the amount of space on the other 112 00:06:32,170 --> 00:06:34,980 side of this this label. 113 00:06:34,990 --> 00:06:41,500 So now we need to select our stack views here and we need to modify the way that they are filling so 114 00:06:41,500 --> 00:06:44,150 that we don't get this weird stretching here. 115 00:06:44,200 --> 00:06:45,020 OK. 116 00:06:45,160 --> 00:06:49,960 And the way we're going to do that is by clicking on our stack view and we're going to choose. 117 00:06:49,960 --> 00:06:51,680 Fill proportionally. 118 00:06:51,970 --> 00:06:56,640 That way it fills it based on the size of whatever element is in the stack view. 119 00:06:56,650 --> 00:07:02,770 So that looks great although you know what we have a ton of space between these so I think I'm also 120 00:07:02,770 --> 00:07:07,180 going to lower the stack use both to have a spacing of five 10. 121 00:07:07,180 --> 00:07:08,750 It's just a bit too much. 122 00:07:08,860 --> 00:07:10,390 So let's go ahead and do that. 123 00:07:10,390 --> 00:07:12,310 It looks great. 124 00:07:13,420 --> 00:07:14,270 That looks great. 125 00:07:14,320 --> 00:07:20,530 And now it appears that we are a little bit off of our constraints or just click the update frames button 126 00:07:20,890 --> 00:07:22,750 and it'll move it right in place. 127 00:07:22,750 --> 00:07:24,770 All right supercool This looks great. 128 00:07:24,790 --> 00:07:28,930 So now we have a label here to display our goal description. 129 00:07:28,930 --> 00:07:35,650 But what if the font is a little bit too big or what if the goal is too long it would just go to the 130 00:07:35,650 --> 00:07:38,740 end and right dot dot dot and we wouldn't know what our full goal is. 131 00:07:38,740 --> 00:07:41,820 So to fix that we're just going to set a minimum font size. 132 00:07:41,900 --> 00:07:46,510 OK that's pretty typical way to do it and a minimum font size of nine should be great. 133 00:07:46,510 --> 00:07:49,050 It'll automatically scale to fit. 134 00:07:49,330 --> 00:07:52,510 Short term is not going to matter because we're not going to stretch all the way to the side. 135 00:07:52,570 --> 00:07:55,920 And this also was never going to change size because it's just a static number. 136 00:07:55,960 --> 00:08:02,860 So you know what it might though if we had multiple like maybe we had 23 or 24 like 2 numbers it might. 137 00:08:02,860 --> 00:08:04,200 So to fix that. 138 00:08:04,200 --> 00:08:06,880 Go ahead and set a minimum font size as well. 139 00:08:06,880 --> 00:08:11,470 All right so now let's go ahead and create the code file this can interface with this. 140 00:08:11,470 --> 00:08:17,970 So to do that right click on view click new file and select Cocco touch class. 141 00:08:18,130 --> 00:08:23,960 We're going to be subclassing UI table view cell. 142 00:08:23,960 --> 00:08:24,210 OK. 143 00:08:24,400 --> 00:08:29,910 Like so and we're going to just call this gold cell and go ahead and click next. 144 00:08:29,950 --> 00:08:31,670 And we're going to save this in our app. 145 00:08:31,690 --> 00:08:34,910 Make sure that your target is selected and click Create. 146 00:08:35,370 --> 00:08:36,070 Ok really cool. 147 00:08:36,070 --> 00:08:38,870 So we have a UI table view cell. 148 00:08:38,890 --> 00:08:43,490 And you know we're not actually going to need any of this so just get rid of that for now. 149 00:08:43,510 --> 00:08:45,810 Now go back into Main storyboard. 150 00:08:45,850 --> 00:08:47,130 Select the cell. 151 00:08:47,140 --> 00:08:47,530 Right. 152 00:08:47,530 --> 00:08:50,830 Make sure that the table view cell itself is selected. 153 00:08:50,830 --> 00:08:55,880 And we're going to go to the identity inspector and give it an identity of Garcelle OK. 154 00:08:55,960 --> 00:08:57,310 Really cool. 155 00:08:57,310 --> 00:09:04,570 While we're at it we're also going to need to set a real identifier for when the cell is cued by the 156 00:09:04,570 --> 00:09:05,240 table view. 157 00:09:05,260 --> 00:09:09,440 So to do that go ahead and just give it a reuse identifier of Garcelle. 158 00:09:09,490 --> 00:09:12,220 Now it's convention to type a lowercase word first. 159 00:09:12,280 --> 00:09:16,650 And the camel case the rest like so by typing goes cell. 160 00:09:16,660 --> 00:09:23,230 OK now we have a reverse identifier that we can use in our table view when we dequeue the cells later 161 00:09:23,230 --> 00:09:23,740 on. 162 00:09:24,010 --> 00:09:25,650 So this is now Google cell. 163 00:09:25,650 --> 00:09:26,620 That's great. 164 00:09:26,620 --> 00:09:31,840 And so with that we can now open the assistant editor and set up the Iby outlets and Iby actions so 165 00:09:32,110 --> 00:09:34,850 select that and open it up. 166 00:09:34,870 --> 00:09:42,100 Now we need to go to automatic manual goalpost app and open the view folder and select Garcelle. 167 00:09:42,180 --> 00:09:47,860 OK now we're going to create Iby outlets to display data in here then we're going to write a configure 168 00:09:47,860 --> 00:09:54,090 cell function so that we can properly update that information with information from our core data model. 169 00:09:54,280 --> 00:10:01,560 So right click on the goal description label here and drag into Garcelle. 170 00:10:02,280 --> 00:10:03,070 Whoops. 171 00:10:04,760 --> 00:10:09,740 Go ahead and go into the stack view and select that label and we're going to drag it to our goal sell 172 00:10:09,770 --> 00:10:19,140 and we're going to just call this goal descript description label cool. 173 00:10:19,160 --> 00:10:24,170 Next we're going to go ahead and Right-Click from the short term label there and we'll call this goal 174 00:10:24,200 --> 00:10:28,490 type label because that's the type short term versus long term. 175 00:10:28,550 --> 00:10:35,750 And then we're going to go ahead and set this label here the number to be goal progress label because 176 00:10:35,750 --> 00:10:38,530 that shows our progress towards accomplishing our goal. 177 00:10:38,570 --> 00:10:40,140 Very cool. 178 00:10:40,160 --> 00:10:46,880 Next we need to write a function so that when we are actually instantiating these cells we can pass 179 00:10:46,880 --> 00:10:47,980 in the proper data. 180 00:10:48,170 --> 00:10:53,000 So to do that go ahead and type phunk configure cell. 181 00:10:53,030 --> 00:10:57,120 And when we can figure this cell we need to give it a description. 182 00:10:57,490 --> 00:10:57,960 OK. 183 00:10:58,070 --> 00:11:00,500 And we're going to get that as a string. 184 00:11:00,890 --> 00:11:07,850 Then we're going to get a type and that's going to be of type goal type which we have not yet created. 185 00:11:07,850 --> 00:11:10,890 So for now let's just go ahead and pass in a string. 186 00:11:10,910 --> 00:11:15,370 We'll create the gold type later and I'll explain all of that in a future video. 187 00:11:15,950 --> 00:11:23,840 And then we're going to need to pass in a goal progress amount of type int k. 188 00:11:24,170 --> 00:11:29,000 So we're going to get all of that information and now we can configure our Iby outlets so go ahead and 189 00:11:29,000 --> 00:11:35,280 type self goal description label text and we're gonna give it our description. 190 00:11:35,470 --> 00:11:35,750 OK. 191 00:11:35,760 --> 00:11:45,130 Next go ahead and type self goal type label text and we're going to give our goal type by passing and 192 00:11:45,140 --> 00:11:46,270 the type K. 193 00:11:46,280 --> 00:11:47,440 Now it's of type string. 194 00:11:47,440 --> 00:11:52,820 Now later it will be of a different kind but I'll describe I'll describe that later when it's time but 195 00:11:52,820 --> 00:11:58,310 for now just go ahead and pass on the string then we're going to go ahead and set a goal progress amount. 196 00:11:58,400 --> 00:12:05,120 OK so type self goal progress label dot text and we're passing in an int. 197 00:12:05,120 --> 00:12:13,240 We can't set text to be an end because look the text property of our label is expecting a string. 198 00:12:13,520 --> 00:12:21,080 But what we can do is we can call string and there's a handy little part of string called String describing. 199 00:12:21,080 --> 00:12:24,080 Now if you scroll down you can find it right here. 200 00:12:24,260 --> 00:12:31,130 String describing subject and our subject is our goal progress goal progress amount. 201 00:12:31,440 --> 00:12:36,350 OK so that will basically create a string that we've passed in this amount and it's converted it to 202 00:12:36,350 --> 00:12:40,730 a string so we will get the textual character 7 not the numerical value. 203 00:12:40,820 --> 00:12:43,490 So convert it into a nice string. 204 00:12:43,490 --> 00:12:49,520 The way we want superduper cool and you know what guys this cell is now ready to receive static data 205 00:12:49,550 --> 00:12:53,280 and we could display cells on our table view really really cool. 206 00:12:53,300 --> 00:12:59,490 We're going to do that in a little bit but this is done our UI table view cell is now properly done. 207 00:12:59,540 --> 00:13:02,090 We have built it in Interface Builder. 208 00:13:02,240 --> 00:13:08,180 We've created a subclass and we have set it up to be configured by the table view super amazing work. 209 00:13:08,180 --> 00:13:12,330 The last thing we need to do is rehired this table view and our video is done. 210 00:13:12,350 --> 00:13:14,450 So go ahead and select that table view. 211 00:13:14,630 --> 00:13:19,180 Scroll down to the bottom of the attributes and Specter and tick hidden. 212 00:13:19,340 --> 00:13:21,250 OK that's exactly what we need to do. 213 00:13:21,350 --> 00:13:26,920 And this video has done amazing job in the next video we're going to start talking about core data. 214 00:13:26,960 --> 00:13:32,960 I'm going to explain to you what it is and show you visually how it works on a fundamental level so 215 00:13:32,960 --> 00:13:37,190 that you can understand everything we're doing in the future videos that we will do by creating our 216 00:13:37,190 --> 00:13:42,680 core data entity and attributes things that I've shown you a little bit already but I have not explained 217 00:13:42,890 --> 00:13:44,540 I'm going to explain it in the next video. 218 00:13:44,810 --> 00:13:48,350 And we're going to basically look at our core data model and see what we need to do. 219 00:13:48,350 --> 00:13:50,260 So let's head over to the next video. 220 00:13:50,270 --> 00:13:52,220 Amazing job with this one and I'll see you there.