1 00:00:07,120 --> 00:00:12,000 Hey guys what's going on this is Caleb with Dev slopes and in this video we're going to build our notes 2 00:00:12,000 --> 00:00:12,430 sell. 3 00:00:12,430 --> 00:00:17,530 We're going to create a subclass and we're going to wire it up so that we can load our dummy data into 4 00:00:17,530 --> 00:00:18,310 our table view. 5 00:00:18,310 --> 00:00:20,390 It's going to be so stinking cool. 6 00:00:20,440 --> 00:00:27,410 So pull open your project and let's do it go in the main storyboard and go over to the notes. 7 00:00:27,410 --> 00:00:33,220 VC K and we're going to be building it out right here in this prototype cell like so. 8 00:00:33,370 --> 00:00:38,080 And this would actually be a perfect time to pull in the assets that you downloaded with the source 9 00:00:38,080 --> 00:00:42,730 code of this project which if you haven't done that yet you can do that by tapping on the little folder 10 00:00:42,730 --> 00:00:44,410 with the download icon arrow. 11 00:00:44,590 --> 00:00:45,060 And. 12 00:00:45,070 --> 00:00:45,360 OK. 13 00:00:45,370 --> 00:00:47,600 So let's go ahead and go into the assets. 14 00:00:47,760 --> 00:00:53,320 The assets folder drag these in and that is going to be the lock image that shows up on the cell when 15 00:00:53,320 --> 00:00:54,600 a cell is locked. 16 00:00:54,610 --> 00:00:59,200 So go ahead and head back into Main storyboard like so. 17 00:00:59,410 --> 00:01:03,450 And we're going to go ahead and drag on that little image now. 18 00:01:03,460 --> 00:01:09,040 So go ahead and search I image you drag it on and we're going to go ahead and resize this of course 19 00:01:09,100 --> 00:01:13,820 so it fits properly in this cell just like so. 20 00:01:13,870 --> 00:01:15,380 Boom. 21 00:01:16,030 --> 00:01:16,810 Boom. 22 00:01:19,060 --> 00:01:19,460 Boom. 23 00:01:19,460 --> 00:01:19,910 There we go. 24 00:01:19,910 --> 00:01:20,790 OK. 25 00:01:21,170 --> 00:01:25,610 So let's do this let's keep going. 26 00:01:27,310 --> 00:01:30,460 And we're going to go ahead and just leave that there for now. 27 00:01:30,460 --> 00:01:32,000 That looks pretty good. 28 00:01:32,380 --> 00:01:33,330 OK. 29 00:01:33,820 --> 00:01:42,250 Let's go ahead and drag on a UI label like so and go ahead and drop it right there and pull it down 30 00:01:42,250 --> 00:01:46,980 to about here so that it snaps nicely right there at the bottom. 31 00:01:46,990 --> 00:01:50,380 And with this cell or with the image I mean. 32 00:01:50,380 --> 00:01:53,770 And so now we're going to do is we're going to go ahead and actually pin this. 33 00:01:54,220 --> 00:02:01,150 Let's do eight from the top eight from the left eight from the bottom and then we're going to pin it 34 00:02:01,210 --> 00:02:07,810 eight as well from the image view like so now what we're going to do is we're going to pin this image 35 00:02:07,810 --> 00:02:13,390 view from the top eight from the right eight from the bottom. 36 00:02:13,570 --> 00:02:16,690 And then we're going to give it a fixed width and height as well. 37 00:02:17,050 --> 00:02:17,630 OK. 38 00:02:17,870 --> 00:02:20,700 Well no you know what let's just give it a fixed width. 39 00:02:20,710 --> 00:02:23,920 How about that let's do a fixed width of 40. 40 00:02:23,920 --> 00:02:26,020 All right we added constraints. 41 00:02:26,020 --> 00:02:27,630 That's awesome. 42 00:02:27,670 --> 00:02:32,260 But it appears that we did not set a constraint properly. 43 00:02:32,280 --> 00:02:33,900 Yeah we always said 88. 44 00:02:34,150 --> 00:02:35,620 It should be eight. 45 00:02:35,620 --> 00:02:36,530 All right. 46 00:02:36,700 --> 00:02:37,430 Very cool. 47 00:02:37,450 --> 00:02:43,090 This looks great but I don't like that the height is all messed up so I'm actually going to go ahead 48 00:02:43,090 --> 00:02:45,790 and just get rid of all the constraints and redo them. 49 00:02:45,790 --> 00:02:48,310 Sometimes it helps just to clear everything out. 50 00:02:48,340 --> 00:02:53,980 We're going to do eight from the top eight from the right and eight from the bottom and we're going 51 00:02:53,980 --> 00:02:56,260 to go ahead and. 52 00:02:56,560 --> 00:02:58,630 Yeah give it a fixed width of. 53 00:02:58,630 --> 00:03:01,930 How about I don't know 30. 54 00:03:01,930 --> 00:03:04,700 That way it looks a little more square. 55 00:03:04,810 --> 00:03:05,730 That look good. 56 00:03:05,740 --> 00:03:06,790 Let's see. 57 00:03:06,900 --> 00:03:07,930 That's pretty good. 58 00:03:07,930 --> 00:03:08,990 That's pretty good. 59 00:03:09,220 --> 00:03:13,530 And now of course this needs to be constrained again from the right. 60 00:03:13,840 --> 00:03:15,130 So it looks perfect. 61 00:03:15,130 --> 00:03:16,110 Beautiful. 62 00:03:16,510 --> 00:03:22,210 All right so I think I actually want to bring in the left side a little bit more so fix the leading 63 00:03:22,210 --> 00:03:27,700 to be actually 20 in from the left and then we're going to change the font here. 64 00:03:27,700 --> 00:03:36,940 So go ahead and reduce the font size down to about how about 14 and yeah let's go ahead and just name 65 00:03:36,940 --> 00:03:40,080 this message label. 66 00:03:40,510 --> 00:03:41,230 That's fine. 67 00:03:41,350 --> 00:03:42,530 Just so we know what it is. 68 00:03:42,790 --> 00:03:47,610 And let's go ahead and fill this with a lock image just to see what it would look like. 69 00:03:47,650 --> 00:03:51,900 Change it to Aspect fit so that it stays in its aspect ratio. 70 00:03:52,120 --> 00:03:54,570 And you know what this already looks a little bit too big. 71 00:03:54,570 --> 00:04:01,360 So I think I'm going to go ahead and use our constraints here to pull this in from the top and bottom 72 00:04:01,360 --> 00:04:01,900 a little more. 73 00:04:01,900 --> 00:04:03,430 How about 16. 74 00:04:03,710 --> 00:04:06,240 Well that's way too much how about 10. 75 00:04:06,250 --> 00:04:11,630 And then from the top we'll also do 10 k that looks great. 76 00:04:11,630 --> 00:04:16,850 So our cell is now built this is going to be used to show multiple lines of text though so we should 77 00:04:16,850 --> 00:04:22,370 add one two or three lines of text that looks pretty good. 78 00:04:22,730 --> 00:04:27,440 And let's think it's centered that looks really good if there's more than one that will be centered 79 00:04:27,440 --> 00:04:27,880 as well. 80 00:04:27,890 --> 00:04:29,220 More than one line I mean. 81 00:04:29,300 --> 00:04:33,680 And so now we're going to go ahead and create our custom cell subclass. 82 00:04:33,680 --> 00:04:41,840 So right click on view click new file Cocco touch class and this is going to be of type UI table view 83 00:04:42,880 --> 00:04:43,750 cell. 84 00:04:44,060 --> 00:04:47,950 OK and we'll just call it no cell. 85 00:04:48,640 --> 00:04:55,290 Click next click Create and now go back to main storyboard and we're going to set the identity of this 86 00:04:55,290 --> 00:04:56,100 table view cell. 87 00:04:56,130 --> 00:05:01,740 So select the table cell like so select the identity inspector and we're going to just call it note 88 00:05:02,070 --> 00:05:05,080 cell just like that. 89 00:05:05,100 --> 00:05:09,180 Now while we're here we should also set the reuse identifier because we're going to need that in our 90 00:05:09,180 --> 00:05:09,880 table view. 91 00:05:09,900 --> 00:05:16,020 So copy the class name and set the reuse identifier to be the same but replace the capital and with 92 00:05:16,020 --> 00:05:17,230 a lowercase N.. 93 00:05:17,310 --> 00:05:18,140 All right. 94 00:05:18,480 --> 00:05:20,210 So that looks great. 95 00:05:20,250 --> 00:05:24,990 Let's pull open the assistant editor and let's wire this up now with some Iby outlet so we can actually 96 00:05:24,990 --> 00:05:27,590 show message text on the label. 97 00:05:27,690 --> 00:05:33,510 So select notes cell and then it's not going to automatically pop up so we're going to have to go find 98 00:05:33,510 --> 00:05:34,190 it ourself. 99 00:05:34,200 --> 00:05:36,710 Like so click on notes cell. 100 00:05:36,840 --> 00:05:41,370 And now what we can do is we can right click and drag and create an outlet. 101 00:05:41,370 --> 00:05:45,920 This one's going to be message label very cool. 102 00:05:46,280 --> 00:05:51,150 This is going to be lock image view. 103 00:05:51,590 --> 00:05:52,150 All right. 104 00:05:52,400 --> 00:05:58,310 So I just right click right clicked and dragged over to my subclassed and then released creating those 105 00:05:58,310 --> 00:05:59,010 outlets. 106 00:05:59,030 --> 00:06:03,120 So let's go ahead and let's get rid of selected we're not going to use it. 107 00:06:03,360 --> 00:06:06,510 And yeah this is looking pretty good. 108 00:06:06,530 --> 00:06:08,790 Let's think if we need anything else. 109 00:06:08,930 --> 00:06:11,810 We're not going to actually override anything in a week from now. 110 00:06:11,810 --> 00:06:18,860 We're not really customizing the appearance but we do need a way to configure how this data is loaded 111 00:06:19,010 --> 00:06:21,220 whether there's an image or whether there is not. 112 00:06:21,440 --> 00:06:25,860 So what we're going to do is we're going to go ahead and create a function called configure cell. 113 00:06:25,880 --> 00:06:33,670 So type phunk configure cell and we need to think what are we passing in to each cell. 114 00:06:33,820 --> 00:06:34,790 A note right. 115 00:06:34,790 --> 00:06:37,200 And a note has a message and a lock status. 116 00:06:37,220 --> 00:06:43,470 So go ahead and type lock a configure cell with note like so and that type is known. 117 00:06:43,490 --> 00:06:45,620 Because we've already created that model. 118 00:06:45,650 --> 00:06:56,540 Now what we need to do is we need to say if Note dot lock status is equal to locked we need to say lock 119 00:06:56,540 --> 00:07:03,400 image view is hidden is false meaning it's showing on the screen if it's locked. 120 00:07:03,560 --> 00:07:09,860 Otherwise we're going to go ahead and say lock image view that is hidden is true because if it's unlocked 121 00:07:09,950 --> 00:07:11,350 the image should not be there. 122 00:07:11,360 --> 00:07:13,670 So now we're going to go ahead and configure the message. 123 00:07:13,730 --> 00:07:18,710 And if the lock status is locked we want the note to say this message is locked. 124 00:07:18,710 --> 00:07:19,910 Tap to unlock. 125 00:07:19,910 --> 00:07:32,000 So go ahead and say message label text is equal to this note is locked unlock to read OK. 126 00:07:32,300 --> 00:07:33,320 That sounds cool. 127 00:07:33,710 --> 00:07:36,520 And if it's not locked we're going to set it to be equal to. 128 00:07:36,590 --> 00:07:44,160 Note that message so otherwise message is labeled that text is equal to note dot message. 129 00:07:44,220 --> 00:07:46,560 OK the 10:01 when we can figure this out. 130 00:07:46,850 --> 00:07:51,560 So this will basically allow us to configure the cell as locked or unlocked. 131 00:07:51,560 --> 00:07:53,640 Very very cool stuff. 132 00:07:53,660 --> 00:07:58,760 And now what we need to do is we need to go load this dummy data into our table view. 133 00:07:58,760 --> 00:08:05,540 Let's see if we can actually present our dummy data that we wrote in our note objects swift file to 134 00:08:05,540 --> 00:08:06,980 present in our view controller. 135 00:08:06,980 --> 00:08:13,370 So go into no VC collapse the assistant editor and we're going to go ahead and do some cool stuff right 136 00:08:13,370 --> 00:08:15,390 here in self-growth index path. 137 00:08:15,410 --> 00:08:20,770 So get rid of that generic return and we're going to create a cell using guard lead. 138 00:08:20,840 --> 00:08:22,200 So go ahead and type guard. 139 00:08:22,250 --> 00:08:26,650 Let cell equals table view. 140 00:08:26,780 --> 00:08:30,890 Dequeue reusable cell with identifier for index path. 141 00:08:30,890 --> 00:08:38,600 And what this does is it's going to return a reusable cell that can be loaded on our table view. 142 00:08:38,600 --> 00:08:40,370 Now the identifier we just set. 143 00:08:40,400 --> 00:08:45,580 Remember we said it to be note cell k with the lowercase. 144 00:08:45,590 --> 00:08:50,090 And now the index path we're just going to pass in from our function here and that's basically just 145 00:08:50,220 --> 00:08:53,850 at what place does it show up or should it show up in the table view. 146 00:08:54,020 --> 00:08:59,900 So just pass in the index path like so but since we're using Gardley that we need to say else meaning 147 00:08:59,930 --> 00:09:07,920 if we can't dequeue a reusable cell we're going to go ahead and pass in and return a blank table you 148 00:09:07,980 --> 00:09:09,680 sell like so. 149 00:09:09,990 --> 00:09:10,350 OK. 150 00:09:10,400 --> 00:09:16,640 So now we have an instance of our note cell but it's not actually going to be of type notes so unless 151 00:09:16,640 --> 00:09:22,910 we tell it explicitly because look dequeue reusable cell if you can see it what's not going to let us 152 00:09:22,910 --> 00:09:23,260 see it. 153 00:09:23,270 --> 00:09:28,670 But basically what it does is it returns a table view cell. 154 00:09:28,670 --> 00:09:30,910 But we want this to be of type notes. 155 00:09:30,920 --> 00:09:37,420 So we need to say as note cell like so. 156 00:09:37,850 --> 00:09:42,950 And now what that's going to do is it's going to create an instance of note cell and we need that because 157 00:09:42,950 --> 00:09:44,450 we need to pass in our note. 158 00:09:44,480 --> 00:09:44,890 Okay. 159 00:09:44,930 --> 00:09:51,260 So go ahead and say cell dot configure cell and we're going to pass it a note but how is it going to 160 00:09:51,260 --> 00:09:52,140 get the note. 161 00:09:52,400 --> 00:09:55,410 Well we have an array of notes. 162 00:09:55,520 --> 00:10:00,390 So what we're going to do first is we're actually going to going to set up the number of rows in Section. 163 00:10:00,410 --> 00:10:01,270 If you think about it. 164 00:10:01,310 --> 00:10:02,290 We have three notes. 165 00:10:02,300 --> 00:10:05,660 We should have three rows but how are we going to get that. 166 00:10:05,660 --> 00:10:13,160 We can go ahead and access notes array dot count there's three items we want to show three rows and 167 00:10:13,160 --> 00:10:17,450 that's also how we're going to pull out the exact notes that we need because this think of this like 168 00:10:17,450 --> 00:10:22,280 a for loop that's going to populate our table view what we're going to do is we're going to go through 169 00:10:22,370 --> 00:10:27,740 the notes array what we're going to do is we're going to go through the count that we have which is 170 00:10:27,740 --> 00:10:33,380 three and for each of those items we're going to create a cell pass and a note configure it return the 171 00:10:33,380 --> 00:10:34,720 cell to the table view. 172 00:10:34,730 --> 00:10:37,360 So what we can do is we can go through our notes array. 173 00:10:37,460 --> 00:10:41,650 And for the first item in the table view we can pull out the first item in the notes array. 174 00:10:41,660 --> 00:10:49,970 So to do that go ahead and call notes array and we're going to get the item at the index path dot row. 175 00:10:49,970 --> 00:10:52,070 Now if you're thinking what does this mean. 176 00:10:52,070 --> 00:10:53,250 Let me explain. 177 00:10:53,780 --> 00:10:54,970 We have a Notes array. 178 00:10:54,980 --> 00:11:01,520 If I were to pull out 0 that would pull out the first item in the array right now index path dot row 179 00:11:01,520 --> 00:11:05,520 is an integer value that represents the row of the table view. 180 00:11:05,690 --> 00:11:09,850 So the first item in the table view is actually the index 0 right. 181 00:11:09,860 --> 00:11:11,160 Just like in an array. 182 00:11:11,420 --> 00:11:13,460 So I can pass in zero. 183 00:11:13,490 --> 00:11:16,810 And that will pull out the note at index 0. 184 00:11:16,820 --> 00:11:20,900 Then I can create a constant for this and pass it in as my notes. 185 00:11:20,900 --> 00:11:25,850 So let note equals notes array index path row. 186 00:11:25,850 --> 00:11:33,020 So I'll pull out the first item and pass it in then I'll return the cell and then I'll move on to the 187 00:11:33,020 --> 00:11:38,930 next cell or create an instance I will create a note from the second item then I'll pass in that second 188 00:11:38,930 --> 00:11:40,040 item and return the cell. 189 00:11:40,040 --> 00:11:44,130 I'll do that for all the cells until we're done with our count which is three. 190 00:11:44,150 --> 00:11:45,640 So go ahead and build and run. 191 00:11:45,650 --> 00:11:50,650 And when the simulator pulls up we'll be able to see our project the way that we're hoping. 192 00:11:51,170 --> 00:11:53,010 Hey look at that. 193 00:11:53,030 --> 00:11:55,230 This note is locked unlocked to read. 194 00:11:55,280 --> 00:11:58,610 I love learning about Touch ID and face ID at the same time. 195 00:11:58,730 --> 00:12:01,580 Thanks Apple for making such a lobola so very cool. 196 00:12:01,580 --> 00:12:04,040 We can select these notes at the moment. 197 00:12:04,040 --> 00:12:09,800 They don't do anything but you know what I think I want to go ahead and actually change the font size. 198 00:12:09,800 --> 00:12:13,990 I want to make it a little bit bigger just so that we can read it easier. 199 00:12:14,030 --> 00:12:16,080 Let's make it maybe 16. 200 00:12:16,310 --> 00:12:24,170 And you know me I hate Avenir next so I'm going to actually select all the items in here that have text 201 00:12:24,320 --> 00:12:28,610 in them like are buttons and I'm going to go ahead and actually. 202 00:12:28,630 --> 00:12:30,170 Well can I change the font like that. 203 00:12:30,170 --> 00:12:31,010 No I can't. 204 00:12:31,250 --> 00:12:31,800 OK. 205 00:12:31,970 --> 00:12:33,160 I can't handle the system. 206 00:12:33,200 --> 00:12:36,090 I'm going to go and custom Avenir next. 207 00:12:36,110 --> 00:12:37,020 Let's just do. 208 00:12:37,040 --> 00:12:38,360 Maybe medium. 209 00:12:38,570 --> 00:12:39,570 That looks good. 210 00:12:39,890 --> 00:12:41,100 OK let's go into here. 211 00:12:41,300 --> 00:12:47,240 Let's set the font to your next as well and we'll change it to 18 again. 212 00:12:47,450 --> 00:12:49,280 OK that looks way better. 213 00:12:49,310 --> 00:12:54,810 The lock note button also System font changed that to custom Avenir next. 214 00:12:54,890 --> 00:12:57,260 And you know what Boulder's great. 215 00:12:57,350 --> 00:12:59,750 Seventeen doesn't look so great but how about 20. 216 00:12:59,750 --> 00:13:01,140 It looks awesome. 217 00:13:01,190 --> 00:13:01,940 Secure notes. 218 00:13:01,940 --> 00:13:05,080 That's also in the system font which is gross. 219 00:13:05,180 --> 00:13:09,840 So we need to actually go to System then back to custom choose Avenir next. 220 00:13:09,850 --> 00:13:15,270 And let's make it a size 20 and Demi bold. 221 00:13:15,470 --> 00:13:17,110 Yeah it looks pretty good. 222 00:13:17,510 --> 00:13:22,390 OK so let's build and run it again let's see how our changes impacted how it looks. 223 00:13:22,550 --> 00:13:24,890 And then we're going to go ahead and move on to the next video. 224 00:13:25,160 --> 00:13:25,830 Let's see how we did. 225 00:13:25,850 --> 00:13:28,190 Oh that is so much better. 226 00:13:28,250 --> 00:13:30,070 You know what the font's a little too big now. 227 00:13:30,080 --> 00:13:32,910 So let's reduce it to 16 maybe four. 228 00:13:33,020 --> 00:13:41,280 Well let's try 15 say 15 looks I don't really like odd numbered fonts let's do 14 Let's see how that 229 00:13:41,280 --> 00:13:44,320 looks might be kind of cool. 230 00:13:45,740 --> 00:13:47,290 Here we go. 231 00:13:47,810 --> 00:13:48,040 Yeah. 232 00:13:48,050 --> 00:13:49,160 You know what that looks fine. 233 00:13:49,160 --> 00:13:51,160 It's a little small but it looks good. 234 00:13:51,260 --> 00:13:52,380 So we have our notes. 235 00:13:52,430 --> 00:13:55,480 We have the available notes right there. 236 00:13:55,940 --> 00:13:58,740 Oh you know what maybe the issue is that the cell is too small. 237 00:13:58,970 --> 00:14:06,110 Let's change the size here and 90 and then let's select the cell as well and change the row height to 238 00:14:06,110 --> 00:14:11,280 90 and then we can change the font size up to something a little bigger. 239 00:14:11,570 --> 00:14:16,160 Like maybe not 80 maybe 16 let's build and run. 240 00:14:16,170 --> 00:14:18,970 Let's see if 90 looks good we might have to reduce that a bit. 241 00:14:18,980 --> 00:14:26,270 But guys this is what a what a lot of development is is making things look nicer and making sure they 242 00:14:26,270 --> 00:14:27,340 look good. 243 00:14:27,380 --> 00:14:31,130 You know what that's still too big let's try 75. 244 00:14:31,400 --> 00:14:37,250 Select the table view and also set the row height to 75 build and run. 245 00:14:37,310 --> 00:14:37,990 This should be all. 246 00:14:38,000 --> 00:14:41,510 And then we're going to move on to the next video where we're going to write some helper functions that 247 00:14:41,540 --> 00:14:46,400 are going to help us lock and unlock our notes of boom that is exactly right. 248 00:14:46,400 --> 00:14:48,140 That's what I was hoping it would look like. 249 00:14:48,170 --> 00:14:53,570 So we have locked those unlocked notes and in the next video you know I think it would make more sense 250 00:14:53,570 --> 00:14:59,750 to actually connect this detail VC and pass the note over and then after that we're going to write some 251 00:14:59,750 --> 00:15:04,360 helper functions to utilize our lock button to lock the note. 252 00:15:04,370 --> 00:15:05,920 So that will be really really cool stuff. 253 00:15:05,930 --> 00:15:08,880 Let's head over to the next video and let's do that now.