Hey everybody this is Caleb with slopestyle.
And in this video we're going to build out create Visi which is the first view controller that's presented
when we want to start creating a goal that's where we're going to give it a description and where we're
going to set the gold type short term or long term.
OK.
Let's build it now it's pretty easy so let's just do it now.
Open up your tax code project and go into main dot storyboard.
Now of course as you may be expecting we are going to drag in a UI View Controller.
So go ahead and search for that and pull one in here.
There we go.
Looks good.
And what we're going to do is we're going to first copy this goalpost banner select our table view and
paste it then we're going to drag it up to the top and we're going to pin it from the left top and right
zero.
OK.
It already has a height constraint of 17 so just tap add three constraints and you're good to go.
Now I normally would not do this copying and pasting but it's just easier and faster for the intents
and purposes of this app.
But the only thing we need to think about is that we have set up some IP outlets one especially on this
button.
And if you right click you'll see that this is still linked to Goles VC we don't want that so click
on the X to remove it and it's now no longer associated with any view controller.
This button is going to be actually used as a back button on the left side of the screen over here.
So we need to move it and then set up its constraints again.
But I want it to basically be in the same place just mirrored on the other side.
So to do that what we're going to do is we're going to pay attention to the trailing space constraint
and replicate it with the leading space constraint.
So get rid of that delete it and then we're going to go ahead and just pinnate like so 15 from the leading
edge.
Oh you know what that's not right.
Silly me.
That's not going to work.
So we're going to actually get rid of that and we need to physically move it first then we can set it
to be 15 from the leading edge.
So select it now that you've moved to the left side and make it 15 from the leading edge.
Awesome.
That looks great.
And of course it's still aligned to the stack view which is aligned in the center.
And then about 15 from the bottom.
So that's great.
But now we need to fix the the image to actually show a back button.
So select the attributes inspector and change the image from ADD goal Tabac.
And now we have a cool back button we can use to go back to this view controller OK we can dismiss we
decide that we want to cancel for some reason.
OK so next we're going to go ahead and put in a text view here which is going to show us or allow us
rather to type our goal and what we want for the description.
So go ahead and type UI text view and drag one in like so we're just going to scale it to be about Yea
big doesn't have to be exact but that's pretty good.
And we're going to get rid of this Latin boilerplate text and delete it and we're going to just type.
What is your goal.
OK.
And press ENTER NOW.
This is going to be our placeholder because a text view actually doesn't have an inherent placeholder
that we can get to unless we make it attributed K like so.
But even then it's not truly a placeholder so we're going to just create a plain one and we're going
to change the font K so choose Custom and sometimes if you do that it won't let you choose one but looks
like.
OK good.
No it's going to let us.
And instead of regular Let's actually make it medium.
So it's a little bit beefier and we're going to change the font size up to about 18 or so.
OK.
That looks awesome.
And now since this is placeholder text we're going to make it light gray case so it's kind of hovering
in the background.
And then when we are editing it later we're going to change the font color to black OK and we'll clear
this out as well.
So that looks good.
And now we need to basically create two buttons one for short term goal and one for a long term goal.
So go ahead and type.
Button whips and drag one on like so.
OK.
And we're going to go ahead and duplicate it.
We have to.
Like I said go ahead and double click one is for short term goals.
And the other is for long term goals.
All righty.
And let's think we want these to match our theme so let's change the font of both of these like so by
going to custom Avenir next.
And let's make these both Demy bold maybe even fully bold fully bold looks cool and let's lower the
font size to maybe 14.
All right.
Let's change the background to match our green border bar here and blue font on green looks real bad.
So we're going to change that to white.
All right.
That looks pretty cool.
Now we need to go ahead and these into a stack view so that we can keep them together and space them
equally and set their height equally.
So go ahead and stack view them stack.
You will fi.
Very cool.
And we're going to go ahead and actually just drag this stack view like so up to about here and then
we're going to go ahead and just.
Well not yet.
We're not going to give it constraint yet because we need to put a label here that basically just says
Choose one that allows the user to know what they should do.
So type label and drag on a label and let's just say select one can stretch it to fit and then we're
going to change the font also so choose kust you know the drill Avenir next.
And you know what let's make it medium and let's lower it to size 10 it's too small maybe 12 or 14 14
is good.
And sometimes black is just a little bit too intense and too dark so we're actually going to choose
dark gray color which can just sometimes look a little better.
So let's go ahead and let's put all of these into a stack of you.
OK so select all three and choose stack.
Now we're going to go ahead and fill so that it fills the entire width of the screen.
But for this stack you are bottom most stack view.
We want these to be filling equally.
Right.
So what we're going to do is we're going to choose fill equally and then they're the same size k very
cool.
Now we want there to be space in between them so let's give them maybe 20 points of space in the middle
and then for our stack.
View the big one with the text you and the label we're going to give 20 points of space as well.
OK.
Although you know what.
This is kind of floating way out in space there.
That doesn't look so good so maybe 10 points of space would be better.
That looks a lot better.
And for this stack view these buttons I think should be kind of around the same thickness as our border
are or are not our border but our navigation bar.
So let's go ahead and let's set a height constraint for this one to be maybe 50 and let's see how that
looks.
Yeah.
You know what I think I like that that looks pretty good.
Now what we're going to do for selection for instance if I tap on short term it's going to be green
like this.
But if I have not yet selected long term it's going to have kind of a de-selected color like it's sort
of faded.
And then if I tap on long term it'll turn this bright green and short term will turn the faded green.
So change the background color of long term initially to be this color which is like a faded green.
And if you're interested that is B to D D F and.
Yeah.
So now that appears to be de-selected and we'll write an extension in the next video that will allow
us to tap on the button and change its background color.
OK really cool.
So this looks awesome.
Now the only thing that we have left to do is to add the next button and the next button is what is
going to allow us to move next to the next you view controller.
So go ahead and type UI button and we're going to drag on one more k and it's going to go here.
Now we're going to go ahead and put this on the very bottom of our view and we're going to stretch it
until it is about let's see where this button is is how high.
I can't remember it is 50 high.
So let's make this button 50 as well.
OK.
That looks great.
And let's go ahead and keep it at the bottom.
Let's pin it from the bottom left and right zero and let's give it a fixed height of 52 that it stays
there.
Add those four constraints.
And now let's go ahead and set up the color font text color and background color.
So choose fonts change it from custom and go ahead and type Avenir.
Next set it to be bold like are other buttons.
And I think size 20 is probably good.
Go ahead and type next in all caps and press enter.
And now we can set the background color to be this yellow color which if you're interested is e a 9
for four.
Now that blue text is giving me a headache so change it to white because that just looks much better
and awesome.
Guys this is really cool.
This is really coming together.
But you know what we have not set constraints for this stack you so it's just kind of floating out in
outer space.
Yeah.
No we haven't.
So go ahead and select the pin button with the stack you selected and we're going to pin it let's do
20 from the top 20 from the right and 20 from the left or right the left and 20 from the right add three
constraints and you'll see it gets pinched in nicely and it's going to go ahead and stay there.
But we should also set an explicit height just so that it's not stretched or modified in any way because
we actually this is a good height for everything so let's give it a height of let's do two hundred sixty
and press add one constraint just like that.
Very very cool.
OK.
So I think we should go ahead and test out this view controller.
Let's see if we can present it.
And to do that I'm just going to go ahead and right click and drag to create an interface builder segue
and we're going to present it modals.
So it just pops up over the top of our view controller and we will delete this in just a moment because
we're going to be presenting these in a different way.
But for now this will be a great way to just test if our UI looks good.
So let's go ahead and build and run and when it loads and pops up we're going to be able to see whether
our our interface that we've built looks nice.
So click on the Add button and you know what guys.
That looks pretty darn good.
I really like that super smooth.
We're going to modify it in a little bit so that these buttons can actually change color and we can
change the selection type.
But our textfield looks good.
We're going to set it up later so that we can actually as soon as we tap.
What is your goal goes away.
And will also set up so that this view controller when we tap this button it dismisses from the right
instead of popping down.
OK supercool So this is great we're super close.
Let's go ahead and let's set up the Iby outlets and the actions that we're going to need in order to
use this view controller.
And we also need to create the control of file we haven't created that yet.
So right click on controller click new file and select cocoa touch class.
We're going to be subclassing you view controller.
And let's go ahead and call it create goal Visi because this is where we start creating the goal press
create and we can get rid of this stuff.
Here we don't need it but we do need you to load.
Ok so just get rid of the comment there.
And now in storyboard we're going to go ahead and select this view controller and set its identity to
create gold visi.
So do that now and press enter.
OK now we can connect these with outlets to our view controller file.
So open the assistant editor and make sure that you have this view controller selected and you should
be able to find it an automatic like I can.
OK.
Next we're going to go ahead and create outlets for the text you for both of these buttons because we're
going to need to modify the background color property and we're also going to create one for the next
button because we're going to modify that as well so that it can slide up with the keyboard.
So right click and drag from the text view make sure it's actually the text view and we're going to
call this goal text view and press create a supercooled make some space here.
Next right click from the short term button and call it short term button could do the same thing for
the long term button long term button.
Awesome.
And from the next button can create one for that as well.
Awesome.
So that's great.
Get rid of that unneeded space.
And below you did load We're going to create some Iby actions.
OK.
Now one of the Iby actions is going to be for the next button of course because when we press that we're
going to need to use it to move on to the next few controller.
So right click from the next button change it to action and call next button was pressed.
OK press connect and you'll get a little function here you can put stuff in.
Very cool.
Go ahead and create another one for the short term button called short term button was pressed press
connect do one for the long term button as well.
Long term button was pressed.
Make sure that it's an action don't make that mistake and connect it.
All right super cool.
And you know what I think that is good.
Oh know you know what.
We have a back button here that needs to dismiss our view controller.
So right click and we're going to put this down underneath long term and next button.
Make it an action and go ahead and type back button was pressed.
Awesome.
And you know what we can set this up right now.
We can just call dismiss and made it is true and completion is nil.
We don't care about what happens at the end.
We just want it to dismiss.
So that's awesome.
We we should go test this out we should go make sure this works and that our dismiss button works as
well so go ahead and press build and run and pull open the simulator.
We're going to check to see if our back button works and if we've properly set up our Iby outlets and
actions so press the add button.
This looks good.
OK we can select all of these.
These are all here.
Nothing is crashing.
And when we press our back button it properly dismisses super super cool amazing work guys in the next
video we're going to write an extension of you view controller that's going to allow us to present this
view controller from the left and right instead of from top to bottom so that it looks like a UI navigation
controller.
It's pretty cool.
And you're going to learn some fun stuff about s.a.a animations and all kinds of stuff like that so
let's go ahead and let's head over to that video right now.