1

00:00:08,110 --> 00:00:10,670

Hey everybody this is Caleb with Dev slopes.



2

00:00:10,970 --> 00:00:16,860

And in this video we're going to build out our authentication View Controller our log in view controller



3

00:00:16,860 --> 00:00:23,160

and we're going to create some custom subclasses so that we can make it look really nice and pretty.



4

00:00:23,160 --> 00:00:23,910

Let's begin.



5

00:00:23,940 --> 00:00:30,210

So go ahead and pull open that X code project and we probably left off on our data service like we ended



6

00:00:30,510 --> 00:00:31,540

the last video.



7

00:00:31,740 --> 00:00:37,290

And in the last video I mentioned that we would be starting to log in users and push up the user to



8

00:00:37,290 --> 00:00:38,100

firebase.



9

00:00:38,190 --> 00:00:42,510

We're not yet there because we don't yet have a user interface so let's go ahead and let's build that



10

00:00:42,510 --> 00:00:49,470

first go to main storyboard and what we're going to do is we're going to zoom out and we're not even



11

00:00:49,470 --> 00:00:54,750

going to touch any of these until later on so we're going to move those out of the way and we're going



12

00:00:54,750 --> 00:00:56,750

to drag on a View Controller.



13

00:00:56,880 --> 00:00:57,480

OK.



14

00:00:57,780 --> 00:01:03,480

Now this is where we're going to build our authentication Visi and in authentication Visi we're going



15

00:01:03,480 --> 00:01:10,570

to have the option to tap log in with Facebook log in with Google or log in with e-mail.



16

00:01:10,590 --> 00:01:15,490

So we're going to set up that interface just to show what it will look like and let's do that now.



17

00:01:15,720 --> 00:01:21,010

So the background of this I want to be dark grey.



18

00:01:21,030 --> 00:01:26,250

And the reason for that is because this is kind of like a hacker program or themed app so I think that



19

00:01:26,250 --> 00:01:31,530

it should utilize a lot of darker colors and some like bright greens and blues kind of to give it that



20

00:01:31,530 --> 00:01:33,110

terminal hacker look.



21

00:01:33,420 --> 00:01:40,710

So go in to the attributes Inspektor then select the view of this view controller and we're going to



22

00:01:40,710 --> 00:01:45,570

change the background to be this dark gray color.



23

00:01:45,880 --> 00:01:49,940

OK and I can't remember which one is the darkest one that looks like it.



24

00:01:49,950 --> 00:01:50,680

There we go.



25

00:01:50,820 --> 00:01:58,460

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.



26

00:01:58,860 --> 00:01:59,150

All right.



27

00:01:59,160 --> 00:02:03,120

So next what we're going to do is we're going to put a nice little image in the background and it just



28

00:02:03,120 --> 00:02:05,160

kind of makes it look pretty cool.



29

00:02:05,220 --> 00:02:06,240

If you ask me.



30

00:02:06,480 --> 00:02:12,030

So I'm just going to go ahead and search for an image view and I'm going to go ahead and stretch it



31

00:02:12,030 --> 00:02:16,050

so that it's about 50 percent of the screen.



32

00:02:16,050 --> 00:02:17,070

Let's see.



33

00:02:17,070 --> 00:02:25,890

Well you know what if our entire height of our view is 667 we can go ahead and put this at about 334



34

00:02:25,890 --> 00:02:27,830

and that should put us right about in the middle.



35

00:02:29,490 --> 00:02:30,310

That will be good enough.



36

00:02:30,320 --> 00:02:30,640

Yeah.



37

00:02:30,650 --> 00:02:30,910

All right.



38

00:02:30,920 --> 00:02:34,950

So let's go ahead and we're going to look to see what images we have available to us.



39

00:02:34,970 --> 00:02:41,120

And right now it's nothing except for first and second because those are the ones provided to us by



40

00:02:41,210 --> 00:02:45,880

the project so now's a great time to import the assets that come as a part of this project.



41

00:02:45,920 --> 00:02:50,500

And you can access those by tapping on the download source code button in the slopes app.



42

00:02:50,510 --> 00:02:50,770

All right.



43

00:02:50,780 --> 00:02:53,800

I'm going to go ahead and drag my assets in.



44

00:02:53,810 --> 00:02:58,370

These are the ones you will download if you download it from the source code and go ahead and just drag



45

00:02:58,370 --> 00:03:02,960

these in and drop them in place and you'll see that they go right where they're supposed to go.



46

00:03:03,140 --> 00:03:08,180

Now we can get rid of first and second those are the ones provided to us from the project.



47

00:03:08,180 --> 00:03:08,810

We don't need them.



48

00:03:08,840 --> 00:03:10,500

So go ahead and delete those.



49

00:03:10,730 --> 00:03:16,060

And now when we go back you'll notice that we can access all of our images.



50

00:03:16,100 --> 00:03:18,960

We're going to add in log in B.G. image.



51

00:03:19,100 --> 00:03:23,840

But the issue is that if we squished this you'll notice the image get squished as well and we don't



52

00:03:23,840 --> 00:03:24,230

want that.



53

00:03:24,230 --> 00:03:30,140

So let's go ahead and do aspect fill so that it maintains that that aspect ratio and then we're going



54

00:03:30,140 --> 00:03:36,580

to pin this to the top left and right and give it a fixed height of 3:34.



55

00:03:36,590 --> 00:03:39,140

Now it'll stay in place that's beautiful.



56

00:03:39,140 --> 00:03:41,500

Now let's go ahead and put on a label.



57

00:03:41,570 --> 00:03:46,580

We're going to go ahead and drag that on right here and we're going to stretch it to make it a little



58

00:03:46,580 --> 00:03:51,610

wider make it a little taller and center it.



59

00:03:51,650 --> 00:03:55,670

Now we're going to use a green color for the text and I'll show you what that is.



60

00:03:55,670 --> 00:03:57,900

It's eight f.c.



61

00:03:58,040 --> 00:03:58,620

Sorry.



62

00:03:58,730 --> 00:04:02,210

Yeah eight F C F for E is the hex value.



63

00:04:02,480 --> 00:04:08,120

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



64

00:04:08,570 --> 00:04:10,790

to be men low.



65

00:04:10,820 --> 00:04:12,850

And that's the font we're going to use for this entire app.



66

00:04:12,860 --> 00:04:20,180

By the way is Menlo Menlo is the same font that X code uses for showing code which makes it extra cool.



67

00:04:20,180 --> 00:04:23,180

And again you're gonna have to bump it up to 24.



68

00:04:23,180 --> 00:04:29,510

Let's go ahead and change this from label to underscore breakpoint and there we go.



69

00:04:29,690 --> 00:04:30,790

Supercool.



70

00:04:30,800 --> 00:04:35,860

So now breakpoint has a label but we should definitely keep this in its place.



71

00:04:35,870 --> 00:04:41,620

So go ahead and pinnate 46 to the left 29 from the top and 46 from the right.



72

00:04:41,630 --> 00:04:45,350

And you know what I don't really like that I like even numbers that are nice and pretty so let's go



73

00:04:45,350 --> 00:04:48,140

45 45 and 30.



74

00:04:48,410 --> 00:04:51,040

Add those constraints and you'll see it's ready to go.



75

00:04:51,040 --> 00:04:52,460

It's in place.



76

00:04:52,460 --> 00:04:59,450

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



77

00:04:59,450 --> 00:05:06,220

going to try our best to center this and make it fit perfectly in the center that looks good.



78

00:05:06,260 --> 00:05:10,250

Use those handy dandy snap guides that Apple has provided.



79

00:05:10,520 --> 00:05:11,530

And this looks great.



80

00:05:11,600 --> 00:05:16,530

But what we need to do first is we need to pin it in place so that it does not get lost.



81

00:05:16,700 --> 00:05:21,690

And for things that are perfectly centered what I like to do is just to give it a fixed width and height.



82

00:05:21,890 --> 00:05:27,350

Add those constraints then I like to go ahead and pin it horizontally and vertically in the container



83

00:05:27,350 --> 00:05:29,330

and that will keep it perfectly centered.



84

00:05:29,390 --> 00:05:30,850

Add those constraints.



85

00:05:30,860 --> 00:05:31,810

Awesome.



86

00:05:31,880 --> 00:05:37,280

And now we want to give this a gray color but we want it to be lighter than the background so it stands



87

00:05:37,280 --> 00:05:38,120

out.



88

00:05:38,150 --> 00:05:41,990

So I'm going to give it this color and if you want to know what that is.



89

00:05:41,990 --> 00:05:49,760

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.



90

00:05:49,820 --> 00:05:56,270

And now we're going to go ahead and use a stack to make a stack of labels and buttons that we need.



91

00:05:56,270 --> 00:06:02,870

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



92

00:06:02,870 --> 00:06:08,090

it right to this UI view and we're going to go ahead and we're going to put it in here.



93

00:06:08,150 --> 00:06:15,180

Maybe 20 or 30 from the right and left and let's go ahead and let's do some pinning here.



94

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

Yeah let's do maybe 20.



95

00:06:16,850 --> 00:06:19,080

From every side.



96

00:06:19,340 --> 00:06:20,880

That looks great.



97

00:06:21,460 --> 00:06:22,100

OK good.



98

00:06:22,100 --> 00:06:26,230

Now it's in place and now we can just drag in the elements that we need in order.



99

00:06:26,230 --> 00:06:33,670

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



100

00:06:33,700 --> 00:06:34,930

button.



101

00:06:35,020 --> 00:06:40,470

So drag in a button and you'll see it goes right beneath it and we'll fix all of the formatting in just



102

00:06:40,470 --> 00:06:41,520

a second.



103

00:06:41,620 --> 00:06:44,150

We're going to need log in with Google beneath that.



104

00:06:44,200 --> 00:06:50,980

So put another button then we need another UI label to give the option of saying or log in with email.



105

00:06:50,980 --> 00:06:54,640

So go ahead and type label.



106

00:06:54,640 --> 00:06:55,960

Looking pretty good there.



107

00:06:56,110 --> 00:06:58,360

Whoops that did not add into our stack.



108

00:06:58,660 --> 00:06:59,200

There we go.



109

00:06:59,200 --> 00:07:01,250

And finally do another button.



110

00:07:01,270 --> 00:07:06,540

So that's going to be the log in with e-mail button and make sure that adds in.



111

00:07:06,650 --> 00:07:08,050

Whoops it did not.



112

00:07:08,050 --> 00:07:08,950

There we go.



113

00:07:09,280 --> 00:07:13,350

All right so now let's go ahead and let's do some work to make these look pretty.



114

00:07:13,360 --> 00:07:18,070

We're going to need both of these labels to be centered so you can select both using the command key



115

00:07:18,520 --> 00:07:25,830

then press center change the font to Menlo like so very good.



116

00:07:26,050 --> 00:07:30,520

And these can probably afford to be at about 18 that's fine.



117

00:07:30,520 --> 00:07:35,320

And we're going to go ahead and change the color to this teal ish blue which if you want to know is



118

00:07:35,320 --> 00:07:38,220

0 4 A B C 5.



119

00:07:38,620 --> 00:07:39,000

All right.



120

00:07:39,010 --> 00:07:46,840

So this label at the top we're going to change this to say underscore log in and for this one I'm going



121

00:07:46,840 --> 00:07:52,180

to make this just say or because it's going to be log in with Facebook log in with Google or log in



122

00:07:52,180 --> 00:07:55,460

with email because that's kind of the last option that someone would want.



123

00:07:55,480 --> 00:08:04,360

So go ahead and for the button we're going to change this to say log in with B for short.



124

00:08:04,360 --> 00:08:12,160

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



125

00:08:12,160 --> 00:08:14,620

this by email.



126

00:08:15,190 --> 00:08:15,850

OK.



127

00:08:16,180 --> 00:08:20,300

And we're going to need to change the font on all of these.



128

00:08:20,470 --> 00:08:23,710

Yeah let's go ahead and change the font on this to be Menlo.



129

00:08:23,710 --> 00:08:25,340

So it looks cool.



130

00:08:25,360 --> 00:08:35,030

There we go Menlo size 18 is probably a big let's go down to 14 or so and let's make this font White



131

00:08:35,510 --> 00:08:41,770

OK and you know what we're actually going to change both buttons to have a white font for the Facebook



132

00:08:41,770 --> 00:08:42,070

button.



133

00:08:42,070 --> 00:08:47,620

Go ahead and scroll down and we're going to change the background color to actually utilize the real



134

00:08:47,650 --> 00:08:51,810

Facebook blue color and if you want to know that's 4 3 5 be 9 1.



135

00:08:52,160 --> 00:08:52,520

OK.



136

00:08:52,540 --> 00:08:53,990

Very cool 4.



137

00:08:54,090 --> 00:09:00,550

Plus we're going to change the background color to be the same red that Google likes to use which if



138

00:09:00,550 --> 00:09:04,200

you will know is C5 for 3D.



139

00:09:04,270 --> 00:09:05,290

Very cool.



140

00:09:05,290 --> 00:09:12,400

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



141

00:09:12,400 --> 00:09:12,880

to the button.



142

00:09:12,880 --> 00:09:17,310

So go ahead and scroll down and we need to choose e-mail icon.



143

00:09:17,320 --> 00:09:21,480

Now you probably noticed that one the font changed and two it's pretty squished.



144

00:09:21,610 --> 00:09:27,430

So I'm just going to put a space and press enter and that'll give it a little bit of space next to the



145

00:09:27,430 --> 00:09:29,700

pictures so they're not so smashed together.



146

00:09:29,740 --> 00:09:36,700

Now let's go change the font again from custom to Menlo to size 14 or so.



147

00:09:36,880 --> 00:09:38,010

That looks pretty good.



148

00:09:38,260 --> 00:09:43,480

And now we just need to modify our stack view so that everything is spaced nicely.



149

00:09:43,480 --> 00:09:48,840

Now of course we're going to want spacing between these items so give it maybe 10 bits of spacing.



150

00:09:48,870 --> 00:09:49,860

It looks pretty good.



151

00:09:49,960 --> 00:09:52,330

And for the disk for the distribution.



152

00:09:52,450 --> 00:09:56,760

Go ahead and select fill proportionately and you'll see that that looks better.



153

00:09:56,770 --> 00:10:02,800

It's not yet totally perfect because we have some like weird spacing here and you don't want I think



154

00:10:02,860 --> 00:10:03,610

to fix that.



155

00:10:03,610 --> 00:10:11,350

I'm actually just going to pull out this e-mail label and put it beneath the stack view and then I'm



156

00:10:11,350 --> 00:10:12,430

going to modify the stack.



157

00:10:12,490 --> 00:10:14,250

Constraints to go up a little bit.



158

00:10:14,380 --> 00:10:19,840

Let's just remove the bottom space constraint and let's put this in its place.



159

00:10:21,130 --> 00:10:22,780

That looks pretty good.



160

00:10:22,830 --> 00:10:24,600

Lower the height here.



161

00:10:25,120 --> 00:10:26,860

Let's give it 20.



162

00:10:26,860 --> 00:10:28,050

From the left and right.



163

00:10:28,070 --> 00:10:30,400

And let's do 20 from the bottom.



164

00:10:30,400 --> 00:10:32,120

That looks good.



165

00:10:32,290 --> 00:10:33,700

And then the stack view.



166

00:10:33,730 --> 00:10:38,040

We're going to go ahead and Whoops oh we're going to need to pin that.



167

00:10:38,110 --> 00:10:45,340

So let's go ahead and select the stack if you missed it and we're going to pin that 20 from the label



168

00:10:45,340 --> 00:10:46,410

at the bottom.



169

00:10:46,840 --> 00:10:48,210

And of course that's going to pull it up.



170

00:10:48,210 --> 00:10:48,550

Whoops.



171

00:10:48,550 --> 00:10:51,390

Because we did not set a height constraint for this guy.



172

00:10:51,670 --> 00:10:55,360

Let's go ahead and set a height of let's try 40.



173

00:10:55,360 --> 00:10:56,820

All right that looks pretty good.



174

00:10:56,980 --> 00:10:57,800

Awesome.



175

00:10:58,090 --> 00:11:02,130

So let's let's go ahead and let's just make sure everything looks good this is 59 high.



176

00:11:02,140 --> 00:11:04,210

This is fifty eight point five.



177

00:11:04,240 --> 00:11:05,580

It's not perfect.



178

00:11:05,590 --> 00:11:07,440

That's kind of bothering me actually.



179

00:11:07,450 --> 00:11:11,620

So let's go ahead let's make our label a little bit taller.



180

00:11:11,800 --> 00:11:13,380

Just give it a little bit more space.



181

00:11:13,400 --> 00:11:17,940

And that should allow for these to be pretty darn close to one another.



182

00:11:18,160 --> 00:11:20,440

You know that's not exactly perfect.



183

00:11:20,440 --> 00:11:23,310

Let's go ahead and let's try Phil equally.



184

00:11:23,680 --> 00:11:26,980

And this should make these exact same size.



185

00:11:26,980 --> 00:11:29,560

Now this is fifty four point five fifty four point five.



186

00:11:29,590 --> 00:11:30,520

OK.



187

00:11:30,520 --> 00:11:32,440

And that's that's fine.



188

00:11:32,860 --> 00:11:39,340

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



189

00:11:39,340 --> 00:11:44,760

be 10 and that should bring them a little closer together.



190

00:11:44,860 --> 00:11:47,410

Still not right maybe zero.



191

00:11:47,830 --> 00:11:48,240

Let's see.



192

00:11:48,250 --> 00:11:48,510

OK.



193

00:11:48,520 --> 00:11:54,220

So now these look a little more evenly spaced together and if the buttons are the same height that's



194

00:11:54,220 --> 00:11:54,800

good.



195

00:11:54,800 --> 00:11:58,210

They're nice and even and this looks great.



196

00:11:58,210 --> 00:12:03,940

Now let's go ahead and let's design the view controller that will pop up when you tap by e-mail.



197

00:12:03,940 --> 00:12:08,180

So let's go ahead and let's just drag in a new view controller here.



198

00:12:08,350 --> 00:12:13,410

We're going to set the background to be that same gray color.



199

00:12:13,780 --> 00:12:15,480

And so we're going to go find it.



200

00:12:15,730 --> 00:12:16,830

And that looks good.



201

00:12:16,990 --> 00:12:20,530

OK this color again is 4 1 4 5 5 0.



202

00:12:20,980 --> 00:12:23,170

And what we need to do is we need a cancel button.



203

00:12:23,230 --> 00:12:28,000

We need some text and some labels and another button for signing in.



204

00:12:28,000 --> 00:12:31,750

So let's go ahead and let's drag in a button we're going to put it up here.



205

00:12:31,810 --> 00:12:34,370

That will be our cancel button.



206

00:12:34,660 --> 00:12:37,910

Let's set the image now to close.



207

00:12:38,110 --> 00:12:38,710

OK.



208

00:12:39,160 --> 00:12:45,450

Next dragon another button here and this one is just going to say sign in stretches so that it fits



209

00:12:45,460 --> 00:12:47,050

that looks good.



210

00:12:47,140 --> 00:12:54,250

And for this button let's go ahead and change the font to Menlo Menlo just looks really cool.



211

00:12:54,280 --> 00:13:01,160

Let's change the size to 18 and let's change the color to our lovely teal color.



212

00:13:01,210 --> 00:13:09,040

Next we're going to drag in a UI textfield like so this will be for entering your email and the other



213

00:13:09,040 --> 00:13:14,330

one will be for entering your password and we're going to stretch these so they fit nicely in the view



214

00:13:14,380 --> 00:13:17,830

controller looks pretty good.



215

00:13:18,470 --> 00:13:18,880

OK.



216

00:13:18,890 --> 00:13:20,960

And we'll fix the sizes later with the stack.



217

00:13:20,970 --> 00:13:21,870

You don't worry.



218

00:13:22,130 --> 00:13:25,320

And at the very top we should add a label.



219

00:13:25,840 --> 00:13:29,140

If I could spell it right that would be helpful you.



220

00:13:29,510 --> 00:13:30,020

There we go.



221

00:13:30,150 --> 00:13:31,060

Label.



222

00:13:31,280 --> 00:13:38,960

And we're going to change this to say e-mail seinen stretches so that it fits Senter the text and change



223

00:13:38,960 --> 00:13:47,790

the font and color to custom men low size 18 and the color is teal looks pretty good.



224

00:13:48,650 --> 00:13:48,990

All right.



225

00:13:49,010 --> 00:13:52,440

So now let's go ahead and make a stack few to put all these in.



226

00:13:52,460 --> 00:13:54,890

We're going to select all four.



227

00:13:55,340 --> 00:13:58,400

We're going to select all three here.



228

00:13:58,580 --> 00:14:02,270

Now let's go ahead and let's select all three of these and we're going to put them in a stack.



229

00:14:02,270 --> 00:14:06,230

View by clicking the stack button when they are all three selected.



230

00:14:06,230 --> 00:14:06,940

All right.



231

00:14:07,010 --> 00:14:10,910

That looks good and of course it gets a little messed up but we will fix it.



232

00:14:10,910 --> 00:14:12,510

Not to worry.



233

00:14:12,530 --> 00:14:16,200

Let's start actually by pinning this button exactly where it is.



234

00:14:16,420 --> 00:14:21,620

We're going to pin it eight from the margin and zero from the other margin and give it a fixed width



235

00:14:21,620 --> 00:14:23,610

and height of 30.



236

00:14:23,690 --> 00:14:25,520

Add those constraints.



237

00:14:25,520 --> 00:14:30,980

Next up we're going to go ahead and drag this all the way over here and it's going to get pinned.



238

00:14:30,980 --> 00:14:36,030

20 from the top zero from the left zero from the right.



239

00:14:36,300 --> 00:14:41,500

And let's go ahead and let's just start with that cool.



240

00:14:41,520 --> 00:14:42,760

That looks great.



241

00:14:42,780 --> 00:14:48,210

I'm not giving it a height constraint on purpose because I want to be able to give it some spacing of



242

00:14:48,240 --> 00:14:51,990

20 beneath each field or between each field.



243

00:14:51,990 --> 00:14:57,640

Now of course the alignment is centered and that's why these are all squished so changed that to fill.



244

00:14:57,960 --> 00:14:59,350

And that looks great.



245

00:14:59,490 --> 00:15:05,730

You know these are a little bit too long so I want to go ahead and modify the constraints here so that



246

00:15:05,730 --> 00:15:06,810

they're not so squishy.



247

00:15:06,810 --> 00:15:10,410

So let's go ahead and click Edit type 20 to bring it in a little bit.



248

00:15:10,440 --> 00:15:13,170

And on this side we're going to also type 20.



249

00:15:13,320 --> 00:15:17,550

And that brings in it in a little bit from the left and right sides that looks great.



250

00:15:17,550 --> 00:15:22,390

So this is now in its place and we're going to go ahead and center this button and we're going to pin



251

00:15:22,390 --> 00:15:25,000

it 20 from the stack view.



252

00:15:25,260 --> 00:15:33,150

So pinnate from the top and go ahead and give it let's let's give it a fixed width of maybe 80.



253

00:15:33,240 --> 00:15:34,370

That looks good.



254

00:15:34,500 --> 00:15:41,220

And to keep it in the center select the alignment button and pin it horizontally in the container.



255

00:15:41,220 --> 00:15:42,120

Very cool.



256

00:15:42,120 --> 00:15:46,080

So now that's in place and we're leaving enough room for the keyboard Breckin to do any fancy sliding



257

00:15:46,080 --> 00:15:50,760

of buttons just yet but just hang with me here.



258

00:15:50,820 --> 00:15:55,500

Now we're going to go ahead and set up these text views so they look really really cool and we're actually



259

00:15:55,500 --> 00:15:59,220

going to set up a custom view subclass to make these look really nice in just a moment.



260

00:15:59,280 --> 00:16:04,700

But for now go ahead and go to the attributes and Specter we're going to set the border to be square



261

00:16:05,340 --> 00:16:09,400

and we're going to set the background color to be the dark dark gray color.



262

00:16:09,670 --> 00:16:14,440

OK so you can see that it really stands out nicely on the background there.



263

00:16:14,460 --> 00:16:15,540

Very cool.



264

00:16:15,540 --> 00:16:21,090

And what we're going to do next is we're going to change the font to be Menlo because it should be the



265

00:16:21,090 --> 00:16:22,430

same font as the rest of the app.



266

00:16:22,440 --> 00:16:27,950

We should have a consistent font style So let's go ahead and type Menlo.



267

00:16:28,230 --> 00:16:34,620

Let's give it 18 for the size and what we're going to do next is we're going to set placeholder text



268

00:16:34,680 --> 00:16:35,740

per field.



269

00:16:35,820 --> 00:16:40,020

Now for this field we're going to go ahead and type e-mail because that's where the e-mail will go.



270

00:16:40,080 --> 00:16:42,090

You can't really see it but that's OK.



271

00:16:42,450 --> 00:16:48,840

Next we're going to go ahead and type password and for the password field since it's a secure type of



272

00:16:48,840 --> 00:16:51,800

information we want to check secure text entry.



273

00:16:51,810 --> 00:16:52,450

OK.



274

00:16:52,650 --> 00:16:57,510

That will make sure that our passports will be covered up with the appropriate dots when you type the



275

00:16:57,510 --> 00:16:58,150

password.



276

00:16:58,290 --> 00:16:58,990

OK.



277

00:16:59,400 --> 00:17:00,300

Very cool.



278

00:17:00,300 --> 00:17:05,340

And what we're going to do next is we're going to actually change our font color to be that bright green



279

00:17:05,340 --> 00:17:11,640

color and we can do that by selecting both text fields choosing color and then select the green color.



280

00:17:11,640 --> 00:17:16,290

Now there's something that's a problem though we can't really see the placeholder text and that's because



281

00:17:16,290 --> 00:17:21,430

you can't set the placeholder text color in Interface Builder you have to do it in code.



282

00:17:21,480 --> 00:17:22,350

So that's what we're going to do.



283

00:17:22,350 --> 00:17:27,210

Now we're going to go create a custom view subclass for this textfield and we're also going to set it



284

00:17:27,210 --> 00:17:32,030

so that the text can be inset a little bit inside the textfield before we do that.



285

00:17:32,040 --> 00:17:36,560

Let's go ahead and set a fixed height on these text fields so that they are nice and tall.



286

00:17:36,840 --> 00:17:38,140

So select both.



287

00:17:38,160 --> 00:17:44,550

Click the pin menu and we're going to give them a height of 50 k that just gives them a really cool



288

00:17:45,060 --> 00:17:46,980

height that makes them kind of stand out.



289

00:17:46,980 --> 00:17:48,380

I really like it.



290

00:17:48,460 --> 00:17:51,790

So you know what this video is getting a little long.



291

00:17:51,880 --> 00:17:53,750

We've built the UI that's great.



292

00:17:53,840 --> 00:17:58,170

But how about this in the next video we're going to go ahead and set up our custom view subclasses.



293

00:17:58,170 --> 00:18:05,210

We'll set up our view controller code files to go along with these interface builder displays and we'll



294

00:18:05,250 --> 00:18:06,540

set that all up in the next video.



295

00:18:06,540 --> 00:18:08,340

I don't want to make this video too long so.



296

00:18:08,340 --> 00:18:13,520

Thank you guys for going through this and we'll set up the custom view subclasses and the view controller



297

00:18:13,530 --> 00:18:15,090

files in the next video.



298

00:18:15,120 --> 00:18:17,410

Go ahead and head over that way and I'll see you there.