Hey everybody this is Caleb with Debb slopes dot com and in this video we're going to build out the
gold cell.
We're going to set up its subclass and we're also going to set up some outlets and actions so that we
can properly interface with it.
So let's get right down to it.
Go ahead and open up your X code project and we're going to go ahead and build out our prototype cell
for our you know table view.
So I don't really like that it's semi translucent that's just because it's hidden.
But for this we're going to go ahead and turn hidden off so that we can see the full thing.
So scroll down after selecting your table view and unstick hidden.
And we'll just we'll turn that back on at the very end when we're done.
For now we're just going to be building out our prototype cell here.
So let's get right down to it.
So we want to display the goal meaning like our description for what we want to accomplish.
We want to display whether it is a short term or long term goal and we also want to display our progress
of how many of our goal we have accomplished so that we have a sense of how close we are to completing
it.
So basically we're just going to be using a lot of UI labels.
Let's go ahead and do that now.
Go ahead and type you I label or you lab as I typed and drag one on K and we're going to go ahead and
I'm going to duplicate it because this will be for the goal this will be for the type and we're going
to go ahead and duplicated again.
This is where the description is going to go and duplicated again.
And this is where short term or long term is going to go.
Now before we move on let's go ahead and let's close down the assistant editor we don't need it right
now.
And what we're actually going to do is we're going to select both of these labels and we're going to
put them in a stacked view.
We're going to do the same thing with these two labels putting them in a stacked view and then we're
going to select both stack views and put them into a stack if you like.
So we're going to create a bit of spacing between both of those stack views.
Maybe 10.
That looks good.
And then between these two stack views we're going to also create spacing of 10.
And this one as well create 10 points of spacing.
And now we have nice spacing between all of them and we can now go ahead and set them up the way we
want.
So this will just say goal.
All right.
And this one is just going to say type.
Now since this is beneath the main description it makes sense that these two are a little bit smaller
than the rest.
So go ahead and.
We're going to actually while we're at it let's change the font to custom and then set Avenir next.
OK.
Again this is up to you if you want to do this you can I just like it.
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
Avenir next as well.
So change this to custom and the font to ave next.
And I'm going to make it Demi bold because it looks like it should be a little bit bolder because that's
the most important information that our eyes should be drawn to in our stacked view.
So very cool.
I'm going to make that size 18 I believe.
Let's just make sure that looks good.
And you know just to test this let's go ahead and let's let's just set an imaginary goal eat salad twice
a week maybe that's my goal and the type that's going to be a short term Well no dash let's just do
short term goal.
All right.
Very cool.
That looks awesome.
So we now have a goal we have a type.
And you know as I'm looking at this I don't like that the spacing is so big between the two stacked
views.
So let's actually select the outermost stack view here and let's drop it to five.
That looks a little better.
Yeah that's great.
So now we need to go ahead and add on a label over here to document how many times we have eaten salads
so that we can meet our goal.
So go ahead and drag on a new label and we're actually going to make this one the height of the entire
cell the way that we the way that we're doing it here.
And we're going to go ahead and remove label and let's just set a static number of maybe 7 or so k.
Let's center it.
And now we need to change the font to our favorite font Avenir next or my favorite font and I'm going
to make it bold.
We want it to look nice and bold and really draw their attention to that.
Also to draw their attention because it's kind of the most important thing about our app is how close
are we to achieving our goals.
So we're going to make it nice and big so it's very easy to see.
So I'm going to actually bump it up to 26 maybe even 28.
Yeah that looks good.
OK.
So that's great but we're going to change the color of this to actually be the same green that we're
using in the background of our app because that just looks cool.
I think it looks awesome that way.
So we are super close to being done.
However we need to set some constraints so these things don't just fly off the screen and go wherever
the heck they want.
So to do that.
Go ahead and select your text you hear for your label and we're going to pin it eight from the top eight
from the right and eight from the bottom change seven point five to eight if you need to.
And then we're going to give it a fixed width of 40.
How about that.
K the height doesn't matter because we've pinned it to the top bottom and right.
We just care about the width.
So add those constraints and Austin stays in place.
Next we need to pin our stack few in place so to do that.
Go ahead and select the pin menu and this one looks like it is pinning to the Super view not the margins.
So I'm going to just drag it here and that might be OK.
But let's just make sure yeah we're doing the right thing.
OK.
So pinnate 0 from the bottom zero from the left and we're going to pinnate zero from the top as well.
And then we're going to pin it maybe 10 from the side of that 7 up there that you I label.
OK so press enter to add those constraints.
And as you can see it shows up just like so.
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
tell that the the labels here got a little bit messed up but we will fix that as well.
So go to your leading space constraint and change it to 10 to match the amount of space on the other
side of this this label.
So now we need to select our stack views here and we need to modify the way that they are filling so
that we don't get this weird stretching here.
OK.
And the way we're going to do that is by clicking on our stack view and we're going to choose.
Fill proportionally.
That way it fills it based on the size of whatever element is in the stack view so that looks great
although you know what we have a ton of space between these so I think I'm also going to lower these
stack use both to have a spacing of five 10.
It's just a bit too much.
So let's go ahead and do that.
It looks great.
That looks great.
And now it appears that we are a little bit off of our constraints or just click the update frames button
and it'll move it right in place.
All right supercool This looks great.
So now we have a label here to display our goal description.
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 end and right dot dot dot and we wouldn't know
what our full goal is.
So to fix that we're just going to set a minimum font size.
OK that's pretty typical way to do it and a minimum font size of nine should be great.
It'll automatically scale to fit.
Short term is not going to matter because we're not going to stretch all the way to the side.
And this also is never going to change size because it's just a static number.
So you know what it might though if we had multiple like maybe we had 23 or 24 like 2 numbers it might.
So to fix that.
Go ahead and set a minimum font size as well.
All right so now let's go out and create the code file this can interface with this.
So to do that right click on view click new file and select Cocco touch class.
We're going to be subclassing UI table view cell okay like so and we're going to just call this goal
cell and go ahead and click next.
And we're going to save this in our app.
Make sure that your target is selected and click Create.
Ok really cool.
So we have a UI table view cell.
And you know we're not actually going to need any of this so just get rid of that for now.
Now go back into Main storyboard.
Select the cell.
Right.
Make sure that the table view cell itself is selected.
And we're going to go to the identity inspector and give it an identity of gold cell.
OK.
Really cool.
While we're at it we're also going to need to set a real identifier for when the cell is cued by the
table view.
So to do that go ahead and just give it a reuse identifier of Garcelle.
Now it's convention to type a lowercase word first and the camel case the rest like so by typing goes
cell.
OK.
Now we have a reverse identifier that we can use in our table view when we dequeue the cells later on.
So this is now Google cell.
That's great.
And so with that we can now open the assistant editor and set up the Iby outlets and Iby actions so
select that and open it up.
Now we need to go to automatic manual goal post app and open the view folder and select Garcelle.
OK now we're going to create Iby outlets to display data in here then we're going to write a configure
cell function so that we can properly update that information with information from our core data model.
So right click on the goal description label here and drag into Garcelle whoops go ahead and go into
the stacked view and select that label and we're going to drag it to our goal sell and we're going to
just call this goal descript description label cool.
Next we're going to go ahead and Right-Click from the short term label there and we'll call this goal
type label because that's the type short term versus long term.
And then we're going to go ahead and set this label here the number to be goal progress label because
that shows our progress towards accomplishing our goal.
Very cool.
Next we need to write a function so that when we are actually instantiating these cells we can pass
in the proper data.
So to do that go ahead and type phunk configure cell.
And when we can figure this cell we need to give it a description.
OK.
And we're going to get that as a string.
Then we're going to get a type and that's going to be of type goal type which we have not yet created.
So for now let's just go ahead and pass in a string.
We'll create the gold type later and I'll explain all of that in a future video.
And then we're going to need to pass in a goal progress I'm out of type int.
So we're going to get all of that information and now we can configure our Iby outlets so go ahead and
type self goal description label text and we're going to give it our description.
Okay.
Next go ahead and type self goal type label text.
And we're going to give our goal type by passing and the type K.
Now it's of type string.
Now later it will be of a different kind but I'll describe I'll describe that later when it's time but
for now just go ahead and pass in the string then we're going to go ahead and set a goal progress amount.
OK so type self.
Goal progress label dot text and we're passing in an int.
We can't set text to be an end because look the text property of our UI label is expecting a string.
But what we can do is we can call string and there's a handy little part of string called String describing.
Now if you scroll down you can find it right here.
String describing subject and our subject is our goal progress wups goal progress amount.
So that will basically create a string that we've passed in this amount and it's converted it to a string
so we will get the textual character 7 not the numerical value.
So it will convert it into a nice string the way we want super cool.
And you know what guys.
This cell is now ready to receive static data and we could display cells on our table view really really
cool.
We're going to do that in a little bit but this is done our UI table view cell is now properly done.
We have built it in Interface Builder we've created a subclass and we have set it up to be configured
by the table view super amazing work.
The last thing we need to do is rehired this table view and our video is done.
So go ahead and select that table view you scroll down to the bottom of the attributes and Specter and
tick.
Hidden.
OK.
That's exactly what we need to do.
And this video has done amazing job in the next video we're going to start talking about core data.
I'm going to explain to you what it is and show you visually how it works on a fundamental level so
that you can understand everything we're doing in the future videos that we will do by creating our
core data entity and attributes things that I've shown you a little bit already but I have not explained
it I'm going to explain it in the next video.
And we're going to basically look at our core data model and see what we need to do.
So let's head over to the next video.
Amazing job with this one and I'll see you there.