Everybody this is Caleb again with devah slopes dot com and in this video we're going to build goals
VC.
This is like the homescreen of our app that will show all of the different goals that we have set and
saved we're going to create the subclass.
The code file that goes along with this view controller and we're also going to link up the Iby actions
and IAB outlets for this view controller.
So let's dive into it now.
Pull open your X code project and what we're going to do is first we're going to go ahead and modify
the view subclass or The View Controller subclass rather.
And we're going to rename this goals.
VC OK because that's what it is it's the homescreen that shows our goals.
So we're going to rename the class goals Visi as well.
And you know what it still says View Controller here so I'm going to change it to say goals.
VC that's great.
But now we need to go into the storyboard and we also need to set the identity because this is still
referencing that view controller file but it's no longer added in our in our project so click on the
View Controller click on the identity inspector remove View Controller and change it to gols.
VC press enter to save it.
And we're now good to go.
So supercool Let's go ahead and let's build it out.
So we're going to start with a UI view.
Drag one on and we're going to make it.
Let's see we're going to stretch it out like so.
And let's make it maybe 70 high.
Hey that looks pretty good.
Nice.
And let's go ahead and give it some constraints.
Click the pin button and let's pinnate zero from the left to zero from the top and zero from the right.
Of course we need to give it a fixed height of 70.
Click Add four constraints.
Then we're going to go ahead and give it a background color.
Now I've been using this nice green color and that green color just so you know the hex value is 6 db.
C 63.
So if you want to use the same one you can you can borrow this code and paste it in there and you will
be good to go.
Cool.
So we're going to make this look like a UI navigation controller by adding a button here and we're going
to put a title up at the top so to do that.
Let's go ahead let's do the title first.
Go ahead and type you I label and drag on a label.
Now if you know anything about me you know that I love the font.
Avenir next.
So I'm going to use that.
But you are more than welcome to use whatever font you want in your next.
Just my personal favorite now to change that sorry.
I went from system to custom and then to Avenir next.
Now the first word is going to be goal.
And that's going to be in regular weight font size 18 I think looks good.
Then the second label is going to be in bold.
So for now just click done.
Change the color to white and stretch it out a little bit.
Very cool.
Now what I'm going to do is I'm going to go ahead and just type goal in all caps and I'm going to go
ahead and center this as well.
Then I'm going to duplicate it.
So click on the label press command d to duplicate and I'm going to change this from regular to bold
just like that.
Now I'm going to make this save post and these together just look kind of cool.
It's a cool combo goalpost and.
Yeah.
So that's the that's the title.
But these are not going to stay in place.
And we actually want them to stay right next to each other so we may as well just throw them into a
stack view.
So with both selected go ahead and click the stack button down at the bottom and there you go.
Look at that it looks like one label but it's not.
So with that in mind go ahead and click on the stack view.
And we're going to just drag it to center it and we're going to move it so that it's a little bit above
the or a little bit below the midline.
We don't want it to be exactly in the middle because then it might appear too close and if you click
on the safe area you can see where the top bar goes.
And as it is right now that's pretty much in the middle of the safe area that we can see on the green
you I've used That's great.
Let's go ahead and pin it in place.
So select the stack you click the pin button and we're going to go ahead and pin this eight from the
bottom and add one constraint.
Now we're going to go ahead and select the alignment button and we're going to pin it horizontally in
the container and we're going to add one constraint.
So now we'll stay there perfectly.
Next we're going to go ahead and add a UI button and this is the button you'll press to open the next
screen to create a goal.
So go ahead and search for a UI button and drag one onto the view.
Very cool.
Now we're going to get rid of the label like so by pressing delete and then enter to to lock it in place.
And now we need an image but we have not yet imported our assets.
And so to do that I'm going to go ahead and I'm going to pull open an asset folder that you can download
if you use the airdropped feature of the envelopes app you can download the assets and when you open
them you will be able to drag in these elements into your assets folder.
So open the assets the assets folder and drag in these elements and you'll see there are three different
images that we can use now.
Cool.
So let's go Adam.
Click on main story board.
And for this button we're going to change the image to add Gore.
OK.
And you'll notice it's a little squishy.
If I move it and stretch it it kind of modifies the size.
So we need to lock this to a fixed width and height.
And we also need to center it with the goalpost button so to do that select the button click the pin
button and we're going to pin this let's see how about 15 from the right and instead of pinning it to
the bottom we're going to actually pin the center of this to the center of the stack view.
But for now let's go ahead and give it a fixed width and height of 30 and 30 add three constraints and
you'll see actually it does kind of squishes.
So that's not what we want.
Let's go ahead let's undo the with constraint and that should stretch out to the appropriate aspect
ratio that looks good.
So now what we're going to do is we're going to select both the stack and the button by holding Shift.
And now in the alignment menu we can select vertical centers and we'll give them the same vertical center.
Add one constraint and now it's going to stay in its place.
Pretty cool.
It's looking a little bit low so I think I'm actually going to move this stack you up a little ways
like maybe 12.
And I think that just gives it a little bit more space to look the way it's supposed to.
But you know what if I zoom in that still look a little bit.
Whoops.
Because we can't zoom in that way it still looks a little bit squished to me.
So let's let's get rid of the height constraint as well.
And you know what I think actually it's fine.
I think when we dragged it in for some reason it was getting squished it looks better now looks more
like a perfect circle.
All right.
Supercool So that is in place now.
That's great.
It's going to stay where it is.
And now what we need to do is we basically need to create a label here that kind of is like a welcome
to the app type message.
And then we need to add a table view as well so let's go ahead and search for a UI label.
Let's drag it on.
And of course you know me we're going to make this Avenir next.
My favorite font.
Here we go Abbondio next.
And I'm going to make this size 24 it can afford to be a little bit bigger.
And now let's go ahead and type.
Welcome to goalpost.
OK.
Just a little welcome message for our users and this is going to be displayed when a user first opens
the app and it will be shown every time they have no goals set.
So we're going to go ahead and just position this right about here and we're going to center that font.
Next we're going to go ahead and give them some directions.
So let's duplicate that label by pressing command D and we're going to lower this down to maybe size
16 K and we're going to change this to say to begin create a goal.
And that's just going to kind of give them the give them some directions tell them what to do and guide
them.
So go ahead and select both of these and just like the other text UI labels we're going to go ahead
and put them in the stack view that keeps them in the same area.
Keeps them nice and centered and beautiful which is what we want.
So now let's go ahead and let's select the alignment button let's make sure that this stays horizontally
in the container and add one constraint.
Now we're going to go ahead and we're going to pin this may be 75 from the top and press enter.
Now you'll see that it will stay right there in its place and that's exactly what we want.
Really cool.
So now what we need to do is add on AUI table view.
OK let's do the search for UI table view and drag one on.
OK.
Really really cool.
Now the thing that we need to think about is you can see this is dropping into our background view.
OK that's fine but we need to remember this needs to actually go on top of our label here because if
there are goals that have been saved this table view should be shown.
So we're actually going to need to make sure that this is on top of the label here when we're done.
So we're just going to drag this to fill the screen.
And as you can see it definitely is covering it.
So that's what we want.
That's great.
Now let's go ahead and pin it in place.
So let's pinnate zero from the left to zero from the bottom zero from the right and we're going to pinnate
zero from the top.
But you're going to need to change that eight to zero so that it pulls up right next to the green you
view.
Nice and snug.
So tap add four constraints and there you go.
Now we can go ahead and drag on a table view cell just like we want and we can drop it into our table
view.
Awesome.
Super duper cool.
This is a really skinny little cell Let's go ahead and drag it down to maybe looks like 60 maybe 70.
Let's let's set the row height to 70 and then so that it matches.
We need to select the table view as well like so and then go into the row height and type 70 just to
make sure that it stays with that 70 height for our table cell.
And we're going to go ahead and build out this table for you cell later but for now we're going to go
ahead and just go ahead.
But for now we're just going to go ahead and hide this table view by default because we want our view
back here to show if there is no goal set but for the most part we're going to be wanting to see this.
So we're going to set it as hidden by default and show it if there definitely are goals saved.
So to do this go ahead and click on the attributes and.
Scroll down and select hidden.
OK.
Now let's go ahead and let's set up the outlets and actions so that we can interface with this in our
view control or file.
So to do that select the assistant editor and you'll see goals Visi shows up right away.
Get rid of did receive memory warning and for now let's go ahead and let's think what we need to do.
We need to create an outlet for Table View.
Let's do that.
Just call it Table View and click connect.
All right.
Very cool.
We need to modify the button.
Well we don't need to modify but we need to do something when we press it so let's right click and let's
create an IB action called add gold button was pressed.
And that's great.
Now inside of this function we can call whatever we want and the button will do it and you know what
for now.
I think this is actually all we're going to need.
We need an action from our button and we need an outlet to our table views that we can properly interface
with it and display all of our goals that we've saved.
We've not done that yet but we will.
Guys amazing work.
Our first view controller is done and we can now appropriately interface with it.
So that's amazing.
But we should test it to make sure it works so I'm just going to go ahead and print button was pressed.
OK.
Just to make sure it works.
And now let's go ahead and build it.
So build and run.
Let's make sure that our interface looks good the way it's supposed to.
And then after it's done being built we're going to go ahead and move on to the next video but let's
make sure everything's good to go first.
It's really good that we build this along the way just to check and verify that everything is good.
So here we go it's opening up and let's see how we did.
All right look at that.
That looks great.
So our table to use hidden by default like it should be our labels are centered.
Everything looks good.
And when I click on my button button was pressed OK our action is firing properly.
Very very cool.
Amazing work guys.
In the next video we're going to build out our our goal cell in the next video we're going to build
out our goal cell.
We're going to write the subclass and we're also going to set up the outlets and actions for that goal
selves so that we can properly interface with it when the time is right.
Very Great job guys and I'll see in the next video.