1

00:00:00,480 --> 00:00:06,270

Right, let's look at how we actually start to design this app, so this is the finished source code



2

00:00:06,270 --> 00:00:10,890

and I'm going to flip between this and the source code that I'm building alongside you, but it's a



3

00:00:10,890 --> 00:00:14,760

lot easier to show you the finished object so you understand what we're going to be making.



4

00:00:15,300 --> 00:00:20,730

So in this particular section of the storyboard, the main storyboard, we're going to have a NAV controller



5

00:00:20,730 --> 00:00:26,070

and a table view, which we've done before, and we're going to have this standalone controller over



6

00:00:26,070 --> 00:00:28,440

here called the Auth View Controller.



7

00:00:28,710 --> 00:00:35,610

And I just tap that this is going to be attached to a class called Orfeu Controller.



8

00:00:35,880 --> 00:00:40,470

Now, I'm sorry about the tiny font, but you can't change it in Xcode on certain sections, which is



9

00:00:40,470 --> 00:00:43,240

just it blows my mind that they haven't included that.



10

00:00:43,830 --> 00:00:48,660

Anyway, that's the top right section I'm looking at there for the custom class.



11

00:00:49,680 --> 00:00:53,850

OK, so we are going to go ahead and build this screen from scratch.



12

00:00:54,150 --> 00:00:57,990

So if we go over to our particular project, we're going to go to main storyboard.



13

00:00:58,200 --> 00:01:01,260

And at the moment we just have a plain white screen.



14

00:01:01,440 --> 00:01:03,210

We're going to leave that as is.



15

00:01:03,480 --> 00:01:05,130

We're going to hit the plus at the top.



16

00:01:05,130 --> 00:01:05,550

Right.



17

00:01:05,910 --> 00:01:09,900

And we are going to drop, in a view, controller.



18

00:01:12,410 --> 00:01:16,970

And so if you type stuff in, you normally get a hint at what you should drop in.



19

00:01:17,420 --> 00:01:22,550

So this can just be standalone, it doesn't actually need a connection unless, of course, we wire



20

00:01:22,550 --> 00:01:23,220

one in.



21

00:01:24,050 --> 00:01:25,590

So what's the first thing we're going to do?



22

00:01:25,610 --> 00:01:29,230

Well, I'm going to just zoom in and select this background a little bit.



23

00:01:29,930 --> 00:01:36,290

We're going to look at the background color and we are perhaps going to drop it into a green color to



24

00:01:36,290 --> 00:01:37,300

match what we've got here.



25

00:01:37,940 --> 00:01:41,350

And I'm just going to see what color I used here.



26

00:01:41,360 --> 00:01:41,990

Custom.



27

00:01:43,640 --> 00:01:49,130

And if we tap custom, we should get the color there, we can select a little dropper icon.



28

00:01:51,680 --> 00:01:58,190

Which will let us discover what that color is and then we can click and drag that green over into our



29

00:01:58,190 --> 00:01:58,970

swatches here.



30

00:01:59,480 --> 00:02:06,560

So if I close that, hopefully that is now available inside of this section.



31

00:02:06,560 --> 00:02:07,020

And it is.



32

00:02:07,030 --> 00:02:11,640

So there's the green at the bottom top that and that's that lime green color that we want.



33

00:02:12,140 --> 00:02:16,970

So it's always nice when you're making an application to have something that stands out.



34

00:02:17,330 --> 00:02:22,880

You know, if I load this up on the play store or the App Store, it's very eye catching color wise.



35

00:02:23,960 --> 00:02:28,640

OK, so that's another top tip for putting stuff on the App Store.



36

00:02:28,670 --> 00:02:32,630

People don't actually care what color it is, colors just to track their eyes.



37

00:02:33,200 --> 00:02:35,750

They might care later on and say, this is so green.



38

00:02:35,750 --> 00:02:36,890

I'm staring at green all the time.



39

00:02:36,890 --> 00:02:37,550

I don't like it.



40

00:02:37,910 --> 00:02:41,720

But in your screenshots for the App Store, nice, bright, bold colors.



41

00:02:41,720 --> 00:02:47,120

They work very well, of course, depending on what vertical you're in, in app nations, if everything's



42

00:02:47,120 --> 00:02:49,190

bright, bold colors, you don't want to copy them.



43

00:02:49,190 --> 00:02:52,100

You actually want to stand out, perhaps put a toned down color.



44

00:02:53,000 --> 00:02:56,450

OK, but we're not really concerned about that at this point.



45

00:02:57,170 --> 00:03:02,330

So I'm going to hit plus and we're also going to drop a label in roughly somewhere they're going to



46

00:03:02,330 --> 00:03:02,690

control.



47

00:03:02,690 --> 00:03:03,650

Click up to the top.



48

00:03:04,310 --> 00:03:11,360

We're going to have a top space and we are going to put this as centered horizontally in the container.



49

00:03:11,990 --> 00:03:14,030

And this is going to be the title of our app.



50

00:03:17,380 --> 00:03:24,400

Chit chat, and then we, of course, are going to change this font and the color of it and the size



51

00:03:24,400 --> 00:03:27,010

of it, this is all over on the right hand side here.



52

00:03:27,040 --> 00:03:30,550

I'm just adjusting the properties, so crank that up a bit.



53

00:03:31,090 --> 00:03:33,340

If we open up the front dialog,



54

00:03:37,090 --> 00:03:40,270

then we can look at the various fonts that we have.



55

00:03:40,600 --> 00:03:41,740

So we have a system.



56

00:03:42,070 --> 00:03:43,600

We have style.



57

00:03:45,940 --> 00:03:49,630

With the italics system metallic.



58

00:03:50,990 --> 00:03:55,580

So we can have system italic, you can also put in a custom font.



59

00:03:56,870 --> 00:04:02,160

So we can select from whatever's on our machine or whatever is included in the IOC system.



60

00:04:02,180 --> 00:04:08,060

I'm not exactly sure what it's doing here in terms of pulling in the font, but I do believe that this



61

00:04:08,060 --> 00:04:10,400

will be available and we can test this straightaway, of course.



62

00:04:12,270 --> 00:04:13,310

I've got to chat.



63

00:04:13,310 --> 00:04:15,430

We have the family.



64

00:04:15,440 --> 00:04:16,820

The font is still custom.



65

00:04:18,300 --> 00:04:21,710

Uh, we can keep cranking that up until we are done.



66

00:04:22,040 --> 00:04:26,330

So now if I just play this in the iPod Touch that we've got running in the background here.



67

00:04:28,240 --> 00:04:34,270

We should get out, of course, it's not going to show the screen, is it is just going to be it's just



68

00:04:34,270 --> 00:04:37,840

going to be here because we haven't any way to actually get to the screen yet.



69

00:04:38,320 --> 00:04:39,160

So that's my fault.



70

00:04:39,670 --> 00:04:40,000

All right.



71

00:04:40,000 --> 00:04:45,670

We'll keep on building instead of actually looking at what it looks like at the moment, we need to



72

00:04:45,670 --> 00:04:48,030

input boxes and email address and a password.



73

00:04:48,970 --> 00:04:51,400

So let's go with a TextField.



74

00:04:54,390 --> 00:04:57,450

Roughly there, and let's drop another one in.



75

00:05:02,040 --> 00:05:05,220

I don't know why that's just popped up as the debug console.



76

00:05:06,560 --> 00:05:15,740

Right, so both these items I can select, I can give them both a fixed width now, fixed widths of



77

00:05:15,740 --> 00:05:16,190

fine.



78

00:05:16,190 --> 00:05:22,010

If it's just a short bit of input that you're putting in, let's say two hundred thirty, and then we



79

00:05:22,010 --> 00:05:24,970

can position them horizontally in the container.



80

00:05:25,790 --> 00:05:28,510

But of course they don't know where they sit relative to everything else.



81

00:05:28,520 --> 00:05:30,650

So I'm going to take this bottom one.



82

00:05:31,070 --> 00:05:36,770

I'm going to connect it to the top, give it vertical spacing and then I'm going to center this bottom



83

00:05:36,770 --> 00:05:41,020

one vertically in the container so it will sit dead center.



84

00:05:41,300 --> 00:05:46,640

You can add a constraint to those that offsets that vertical constraint if you so wish.



85

00:05:47,510 --> 00:05:50,390

So we might do that to make things look just a little bit better.



86

00:05:50,750 --> 00:05:55,720

But now when we tap these, there are no yellow bars or red bars telling us everything is constrained.



87

00:05:56,360 --> 00:05:59,300

So this top one is going to be the email address.



88

00:05:59,330 --> 00:06:02,990

So over on the right side, we're going to put an email address.



89

00:06:04,490 --> 00:06:08,090

And of course, the bottom placeholder is password.



90

00:06:10,090 --> 00:06:14,840

OK, so placeholders just appear instead of the plain text.



91

00:06:14,840 --> 00:06:17,020

As soon as you start typing, the placeholder goes away.



92

00:06:18,080 --> 00:06:21,290

Now, what type of content type do we have for this?



93

00:06:22,010 --> 00:06:28,940

Well, we want a password that's down here now that should put the asterisks in place so people can't



94

00:06:28,940 --> 00:06:30,320

see your password over your shoulder.



95

00:06:31,220 --> 00:06:32,800

Will not to obviously, anyway.



96

00:06:33,560 --> 00:06:38,810

And of course, the upper one content type should be email address.



97

00:06:39,290 --> 00:06:40,440

There it is down at the bottom.



98

00:06:41,720 --> 00:06:45,320

Now the content type I don't think would change the keyboard.



99

00:06:46,310 --> 00:06:52,400

So keyboard type, we want email address and then for password keyboard type.



100

00:06:53,000 --> 00:06:57,890

Well, there won't be a password keyboard type because you can have any kind of letter, so we'll just



101

00:06:57,890 --> 00:07:02,540

leave it as it is the email address and password.



102

00:07:02,960 --> 00:07:04,070

And then what else have we got.



103

00:07:04,070 --> 00:07:09,590

We got login register and forgot password so let's get them buttons in.



104

00:07:10,550 --> 00:07:13,340

That's what I'm going to do is drop it somewhere there.



105

00:07:13,910 --> 00:07:19,970

Control click and drag vertical spacing also drop in fixed horizontally.



106

00:07:22,500 --> 00:07:27,900

I don't know why that has shifted itself, but we can change that, of course, it's double click,



107

00:07:27,900 --> 00:07:28,740

this constraint.



108

00:07:31,080 --> 00:07:35,550

And let's put this at say, I don't know what is it currently about 50.



109

00:07:38,900 --> 00:07:40,940

Right, so that's going to move it up quite far.



110

00:07:44,930 --> 00:07:50,240

It's a bit fuzzy to because you click these constraints once, but if you double click when they move,



111

00:07:50,840 --> 00:07:53,780

so stupid Xcode.



112

00:07:53,840 --> 00:07:59,930

So that's how button if you hold shift and press the Iraqis, it moves them in bigger increments.



113

00:07:59,930 --> 00:08:01,150

Just a top tip there.



114

00:08:01,820 --> 00:08:07,070

So the colour for the button is going to be white when to leave that as a system color.



115

00:08:07,080 --> 00:08:09,800

But I am going to crank up the font a little bit.



116

00:08:11,780 --> 00:08:19,610

And I am going to give the person probably a width, but we're also going to give it to the text that



117

00:08:19,610 --> 00:08:19,990

it needs.



118

00:08:20,590 --> 00:08:22,460

So now we sort of have this base button.



119

00:08:22,490 --> 00:08:27,020

I can tap it, press command, see Command V, which will allow me to post it in.



120

00:08:27,260 --> 00:08:28,180

Now in it pastes.



121

00:08:28,190 --> 00:08:29,390

It doesn't actually.



122

00:08:31,670 --> 00:08:32,120

What does it?



123

00:08:33,530 --> 00:08:35,630

It doesn't copy over the constraints.



124

00:08:40,170 --> 00:08:42,120

Actually, I'm not going to put off I'm going to put register.



125

00:08:45,040 --> 00:08:49,660

So we have to actually constrain this ourselves once again, so we're going to have vertical spacing



126

00:08:49,940 --> 00:08:53,860

and then we're going to have center horizontally, that's it.



127

00:08:54,880 --> 00:08:56,910

So that should fit log in, register.



128

00:08:57,130 --> 00:09:03,340

And finally, I'm going to paste forgot password, which I'm going to actually put near the bottom,



129

00:09:04,720 --> 00:09:09,220

because that's traditionally where you would find that kind of button.



130

00:09:15,010 --> 00:09:18,340

And then, of course, let's do that horizontally in the container.



131

00:09:19,480 --> 00:09:22,770

Now I'm going to drop that font size down just a little bit.



132

00:09:25,500 --> 00:09:30,750

Because it's not a button that we press often, and that's a good UI tip for you, if it's something



133

00:09:30,750 --> 00:09:34,980

we don't press often, then we drop the font size, we make it much more subtle.



134

00:09:35,460 --> 00:09:39,510

OK, so those are all the buttons and the text input screens.



135

00:09:39,840 --> 00:09:43,050

And we basically have a clone of the one I created before.



136

00:09:44,100 --> 00:09:48,540

The one I created before has a slightly different font, but for our purposes, I don't think that matters



137

00:09:48,540 --> 00:09:49,020

that much.



138

00:09:49,440 --> 00:09:50,220

Let's move this up.



139

00:09:50,220 --> 00:09:50,910

Just a touch.



140

00:09:51,930 --> 00:09:52,300

Right.



141

00:09:52,560 --> 00:09:54,930

So that is the off screen done.