Right, let's look at how we actually start to design this app, so this is the finished source code
and I'm going to flip between this and the source code that I'm building alongside you, but it's a
lot easier to show you the finished object so you understand what we're going to be making.
So in this particular section of the storyboard, the main storyboard, we're going to have a NAV controller
and a table view, which we've done before, and we're going to have this standalone controller over
here called the Auth View Controller.
And I just tap that this is going to be attached to a class called Orfeu Controller.
Now, I'm sorry about the tiny font, but you can't change it in Xcode on certain sections, which is
just it blows my mind that they haven't included that.
Anyway, that's the top right section I'm looking at there for the custom class.
OK, so we are going to go ahead and build this screen from scratch.
So if we go over to our particular project, we're going to go to main storyboard.
And at the moment we just have a plain white screen.
We're going to leave that as is.
We're going to hit the plus at the top.
Right.
And we are going to drop, in a view, controller.
And so if you type stuff in, you normally get a hint at what you should drop in.
So this can just be standalone, it doesn't actually need a connection unless, of course, we wire
one in.
So what's the first thing we're going to do?
Well, I'm going to just zoom in and select this background a little bit.
We're going to look at the background color and we are perhaps going to drop it into a green color to
match what we've got here.
And I'm just going to see what color I used here.
Custom.
And if we tap custom, we should get the color there, we can select a little dropper icon.
Which will let us discover what that color is and then we can click and drag that green over into our
swatches here.
So if I close that, hopefully that is now available inside of this section.
And it is.
So there's the green at the bottom top that and that's that lime green color that we want.
So it's always nice when you're making an application to have something that stands out.
You know, if I load this up on the play store or the App Store, it's very eye catching color wise.
OK, so that's another top tip for putting stuff on the App Store.
People don't actually care what color it is, colors just to track their eyes.
They might care later on and say, this is so green.
I'm staring at green all the time.
I don't like it.
But in your screenshots for the App Store, nice, bright, bold colors.
They work very well, of course, depending on what vertical you're in, in app nations, if everything's
bright, bold colors, you don't want to copy them.
You actually want to stand out, perhaps put a toned down color.
OK, but we're not really concerned about that at this point.
So I'm going to hit plus and we're also going to drop a label in roughly somewhere they're going to
control.
Click up to the top.
We're going to have a top space and we are going to put this as centered horizontally in the container.
And this is going to be the title of our app.
Chit chat, and then we, of course, are going to change this font and the color of it and the size
of it, this is all over on the right hand side here.
I'm just adjusting the properties, so crank that up a bit.
If we open up the front dialog,
then we can look at the various fonts that we have.
So we have a system.
We have style.
With the italics system metallic.
So we can have system italic, you can also put in a custom font.
So we can select from whatever's on our machine or whatever is included in the IOC system.
I'm not exactly sure what it's doing here in terms of pulling in the font, but I do believe that this
will be available and we can test this straightaway, of course.
I've got to chat.
We have the family.
The font is still custom.
Uh, we can keep cranking that up until we are done.
So now if I just play this in the iPod Touch that we've got running in the background here.
We should get out, of course, it's not going to show the screen, is it is just going to be it's just
going to be here because we haven't any way to actually get to the screen yet.
So that's my fault.
All right.
We'll keep on building instead of actually looking at what it looks like at the moment, we need to
input boxes and email address and a password.
So let's go with a TextField.
Roughly there, and let's drop another one in.
I don't know why that's just popped up as the debug console.
Right, so both these items I can select, I can give them both a fixed width now, fixed widths of
fine.
If it's just a short bit of input that you're putting in, let's say two hundred thirty, and then we
can position them horizontally in the container.
But of course they don't know where they sit relative to everything else.
So I'm going to take this bottom one.
I'm going to connect it to the top, give it vertical spacing and then I'm going to center this bottom
one vertically in the container so it will sit dead center.
You can add a constraint to those that offsets that vertical constraint if you so wish.
So we might do that to make things look just a little bit better.
But now when we tap these, there are no yellow bars or red bars telling us everything is constrained.
So this top one is going to be the email address.
So over on the right side, we're going to put an email address.
And of course, the bottom placeholder is password.
OK, so placeholders just appear instead of the plain text.
As soon as you start typing, the placeholder goes away.
Now, what type of content type do we have for this?
Well, we want a password that's down here now that should put the asterisks in place so people can't
see your password over your shoulder.
Will not to obviously, anyway.
And of course, the upper one content type should be email address.
There it is down at the bottom.
Now the content type I don't think would change the keyboard.
So keyboard type, we want email address and then for password keyboard type.
Well, there won't be a password keyboard type because you can have any kind of letter, so we'll just
leave it as it is the email address and password.
And then what else have we got.
We got login register and forgot password so let's get them buttons in.
That's what I'm going to do is drop it somewhere there.
Control click and drag vertical spacing also drop in fixed horizontally.
I don't know why that has shifted itself, but we can change that, of course, it's double click,
this constraint.
And let's put this at say, I don't know what is it currently about 50.
Right, so that's going to move it up quite far.
It's a bit fuzzy to because you click these constraints once, but if you double click when they move,
so stupid Xcode.
So that's how button if you hold shift and press the Iraqis, it moves them in bigger increments.
Just a top tip there.
So the colour for the button is going to be white when to leave that as a system color.
But I am going to crank up the font a little bit.
And I am going to give the person probably a width, but we're also going to give it to the text that
it needs.
So now we sort of have this base button.
I can tap it, press command, see Command V, which will allow me to post it in.
Now in it pastes.
It doesn't actually.
What does it?
It doesn't copy over the constraints.
Actually, I'm not going to put off I'm going to put register.
So we have to actually constrain this ourselves once again, so we're going to have vertical spacing
and then we're going to have center horizontally, that's it.
So that should fit log in, register.
And finally, I'm going to paste forgot password, which I'm going to actually put near the bottom,
because that's traditionally where you would find that kind of button.
And then, of course, let's do that horizontally in the container.
Now I'm going to drop that font size down just a little bit.
Because it's not a button that we press often, and that's a good UI tip for you, if it's something
we don't press often, then we drop the font size, we make it much more subtle.
OK, so those are all the buttons and the text input screens.
And we basically have a clone of the one I created before.
The one I created before has a slightly different font, but for our purposes, I don't think that matters
that much.
Let's move this up.
Just a touch.
Right.
So that is the off screen done.