Everybody will come back.
Johnny be here with slopes slopestyle continuing on with our SMAC.
Chad this is where we left off in our last video.
We worked on our channel.
We see you.
I got pretty far actually when we created that sweet gradient view things are looking pretty good.
Want to do a little bit of work on this table view before we continue on to our next to view that we're
going to work on which is going to be the loggin view.
So let's hurry up and do that real quick.
We've got a lot to cover in this video.
So let's see if we can get through it all.
All right so first off I wanted to change a couple of things here you see in here in the simulator we
have these lines.
So we're going to get rid of those.
So here under separator I'm going to say none.
So that's what the tape will be selected select separator.
None.
All right so that's the first thing we're going to do nothing and make sure that our background is clear.
So that's good.
And I think that might be all we need to do right here in the square and at a table.
So we're just going to write and sell and drop in a table cell here.
All right.
So that looks good and the height is probably good.
So this is actually the cell portion right here and I'm going to go ahead and throw in a label right
here.
Hello.
Are you at your rights trumpet in a right here.
And let's go change.
Well first let's change the table cell background color that's right here.
Change that to a clear color.
There we go.
That looks better.
You can grab our label here and let's change the font color to white the font to custom and Helvetica
new.
That looks good.
And then just change this two hash tag general and they're going to grab that and add some constraints.
When to see 20 from the left and center that vertically in its container.
All right so that looks good.
I just want to save this and run it and just make sure that looks all right.
We won't actually see any thing right here with the prototype cells because we haven't said any of that
up inside of the controller.
So that's good.
All right so now we're going to continue on to the loggin VC.
So I'm just going to pull up our designs right here.
So this is what we want it to look like.
We've got a cancelbot in here at the top the logo and the name of the app.
A couple of text fields to enter in the username and password a loggin button and a second button that
says don't have an account sign up here.
All right.
So let's go ahead and let's get going on there.
When you zoom out a little bit and I'm going to add in a new View Controller every go and we are going
to segue from this channel Visi controller to this one right here so I'm going to hold down control
and just drag over and select show.
OK so this is just creating a generic segue from this controller to this one.
All right so I'm going to save that and then we need to be able to trigger that view controller change
from this button right here.
So we're going to need to go ahead and add an action for this button here so I'm going to hold down
option and click on that see.
That's channel C and then down here.
I'm going to control drag from loggin button over here to the channel.
See that's what file this is going to be in action.
And we're going to name this log in button pressed and connect.
And while we're here we're actually going to need an outlet for this eventually.
So I'm going to create our little outlets section and I'm just going to go in and create an outlet button
for this right now as well so it's still an outlet.
And call this logon button.
And the reason we are going to need an outlet for this is because we're going to need to change the
title of the blogging button when we're actually logged in and instead of showing logging and we're
going to display the user's name.
All right so that's good.
All right so we created this segue now to trigger it programmatically what we need is a no go ahead
just dismiss the assistant editor come back here and click on the Segway and we need an identifier for
it so we can say when we press this button perform a segue with this particular identifier and that
identifier we're going to call it to log in and can get a copy of that.
And we have we and our practice we generally put these types of strings in a Constance file.
All right.
So I'm going to create a new group over here I'm going to say right click on the smak folder as a newgroup
and call this you would see we call this newgroup you till that t's right click and see a new file and
it's going to be just a swift file.
Next when I call this constant It's
OK.
Then right here I'm going to make a little section for segues and when I say it to log in and we generally
use caps too.
You know Constance and that's going to be to log in and x.
CONAN And if you select something and do quotation marks it automatically puts it inside of quotation
marks for you.
When I say that.
Jump back over to our channel channel ABC and here where we created our ID action for the logon button
pressed.
So what's going to happen when we push that logging button.
We want to segue to our log in the sea.
So pretty simple.
I do say I perform Segway with identifier the identifier is that one that we just created to underscore
log in and the sender is no and we're going to say that and that should do.
So when I run it in we're going to open this up and click on log in and a link as we go.
All right so this is the log in visi.
Totally blank right now.
So let's go ahead and fix that.
So jump back over here to our story board.
And what do we need to do.
We already looked at it.
We need some buttons.
We need a button here here and here we have our logo label to text fields and some divider views.
All right.
Let's go ahead and get cracking on that.
I'm going to start with our labels.
OK so I'm just going to what I like to do is kind of just throw everything up on the board and then
start refining and adding constraints as we go along.
So we're gonna need an image view.
So we're going to drop an image of you in here and reset it to the general size.
I'm going to set the image and that his SMAC logo right there.
We've got a button a few buttons up here which is our close button.
One down here which is our logon button.
And then our if you don't have an account you can create an account button.
Then we have a couple of text fields or a couple of text fields to enter in our username and password
of course case that's our User Name one is our password one.
And then we've got these posts over here.
We've got these dividers here.
So we're going to do a little bit.
We're just going to simply mortgage screen use a couple of views in there.
So when I say you I view you and put you right here
and we'll go and change the background color right away so we don't lose it.
And that background color Let me pull it up right here is.
Let's see here.
So with the controller selected and click here I put in a hex that Hex's 5 B 9 F C B.
Press return.
And now when when we click up here on any colors that's going to be under our recently used colors.
OK.
So that's going to be useful.
All right so that's going to be one of our dividers.
I'm just going to hold option and drag to make a copy of that.
And there we go.
All right so there is all of our elements doesn't look like much right now I know.
So let's go ahead and start refining our design here.
So let's get right up here.
This is an image so we can get rid of the text and go ahead and go ahead and add an image for it.
So this is going to be this is our close image and that's going to be right here.
That's right.
Yeah right there.
All right so let's go ahead and constrain that one so it can be 8 and 0 with the constraint margins
checked.
Then over here this guy's site was forty eight by 40.
So it looks a little nicer and you may notice these blue outlines on all of our elements that's just
the X code 9 beta bug that I've been getting.
Normally you'd be able to get rid of that by coming over here and clicking on show baluns rectangles.
But that's not fixing it.
So just about.
All right so let's get right here.
That's going to say smack man my computer is being really slow right so SMAC.
And we're going to change the font to you custom and Helvetica new.
Let's make this bold and this pump that up to say 19.
All right.
We're going to grab that press command equal to get to the right size and zoom in a little bit.
OK and then this color if I click here and then come over here and grab my font color come back here.
All right so this one is four to five for B 9.
Press enter and now this color is also going to be in our recently used.
So when you see me jump over here and grab one of these for future UI elements that's where these colors
come from OK.
For instance right now if we come here to our log button down here I can see here change the background
color to this blue right here and change the text color to white change the font to custom Helvetica
new.
17 is good but let's make you bold.
Say done then we're going to add some sizes to use with this is going to be 250 and the height is going
to be 50 kid and let's go ahead and fix these two dividers here we're going to say with of 250 and a
height of two right and then these guys are also going to be with 250
250 and get rid of the borders on these.
With both of those textfield selected I'm going to come over here and right here border style do.
None are going to change the color to that purple that we added.
And going to change the system font to custom and Helvetica new I would say regular fine.
And then we're going to change the give it a placeholder text or here for the first time I see a user
whose user name and for this and we're going to say password and since as a password if we come down
here to the check box here secure text entry that will make it so that when we enter stuff it'll just
be those black dots.
All right.
That's good.
Now let's do this button down here.
So what's this.
That's as don't have an account sign up here.
All right.
So my computer is running super slow so I just had to do a restart.
So hopefully it's working a little bit better now.
So we left off here.
Get ready to fix this last Bundes hymnal press command equal to get that up to the right size can change
the text color to that light blue color we're using to change the font to custom and Helvetica new and
drop this down to 12 size.
So it looks good.
And so everything is looking pretty good.
So let's go ahead and start adding constraints.
So for these two I'm going to go ahead and constraints for the width and height and then I'm going to
grab it and this smacker label right here and I'm going to throw those into a stack.
Are you cooking me down here in bed and stack.
And then I'm going to give that spacing of 12 and then I'm going to UPS with the stack you selected
constrain it 60 from the top and center it Center it horizontally in the container.
There we go.
Then for these guys right here the user name and their divider lines.
I'm going to embed in a stack of those for oh and for some reason I decided to put them in a horizontal
stack which is no we want so right here we want a vertical stack.
All right.
And we want it to be of line to leading and we don't want this to actually be right here.
While that really messed that up.
Not inside the view.
There you go.
Hopefully yours didn't not I messed that up so bad.
And for some reason it doesn't like it in stack because when they're when these UI views are bigger
than 50.
So we're going to have to constrain to a height of two and with two hundred and and we'll go ahead and
constrain the two text fields also to the width of two hundred and fifty.
All right.
And then we're going to give it spacing of 14 and that's starting to look a little better.
And now we're going to go and constrain it.
So I'm going to set it in the center so horizontally in container and then we're going to pin it 40
from the stack to you right here and say add one constraint.
So that looks good everything's nice and blue.
Now here are our constraints are good.
And then this guy I'm going to drag up here and Marino constrain it horizontally in its container and
we're going to need to add some constraints on that.
So for width and height width is going to be 250 and the height is 50.
So it's good.
And then we're also going to constrain hit 40 from the bottom of the stack above it.
And then for this button here and give it's some width and height and set it zero from the button above
it.
So it's right snug under it and the two also horizontally constrain it looks good.
All right.
So there we go.
That's coming together now.
So it went from a hodgepodge of just UI elements scattered all over.
And then you just kind of go through and you know like a craftsman just kind of refined it and crafted
into what you want it to look like.
Right.
So let's go and open up our simulator here and see how it looks.
So when you click on our menu click on a log in and there we go.
All right and last thing we're going to do in this video is just make it so that when we click on this
it gets dismissed right.
So to do that we're going to need a view controller file for this particular view.
So I'm going to sit here controller I say new file and this is going to be a Cocco touch class going
to see next and subclass of view controller.
And this is going to say we're going to call this log in VC I say next and create
and then I'm going to hold down option and click on Main to get it back over here.
So with the assistant editor open first I need to change the class for this controller right.
So when I come up here to it's identity inspector and change the class to the new controller file that
we just created called loggin visi.
So now we can add outlets and hide the actions and stuff over here in the log file.
I'm just kind of deleting some of this stuff we don't use and right here I'm going to have to be action
for this button right here.
So I'm going to control drag over and I'm going to say close pressed.
I say action and sick Nick and all we have to do here is just say this.
Miss Ann-Marie to see for animated version of.
Yes true.
And then for completion we're going to say no.
All right we're going to save that and run it.
And here we go and click on the menu button click log in and pops up.
Looks real great.
Everything.
Oh except for that we got our user name and password field mixed up.
So we'll fix that.
But let's see if this dismisses and it does indeed.
So that's looking good is going fix this real quick.
Yes.
I mean does storyboard and this actually illustrate something that I love about stack of use.
So if we had mess this up with just regular constraints we would have to remove the constraints for
each of these put them back in try to get it all worked out.
But here all we have to do is just kind of drag this down here and then drag this up here and the stack
handles everything else for us so that's really nice.
All right so I think we're I think we're good on this video.
We set out to create our log in VC and we have definitely done that.
We got all of the UI elements were able to segue to it and dismiss it.
Obviously we haven't gotten to the point where we can like actually enter usernames and passwords and
they should say logon never go hand and actually log in because we don't have any of the API stuff set
up right now.
You know we kind of need to get the UI set up so that we can make some meaningful progress on the code
side of things as well.
But yeah we're making some good progress so I'm going to go ahead and just add to make some comments
for our progress here since I restarted the computer.
I'm going to have to CD back into our repo CCD desktop and then CD the Mac say get status see all the
changes we made and make sure I'm on the right branch which is listen for so that's good.
And then I say get add that to add everything just changed.
Then get commit dash and say listen for.
All right.
And then I'm going to push this branch up to our online repulsing to say get push origin lesson.
Dash 0 4.
All right.
And that is good and the next lessons we're going to do a little bit more you stuff still we're going
to create our view for creating a new account.
And so if you're looking forward to that and I'll see you in the next one.