Hey everybody this is Caleb with Devar slopes dotcom and in this video we're going to build out our
authentication View Controller our log in view controller and we're going to create some custom subclasses
so that we can make it look really nice and pretty.
Let's begin.
So go ahead and pull open that X code project and we probably left off on our data service like we ended
the last video.
And in the last video I mentioned that we would be starting to log in users and push up the user to
firebase.
We're not yet there because we don't yet have a user interface so let's go ahead and let's build that
first go to main storyboard and what we're going to do is we're going to zoom out and we're not even
going to touch any of these until later on so we're going to move those out of the way and we're going
to drag on a View Controller.
OK.
Now this is where we're going to build our authentication VC and in authentication Visi we're going
to have the option to tap log in with Facebook log in with Google or log in with e-mail.
So we're going to set up that interface just to show what it'll look like and let's do that now.
So the background of this I want to be dark grey.
And the reason for that is because this is kind of like a hacker program or themed app so I think that
it should utilize a lot of darker colors and some like bright greens and blues kind of to give it that
terminal hacker look.
So go in to the attributes Inspektor then select the view of this view controller and we're going to
change the background to be this dark gray color.
OK and I can't remember which one is the darkest one that looks like it.
There we go.
So if you want to know the hex value for this color is 2:9 to be 3:04 and you can set it like so.
All right so next what we're going to do is we're going to put a nice little image in the background
and it just kind of makes it look pretty cool.
If you ask me.
So I'm just going to go ahead and search for an image view and I'm going to go ahead and stretch it
so that it's about 50 percent of the screen.
Let's see.
Well you know what if our entire height of our view is 667 we can go ahead and put this at about 334
and that should put us right about in the middle.
That will be good enough.
Yeah.
All right.
So let's go ahead and we're going to look to see what images we have available to us.
And right now it's nothing except for first and second because those are the ones provided to us by
the project.
So now is a great time to import the assets that come as a part of this project.
And you can access those by tapping on the download source code button in the slopes app.
All right.
I'm going to go ahead and drag my assets in.
These are the ones you will download if you download it from the source code and go ahead and just drag
these in and drop them in place and you'll see that they go right where they're supposed to go.
Now we can get rid of first and second those are the ones provided to us from the project.
We don't need them.
So go ahead and delete those.
And now when we go back you'll notice that we can access all of our images.
We're going to add in log in B.G. image.
But on the issue is that if we squished this you'll notice the image get squished as well and we don't
want that.
So let's go ahead and do aspect fill so that it maintains that data aspect ratio and then we're going
to pin this to the top left and right and give it a fixed height of 3:34.
Now it'll stay in place that's beautiful.
Now let's go ahead and put on a label.
We're going to go ahead and drag that on right here and we're going to stretch it to make it a little
wider.
Make it a little taller and center it.
Now we're going to use a green color for the text and I'll show you what that is.
It's eight f.c.
Sorry.
Yeah.
Eight F C F for E is the hex value.
And I'm going to center it and I'm going to bump it up to maybe 24 and we're going to change the font
to be men low.
And that's the font we're going to use for this entire app.
By the way is Menlo Menlo is the same font that X code uses for showing code which makes it extra cool.
And again you're gonna have to bump it up to 24.
Let's go ahead and change this from label to underscore breakpoint and there we go.
Supercool.
So now breakpoint has a label but we should definitely keep this in its place.
So go ahead and pinot 46 to the left 29 from the top and 46 from the right.
And you know what I don't really like that I like even numbers that are nice and pretty so let's go
45 45 and 30.
Add those constraints and you'll see it's ready to go it's in place.
Now what we're going to do is we're going to add a view so let's drop that on just like so and we're
going to try our best to center this and make it fit perfectly in the center that looks good.
Use those handy dandy snap guides that Apple has provided.
And this looks great but what we need to do first is we need to pin it in place so that it does not
get lost.
And for things that are perfectly centered what I like to do is just to give it a fixed width and height.
Add those constraints then I like to go ahead and pin it horizontally and vertically in the container
and that will keep it perfectly centered.
Add those constraints.
Awesome.
And now we want to give this a gray color but we want it to be lighter than the background so it stands
out.
So I'm going to give it this color and if you want to know what that is.
It's hard to see here that it's lighter but it is 4 1 4 5 5 0 is the hex value for this.
And now we're going to go ahead and use a stack of you to make a stack of labels and buttons that we
need.
So go ahead and let's drag on a UI stack you a vertical stack for you that is and we're going to add
it right to this view.
And we're going to go ahead.
And we're going to put it in here.
Maybe 20 or 30 from the right and left.
And let's go ahead and let's do some pinning here.
Yeah let's do maybe 20.
From every side.
That looks great.
OK good.
Now it's in place and now we can just drag in the elements that we need in order so we want it to say
log in at the top so that will be a label of course drag that in next we need a button.
So drag in the UI button and you'll see it goes right beneath it and we'll fix all of the formatting
in just a second.
We're going to need log in with Google beneath that.
So put another button then we need another UI label to give the option of saying or log in with email
so go ahead and type label.
Looking pretty good there.
Whoops that did not add into our stack view.
There we go.
And finally do another button.
So that's going to be the log in with email button and make sure that adds in.
Whoops it did not.
There we go.
All right so now let's go ahead and let's do some work to make these look pretty.
We're going to need both of these labels to be centered so you can select both using the command key
then press center change the font to Menlo like so very good.
And these can probably afford to be at about 18 that's fine.
And we're going to go ahead and change the color to this teal ish blue which if you want to know is
0 4 A B C 5.
All right.
So this label at the top we're going to change this to say underscore log in and for this one I'm going
to make this just say or because it's going to be log into Facebook log on with Google or log in with
email because that's kind of the last option that someone would want.
So go ahead and for the button we're going to change this to say log in with FP for short.
We're going to change this to say log in with G plus K for Google and we're going to go ahead and call
this by email.
OK.
And we're going to need to change the font on all of these.
Yeah let's go ahead and change the font on this to be Menlo.
So it looks cool.
There we go Menlo size 18 is probably.
Too big.
Let's go down to 14 or so and let's make this font white OK.
And you know what we're actually going to change both buttons to have a white font for the Facebook
button.
Go ahead and scroll down and we're going to change the background color to actually utilize the real
Facebook blue color and if you want to know that for 3:5 be 9:1.
Very cool 4.
Plus we're going to change the background color to be the same red that Google likes to use which if
you will know is C5 for 3D.
Very cool.
And the e-mail button is going to just say by e-mail but we want to give it an e-mail image to be next
to the button.
So go ahead and scroll down and we need to choose e-mail icon.
Now you probably noticed that one the font changed and two it's pretty squished.
So I'm just going to put a space and press enter and that will give it a little bit of space next to
the pictures so they're not so smashed together.
Now let's go change the font again from custom to Menlo to size 14 or so.
That looks pretty good.
And now we just need to modify our stack views so that everything is spaced nicely.
Now of course we're going to want spacing between these items so give it maybe 10 bits of spacing.
It looks pretty good.
And for the for the distribution.
Go ahead and select fill proportionately and you'll see that that looks better.
It's not yet totally perfect because we have some like weird spacing here and you know I think to fix
that.
I'm actually just going to pull out this e-mail label and put it beneath the stack view and then I'm
going to modify the stack to your constraints to go up a little bit.
Let's just remove the bottom space constraint and let's put this in its place.
That looks pretty good.
Lower the height here let's give it 20.
From the left and right.
And let's do 20 from the bottom.
That looks good.
And then the stack view we're going to go ahead and Whoops oh we're going to need to pin that.
So let's go ahead.
Select the stack if you missed it and we're going to pin that 20 from the label at the bottom.
And of course that's going to pull it up.
Whoops.
Because we did not set a height constraint for this guy.
Let's go ahead and set a height of let's try 40.
All right.
That looks pretty good.
Awesome.
So let's let's go ahead and let's just make sure everything looks good this is 59 high.
This is fifty eight point five.
It's not perfect.
That's kind of bothering me actually.
So let's go ahead let's make our label a little bit taller.
Just give it a little bit more space.
And that should allow for these to be pretty darn close to one another.
You know that's not exactly perfect.
Let's go ahead and let's try Phil equally.
And this should make these exact same size.
Now this is fifty four point five fifty four point five.
OK.
And that's that's fine.
You know I really I still don't like how this is far away so I'm going to make the top space of this
beat 10.
And that should bring them a little closer together.
Still not right maybe zero.
Let's see.
OK.
So now these look a little more evenly spaced together and the buttons are the same height.
That's good.
They're nice and even and this looks great.
Now let's go ahead and let's design the view controller that will pop up when you tap by e-mail.
So let's go ahead and let's just drag in a new controller here.
We're going to set the background to be that same gray color.
And so we're going to go find it.
And that looks good.
OK this color again is 4 1 4 5 5 0.
And what we need to do is we need a cancel button.
We need some text field and some labels and another button for signing in.
So let's go ahead and let's drag in a button we're going to put it up here.
That will be our cancel button.
Let's set the image now to close.
OK.
Next dragging another button here and this one is just going to say seinen stretches so that it fits
that looks good.
And for this button let's go ahead and change the font to Menlo because Menlo just looks really cool.
Let's change the size to 18 and let's change the color to our lovely teal color.
Next we're going to drag in a UI textfield like so this will be for entering your e-mail and the other
one will be for entering your password.
And we're going to stretch these so they fit nicely in the View Controller.
Looks pretty good.
OK.
And we'll fix the sizes later with the stack.
Don't worry.
And at the very top we should add a label.
If I could spell it right that would be helpful you.
There we go you by label.
And we're going to change this to say e-mail seinen stretches so that it fits center the text and change
the font and color to custom men low size 18 and the color is teal looks pretty good.
All right.
So now let's go ahead make a stack few to put all these in.
We're going to select all four.
We're going to select all three here.
Now let's go ahead and let's select all three of these and we're going to put them in a stack.
View by clicking the stack button when they are all three selected.
All right.
That looks good.
And of course it gets a little messed up but we will fix it.
Not to worry.
Let's start actually by pinning this button exactly where it is.
We're going to pin it eight from the margin and zero from the other margin and give it a fixed width
and height of 30.
Add those constraints.
Next up we're going to go ahead and drag this all the way over here and it's going to get pinned.
20 from the top zero from the left zero from the right.
And let's go ahead and let's just start with that cool.
That looks great.
I'm not giving at a height constraint on purpose because I want to be able to give it some spacing of
20 beneath each field or between each field.
Now of course the alignment is centered and that's why these are all squished so change that to fill
and that looks great.
You know these are a little bit too long so I want to go ahead and modify the constraints here so that
they're not so squishy.
So let's go ahead and click Edit type 20 to bring it in a little bit.
And on this side we're going to also type 20.
And that brings in it in a little bit from the left and right sides that looks great.
So this is now in its place and we're going to go ahead and center this button and we're going to pin
it 20 from the stack view.
So pinnate from the top and go ahead and give it.
Let's let's give it a fixed width of maybe 80.
That looks good.
And to keep it in the center select the alignment button and pin it horizontally in the container.
Very cool.
So now that's in place and we're leaving enough room for the keyboard drucken to do any fancy sliding
of buttons just yet but just hang with me here.
Now we're going to go ahead and set up these text to you so they look really really cool and we're actually
going to set up a custom view subclass to make these look really nice in just a moment.
But for now go ahead and go to the attributes inspector.
We're going to set the border to be square and we're going to set the background color to be the dark
dark gray color.
OK.
So you can see that it really stands out nicely on the background there.
Very cool.
And what we're going to do next is we're going to change the font to be Menlo cause it should be the
same font as the rest of the app.
We should have a consistent font style So let's go ahead and type Menlo.
Let's give it 18 for the size and what we're going to do next is we're going to set placeholder text
per field.
Now for this field we're going to go ahead and type e-mail because that's where the e-mail will go.
You can't really see it.
But that's OK.
Next we're going to go ahead and type password and for the password field since it's a secure type of
information we want to check secure text entry.
OK.
That will make sure that our password will be covered up with the appropriate dots when you type the
password.
OK.
Very cool.
And what we're going to do next is we're going to actually change our font color to be that bright green
color and we can do that by selecting both text fields choosing color and then select the green color.
Now there's something that's a problem that we can't really see the placeholder text and that's because
you can't set the placeholder text color in Interface Builder or you have to do it in code.
So that's what we're going to do.
Now we're going to go create a custom view subclass for this textfield and we're also going to set it
so that the text can be inset a little bit inside the text field.
Before we do that let's go ahead and set a fixed height on these text fields so that they are nice and
tall.
So select both.
Click the pin menu and we're going to give them a height of 50 k that just gives them a really cool
height that makes them kind of stand out.
I really like it.
So you know what this video is getting a little long.
We've built the UI that's great.
But how about this in the next video we're going to go ahead and set up our custom view subclasses.
We'll set up our view controller code files to go along with these interface builder displays and we'll
set that all up in the next video.
I don't want to make this video too long so.
Thank you guys for going through this and we'll set up the custom view subclasses and the View Controller
files in the next video.
Go ahead and head over that way and I'll see you there.