Hey guys what's going on this is Caleb with Dev slopes and in this video we're going to build our notes
sell.
We're going to create a subclass and we're going to wire it up so that we can load our dummy data into
our table view.
It's going to be so stinking cool.
So pull open your project and let's do it go in the main storyboard and go over to the notes.
VC K and we're going to be building it out right here in this prototype cell like so.
And this would actually be a perfect time to pull in the assets that you downloaded with the source
code of this project which if you haven't done that yet you can do that by tapping on the little folder
with the download icon arrow.
And.
OK.
So let's go ahead and go into the assets.
The assets folder drag these in and that is going to be the lock image that shows up on the cell when
a cell is locked.
So go ahead and head back into Main storyboard like so.
And we're going to go ahead and drag on that little image now.
So go ahead and search I image you drag it on and we're going to go ahead and resize this of course
so it fits properly in this cell just like so.
Boom.
There we go.
OK.
So let's do this let's keep going.
And we're going to go ahead and just leave that there for now.
That looks pretty good.
OK.
Let's go ahead and drag on a UI label like so and go ahead and drop it right there and pull it down
to about here so that it snaps nicely right there at the bottom.
And with this cell or with the image I mean.
And so now we're going to do is we're going to go ahead and actually pin this.
Let's do eight from the top eight from the left eight from the bottom and then we're going to pin it
eight as well from the image view like so now what we're going to do is we're going to pin this image
view from the top eight from the right eight from the bottom.
And then we're going to give it a fixed width and height as well.
OK.
Well no you know what let's just give it a fixed width.
How about that let's do a fixed width of 40.
All right we added constraints.
That's awesome.
But it appears that we did not set a constraint properly.
Yeah we always said 88.
It should be eight.
All right.
Very cool.
This looks great but I don't like that the height is all messed up so I'm actually going to go ahead
and just get rid of all the constraints and redo them.
Sometimes it helps just to clear everything out.
We're going to do eight from the top eight from the right and eight from the bottom and we're going
to go ahead and.
Yeah give it a fixed width of.
How about I don't know 30.
That way it looks a little more square.
That look good.
Let's see.
That's pretty good.
And now of course this needs to be constrained again from the right.
So it looks perfect.
Beautiful.
All right so I think I actually want to bring in the left side a little bit more so fix the leading
to be actually 20 in from the left and then we're going to change the font here.
So go ahead and reduce the font size down to about how about 14 and yeah let's go ahead and just name
this message label.
That's fine.
Just so we know what it is.
And let's go ahead and fill this with a lock image just to see what it would look like.
Change it to Aspect fit so that it stays in its aspect ratio.
And you know what this already looks a little bit too big.
So I think I'm going to go ahead and use our constraints here to pull this in from the top and bottom
a little more.
How about 16.
Well that's way too much how about 10.
And then from the top we'll also do 10 k that looks great.
So our cell is now built this is going to be used to show multiple lines of text though so we should
add one two or three lines of text that looks pretty good.
And let's think it's centered that looks really good if there's more than one that will be centered
as well.
More than one line I mean.
And so now we're going to go ahead and create our custom cell subclass.
So right click on view click new file Cocco touch class and this is going to be of type UI table view
cell.
OK and we'll just call it no cell.
Click next click Create and now go back to main storyboard and we're going to set the identity of this
table view cell.
So select the table cell like so select the identity inspector and we're going to just call it note
cell just like that.
Now while we're here we should also set the reuse identifier because we're going to need that in our
table view.
So copy the class name and set the reuse identifier to be the same but replace the capital and with
a lowercase N..
All right.
So that looks great.
Let's pull open the assistant editor and let's wire this up now with some Iby outlet so we can actually
show message text on the label.
So select notes cell and then it's not going to automatically pop up so we're going to have to go find
it ourself.
Like so click on notes cell.
And now what we can do is we can right click and drag and create an outlet.
This one's going to be message label very cool.
This is going to be lock image view.
All right.
So I just right click right clicked and dragged over to my subclassed and then released creating those
outlets.
So let's go ahead and let's get rid of selected we're not going to use it.
And yeah this is looking pretty good.
Let's think if we need anything else.
We're not going to actually override anything in a week from now.
We're not really customizing the appearance but we do need a way to configure how this data is loaded
whether there's an image or whether there is not.
So what we're going to do is we're going to go ahead and create a function called configure cell.
So type phunk configure cell and we need to think what are we passing in to each cell.
A note right.
And a note has a message and a lock status.
So go ahead and type lock a configure cell with note like so and that type is known.
Because we've already created that model.
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
image view is hidden is false meaning it's showing on the screen if it's locked.
Otherwise we're going to go ahead and say lock image view that is hidden is true because if it's unlocked
the image should not be there.
So now we're going to go ahead and configure the message.
And if the lock status is locked we want the note to say this message is locked.
Tap to unlock.
So go ahead and say message label text is equal to this note is locked unlock to read OK.
That sounds cool.
And if it's not locked we're going to set it to be equal to.
Note that message so otherwise message is labeled that text is equal to note dot message.
OK the 10:01 when we can figure this out.
So this will basically allow us to configure the cell as locked or unlocked.
Very very cool stuff.
And now what we need to do is we need to go load this dummy data into our table view.
Let's see if we can actually present our dummy data that we wrote in our note objects swift file to
present in our view controller.
So go into no VC collapse the assistant editor and we're going to go ahead and do some cool stuff right
here in self-growth index path.
So get rid of that generic return and we're going to create a cell using guard lead.
So go ahead and type guard.
Let cell equals table view.
Dequeue reusable cell with identifier for index path.
And what this does is it's going to return a reusable cell that can be loaded on our table view.
Now the identifier we just set.
Remember we said it to be note cell k with the lowercase.
And now the index path we're just going to pass in from our function here and that's basically just
at what place does it show up or should it show up in the table view.
So just pass in the index path like so but since we're using Gardley that we need to say else meaning
if we can't dequeue a reusable cell we're going to go ahead and pass in and return a blank table you
sell like so.
OK.
So now we have an instance of our note cell but it's not actually going to be of type notes so unless
we tell it explicitly because look dequeue reusable cell if you can see it what's not going to let us
see it.
But basically what it does is it returns a table view cell.
But we want this to be of type notes.
So we need to say as note cell like so.
And now what that's going to do is it's going to create an instance of note cell and we need that because
we need to pass in our note.
Okay.
So go ahead and say cell dot configure cell and we're going to pass it a note but how is it going to
get the note.
Well we have an array of notes.
So what we're going to do first is we're actually going to going to set up the number of rows in Section.
If you think about it.
We have three notes.
We should have three rows but how are we going to get that.
We can go ahead and access notes array dot count there's three items we want to show three rows and
that's also how we're going to pull out the exact notes that we need because this think of this like
a for loop that's going to populate our table view what we're going to do is we're going to go through
the notes array what we're going to do is we're going to go through the count that we have which is
three and for each of those items we're going to create a cell pass and a note configure it return the
cell to the table view.
So what we can do is we can go through our notes array.
And for the first item in the table view we can pull out the first item in the notes array.
So to do that go ahead and call notes array and we're going to get the item at the index path dot row.
Now if you're thinking what does this mean.
Let me explain.
We have a Notes array.
If I were to pull out 0 that would pull out the first item in the array right now index path dot row
is an integer value that represents the row of the table view.
So the first item in the table view is actually the index 0 right.
Just like in an array.
So I can pass in zero.
And that will pull out the note at index 0.
Then I can create a constant for this and pass it in as my notes.
So let note equals notes array index path row.
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
next cell or create an instance I will create a note from the second item then I'll pass in that second
item and return the cell.
I'll do that for all the cells until we're done with our count which is three.
So go ahead and build and run.
And when the simulator pulls up we'll be able to see our project the way that we're hoping.
Hey look at that.
This note is locked unlocked to read.
I love learning about Touch ID and face ID at the same time.
Thanks Apple for making such a lobola so very cool.
We can select these notes at the moment.
They don't do anything but you know what I think I want to go ahead and actually change the font size.
I want to make it a little bit bigger just so that we can read it easier.
Let's make it maybe 16.
And you know me I hate Avenir next so I'm going to actually select all the items in here that have text
in them like are buttons and I'm going to go ahead and actually.
Well can I change the font like that.
No I can't.
OK.
I can't handle the system.
I'm going to go and custom Avenir next.
Let's just do.
Maybe medium.
That looks good.
OK let's go into here.
Let's set the font to your next as well and we'll change it to 18 again.
OK that looks way better.
The lock note button also System font changed that to custom Avenir next.
And you know what Boulder's great.
Seventeen doesn't look so great but how about 20.
It looks awesome.
Secure notes.
That's also in the system font which is gross.
So we need to actually go to System then back to custom choose Avenir next.
And let's make it a size 20 and Demi bold.
Yeah it looks pretty good.
OK so let's build and run it again let's see how our changes impacted how it looks.
And then we're going to go ahead and move on to the next video.
Let's see how we did.
Oh that is so much better.
You know what the font's a little too big now.
So let's reduce it to 16 maybe four.
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
looks might be kind of cool.
Here we go.
Yeah.
You know what that looks fine.
It's a little small but it looks good.
So we have our notes.
We have the available notes right there.
Oh you know what maybe the issue is that the cell is too small.
Let's change the size here and 90 and then let's select the cell as well and change the row height to
90 and then we can change the font size up to something a little bigger.
Like maybe not 80 maybe 16 let's build and run.
Let's see if 90 looks good we might have to reduce that a bit.
But guys this is what a what a lot of development is is making things look nicer and making sure they
look good.
You know what that's still too big let's try 75.
Select the table view and also set the row height to 75 build and run.
This should be all.
And then we're going to move on to the next video where we're going to write some helper functions that
are going to help us lock and unlock our notes of boom that is exactly right.
That's what I was hoping it would look like.
So we have locked those unlocked notes and in the next video you know I think it would make more sense
to actually connect this detail VC and pass the note over and then after that we're going to write some
helper functions to utilize our lock button to lock the note.
So that will be really really cool stuff.
Let's head over to the next video and let's do that now.