1
00:00:08,050 --> 00:00:13,350
Hey everybody this is Caleb with Devar slopes dotcom and in this video we're going to build out our

2
00:00:13,350 --> 00:00:19,710
authentication View Controller our log in view controller and we're going to create some custom subclasses

3
00:00:19,710 --> 00:00:23,060
so that we can make it look really nice and pretty.

4
00:00:23,100 --> 00:00:23,850
Let's begin.

5
00:00:23,880 --> 00:00:30,180
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,450 --> 00:00:31,490
the last video.

7
00:00:31,680 --> 00:00:37,230
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,230 --> 00:00:38,050
firebase.

9
00:00:38,130 --> 00:00:42,450
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,450 --> 00:00:49,440
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,440 --> 00:00:54,690
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,690 --> 00:00:56,640
to drag on a View Controller.

13
00:00:56,840 --> 00:00:57,540
OK.

14
00:00:57,720 --> 00:01:03,420
Now this is where we're going to build our authentication VC and in authentication Visi we're going

15
00:01:03,420 --> 00:01:10,550
to have the option to tap log in with Facebook log in with Google or log in with e-mail.

16
00:01:10,560 --> 00:01:15,440
So we're going to set up that interface just to show what it'll look like and let's do that now.

17
00:01:15,660 --> 00:01:20,960
So the background of this I want to be dark grey.

18
00:01:21,000 --> 00:01:26,190
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,190 --> 00:01:31,470
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,470 --> 00:01:33,190
terminal hacker look.

21
00:01:33,390 --> 00:01:40,680
So go in to the attributes Inspektor then select the view of this view controller and we're going to

22
00:01:40,680 --> 00:01:45,540
change the background to be this dark gray color.

23
00:01:45,830 --> 00:01:49,900
OK and I can't remember which one is the darkest one that looks like it.

24
00:01:49,920 --> 00:01:50,750
There we go.

25
00:01:50,760 --> 00:01:58,410
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,800 --> 00:02:02,730
All right so next what we're going to do is we're going to put a nice little image in the background

27
00:02:02,730 --> 00:02:05,040
and it just kind of makes it look pretty cool.

28
00:02:05,160 --> 00:02:06,190
If you ask me.

29
00:02:06,420 --> 00:02:11,970
So I'm just going to go ahead and search for an image view and I'm going to go ahead and stretch it

30
00:02:11,970 --> 00:02:15,990
so that it's about 50 percent of the screen.

31
00:02:15,990 --> 00:02:17,010
Let's see.

32
00:02:17,010 --> 00:02:25,830
Well you know what if our entire height of our view is 667 we can go ahead and put this at about 334

33
00:02:25,830 --> 00:02:27,740
and that should put us right about in the middle.

34
00:02:29,490 --> 00:02:30,260
That will be good enough.

35
00:02:30,270 --> 00:02:30,590
Yeah.

36
00:02:30,600 --> 00:02:30,860
All right.

37
00:02:30,870 --> 00:02:34,880
So let's go ahead and we're going to look to see what images we have available to us.

38
00:02:34,890 --> 00:02:41,070
And right now it's nothing except for first and second because those are the ones provided to us by

39
00:02:41,160 --> 00:02:41,790
the project.

40
00:02:41,790 --> 00:02:45,840
So now is a great time to import the assets that come as a part of this project.

41
00:02:45,870 --> 00:02:50,450
And you can access those by tapping on the download source code button in the slopes app.

42
00:02:50,460 --> 00:02:50,730
All right.

43
00:02:50,730 --> 00:02:53,750
I'm going to go ahead and drag my assets in.

44
00:02:53,760 --> 00:02:58,320
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,320 --> 00:03:03,080
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,090 --> 00:03:08,130
Now we can get rid of first and second those are the ones provided to us from the project.

47
00:03:08,130 --> 00:03:08,790
We don't need them.

48
00:03:08,790 --> 00:03:10,470
So go ahead and delete those.

49
00:03:10,680 --> 00:03:15,990
And now when we go back you'll notice that we can access all of our images.

50
00:03:16,020 --> 00:03:18,870
We're going to add in log in B.G. image.

51
00:03:19,050 --> 00:03:23,790
But on 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,790 --> 00:03:24,180
want that.

53
00:03:24,180 --> 00:03:30,060
So let's go ahead and do aspect fill so that it maintains that data aspect ratio and then we're going

54
00:03:30,060 --> 00:03:36,530
to pin this to the top left and right and give it a fixed height of 3:34.

55
00:03:36,540 --> 00:03:39,090
Now it'll stay in place that's beautiful.

56
00:03:39,090 --> 00:03:41,440
Now let's go ahead and put on a label.

57
00:03:41,520 --> 00:03:46,530
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,530 --> 00:03:47,520
wider.

59
00:03:47,820 --> 00:03:51,600
Make it a little taller and center it.

60
00:03:51,600 --> 00:03:55,620
Now we're going to use a green color for the text and I'll show you what that is.

61
00:03:55,620 --> 00:03:57,840
It's eight f.c.

62
00:03:57,990 --> 00:03:58,520
Sorry.

63
00:03:58,650 --> 00:03:58,870
Yeah.

64
00:03:58,890 --> 00:04:02,140
Eight F C F for E is the hex value.

65
00:04:02,430 --> 00:04:08,070
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

66
00:04:08,520 --> 00:04:10,730
to be men low.

67
00:04:10,770 --> 00:04:12,800
And that's the font we're going to use for this entire app.

68
00:04:12,810 --> 00:04:20,070
By the way is Menlo Menlo is the same font that X code uses for showing code which makes it extra cool.

69
00:04:20,130 --> 00:04:23,100
And again you're gonna have to bump it up to 24.

70
00:04:23,100 --> 00:04:29,460
Let's go ahead and change this from label to underscore breakpoint and there we go.

71
00:04:29,640 --> 00:04:30,560
Supercool.

72
00:04:30,750 --> 00:04:35,790
So now breakpoint has a label but we should definitely keep this in its place.

73
00:04:35,790 --> 00:04:41,570
So go ahead and pinot 46 to the left 29 from the top and 46 from the right.

74
00:04:41,580 --> 00:04:45,300
And you know what I don't really like that I like even numbers that are nice and pretty so let's go

75
00:04:45,300 --> 00:04:47,990
45 45 and 30.

76
00:04:48,360 --> 00:04:52,150
Add those constraints and you'll see it's ready to go it's in place.

77
00:04:52,410 --> 00:04:59,400
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

78
00:04:59,400 --> 00:05:06,210
going to try our best to center this and make it fit perfectly in the center that looks good.

79
00:05:06,210 --> 00:05:09,990
Use those handy dandy snap guides that Apple has provided.

80
00:05:10,440 --> 00:05:15,450
And this looks great but what we need to do first is we need to pin it in place so that it does not

81
00:05:15,450 --> 00:05:16,500
get lost.

82
00:05:16,650 --> 00:05:21,650
And for things that are perfectly centered what I like to do is just to give it a fixed width and height.

83
00:05:21,840 --> 00:05:27,300
Add those constraints then I like to go ahead and pin it horizontally and vertically in the container

84
00:05:27,300 --> 00:05:29,300
and that will keep it perfectly centered.

85
00:05:29,340 --> 00:05:30,810
Add those constraints.

86
00:05:30,810 --> 00:05:31,760
Awesome.

87
00:05:31,830 --> 00:05:37,230
And now we want to give this a gray color but we want it to be lighter than the background so it stands

88
00:05:37,230 --> 00:05:38,070
out.

89
00:05:38,100 --> 00:05:41,940
So I'm going to give it this color and if you want to know what that is.

90
00:05:41,940 --> 00:05:49,710
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.

91
00:05:49,770 --> 00:05:55,230
And now we're going to go ahead and use a stack of you to make a stack of labels and buttons that we

92
00:05:55,230 --> 00:05:56,190
need.

93
00:05:56,220 --> 00:06:02,820
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

94
00:06:02,820 --> 00:06:04,490
it right to this view.

95
00:06:05,130 --> 00:06:06,220
And we're going to go ahead.

96
00:06:06,300 --> 00:06:08,050
And we're going to put it in here.

97
00:06:08,100 --> 00:06:11,280
Maybe 20 or 30 from the right and left.

98
00:06:11,610 --> 00:06:15,010
And let's go ahead and let's do some pinning here.

99
00:06:15,390 --> 00:06:16,770
Yeah let's do maybe 20.

100
00:06:16,800 --> 00:06:19,040
From every side.

101
00:06:19,290 --> 00:06:20,820
That looks great.

102
00:06:21,400 --> 00:06:22,050
OK good.

103
00:06:22,050 --> 00:06:27,510
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

104
00:06:27,510 --> 00:06:34,690
log in at the top so that will be a label of course drag that in next we need a button.

105
00:06:34,960 --> 00:06:40,150
So drag in the UI button and you'll see it goes right beneath it and we'll fix all of the formatting

106
00:06:40,150 --> 00:06:41,500
in just a second.

107
00:06:41,590 --> 00:06:44,100
We're going to need log in with Google beneath that.

108
00:06:44,140 --> 00:06:50,910
So put another button then we need another UI label to give the option of saying or log in with email

109
00:06:50,920 --> 00:06:53,890
so go ahead and type label.

110
00:06:54,580 --> 00:06:56,040
Looking pretty good there.

111
00:06:56,050 --> 00:06:58,530
Whoops that did not add into our stack view.

112
00:06:58,600 --> 00:06:59,170
There we go.

113
00:06:59,170 --> 00:07:01,240
And finally do another button.

114
00:07:01,240 --> 00:07:06,400
So that's going to be the log in with email button and make sure that adds in.

115
00:07:06,520 --> 00:07:07,980
Whoops it did not.

116
00:07:07,990 --> 00:07:08,900
There we go.

117
00:07:09,220 --> 00:07:13,200
All right so now let's go ahead and let's do some work to make these look pretty.

118
00:07:13,300 --> 00:07:18,040
We're going to need both of these labels to be centered so you can select both using the command key

119
00:07:18,460 --> 00:07:26,020
then press center change the font to Menlo like so very good.

120
00:07:26,020 --> 00:07:30,280
And these can probably afford to be at about 18 that's fine.

121
00:07:30,490 --> 00:07:35,260
And we're going to go ahead and change the color to this teal ish blue which if you want to know is

122
00:07:35,260 --> 00:07:38,190
0 4 A B C 5.

123
00:07:38,590 --> 00:07:38,940
All right.

124
00:07:38,950 --> 00:07:46,780
So this label at the top we're going to change this to say underscore log in and for this one I'm going

125
00:07:46,780 --> 00:07:52,270
to make this just say or because it's going to be log into Facebook log on with Google or log in with

126
00:07:52,270 --> 00:07:55,400
email because that's kind of the last option that someone would want.

127
00:07:55,420 --> 00:08:04,040
So go ahead and for the button we're going to change this to say log in with FP for short.

128
00:08:04,300 --> 00:08:12,100
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

129
00:08:12,100 --> 00:08:14,670
this by email.

130
00:08:15,150 --> 00:08:15,770
OK.

131
00:08:16,120 --> 00:08:20,260
And we're going to need to change the font on all of these.

132
00:08:20,430 --> 00:08:23,640
Yeah let's go ahead and change the font on this to be Menlo.

133
00:08:23,650 --> 00:08:25,190
So it looks cool.

134
00:08:25,300 --> 00:08:29,750
There we go Menlo size 18 is probably.

135
00:08:29,800 --> 00:08:30,530
Too big.

136
00:08:30,580 --> 00:08:35,700
Let's go down to 14 or so and let's make this font white OK.

137
00:08:35,740 --> 00:08:41,710
And you know what we're actually going to change both buttons to have a white font for the Facebook

138
00:08:41,710 --> 00:08:42,010
button.

139
00:08:42,010 --> 00:08:47,590
Go ahead and scroll down and we're going to change the background color to actually utilize the real

140
00:08:47,590 --> 00:08:52,350
Facebook blue color and if you want to know that for 3:5 be 9:1.

141
00:08:52,480 --> 00:08:53,940
Very cool 4.

142
00:08:54,070 --> 00:09:00,490
Plus we're going to change the background color to be the same red that Google likes to use which if

143
00:09:00,490 --> 00:09:04,130
you will know is C5 for 3D.

144
00:09:04,210 --> 00:09:05,070
Very cool.

145
00:09:05,260 --> 00:09:12,340
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

146
00:09:12,340 --> 00:09:12,820
to the button.

147
00:09:12,820 --> 00:09:17,250
So go ahead and scroll down and we need to choose e-mail icon.

148
00:09:17,260 --> 00:09:21,460
Now you probably noticed that one the font changed and two it's pretty squished.

149
00:09:21,580 --> 00:09:27,280
So I'm just going to put a space and press enter and that will give it a little bit of space next to

150
00:09:27,280 --> 00:09:29,680
the pictures so they're not so smashed together.

151
00:09:29,680 --> 00:09:36,650
Now let's go change the font again from custom to Menlo to size 14 or so.

152
00:09:36,820 --> 00:09:37,950
That looks pretty good.

153
00:09:38,200 --> 00:09:43,410
And now we just need to modify our stack views so that everything is spaced nicely.

154
00:09:43,420 --> 00:09:48,810
Now of course we're going to want spacing between these items so give it maybe 10 bits of spacing.

155
00:09:48,810 --> 00:09:49,820
It looks pretty good.

156
00:09:49,920 --> 00:09:52,390
And for the for the distribution.

157
00:09:52,390 --> 00:09:56,700
Go ahead and select fill proportionately and you'll see that that looks better.

158
00:09:56,710 --> 00:10:03,310
It's not yet totally perfect because we have some like weird spacing here and you know I think to fix

159
00:10:03,310 --> 00:10:03,540
that.

160
00:10:03,550 --> 00:10:11,290
I'm actually just going to pull out this e-mail label and put it beneath the stack view and then I'm

161
00:10:11,290 --> 00:10:14,210
going to modify the stack to your constraints to go up a little bit.

162
00:10:14,320 --> 00:10:19,660
Let's just remove the bottom space constraint and let's put this in its place.

163
00:10:21,100 --> 00:10:22,700
That looks pretty good.

164
00:10:22,780 --> 00:10:26,800
Lower the height here let's give it 20.

165
00:10:26,800 --> 00:10:27,990
From the left and right.

166
00:10:28,000 --> 00:10:30,270
And let's do 20 from the bottom.

167
00:10:30,370 --> 00:10:31,780
That looks good.

168
00:10:32,230 --> 00:10:37,980
And then the stack view we're going to go ahead and Whoops oh we're going to need to pin that.

169
00:10:38,050 --> 00:10:39,560
So let's go ahead.

170
00:10:39,580 --> 00:10:46,370
Select the stack if you missed it and we're going to pin that 20 from the label at the bottom.

171
00:10:46,780 --> 00:10:48,150
And of course that's going to pull it up.

172
00:10:48,160 --> 00:10:48,480
Whoops.

173
00:10:48,490 --> 00:10:51,330
Because we did not set a height constraint for this guy.

174
00:10:51,610 --> 00:10:55,300
Let's go ahead and set a height of let's try 40.

175
00:10:55,300 --> 00:10:55,590
All right.

176
00:10:55,590 --> 00:10:56,760
That looks pretty good.

177
00:10:56,920 --> 00:10:57,750
Awesome.

178
00:10:58,030 --> 00:11:02,080
So let's let's go ahead and let's just make sure everything looks good this is 59 high.

179
00:11:02,100 --> 00:11:04,150
This is fifty eight point five.

180
00:11:04,180 --> 00:11:05,560
It's not perfect.

181
00:11:05,560 --> 00:11:07,380
That's kind of bothering me actually.

182
00:11:07,390 --> 00:11:11,590
So let's go ahead let's make our label a little bit taller.

183
00:11:11,770 --> 00:11:13,330
Just give it a little bit more space.

184
00:11:13,340 --> 00:11:17,870
And that should allow for these to be pretty darn close to one another.

185
00:11:18,100 --> 00:11:20,380
You know that's not exactly perfect.

186
00:11:20,380 --> 00:11:23,220
Let's go ahead and let's try Phil equally.

187
00:11:23,650 --> 00:11:26,950
And this should make these exact same size.

188
00:11:26,950 --> 00:11:29,510
Now this is fifty four point five fifty four point five.

189
00:11:29,530 --> 00:11:30,460
OK.

190
00:11:30,460 --> 00:11:32,440
And that's that's fine.

191
00:11:32,800 --> 00:11:39,280
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

192
00:11:39,280 --> 00:11:40,700
beat 10.

193
00:11:41,320 --> 00:11:44,710
And that should bring them a little closer together.

194
00:11:44,800 --> 00:11:47,370
Still not right maybe zero.

195
00:11:47,800 --> 00:11:48,180
Let's see.

196
00:11:48,190 --> 00:11:48,450
OK.

197
00:11:48,460 --> 00:11:53,910
So now these look a little more evenly spaced together and the buttons are the same height.

198
00:11:53,920 --> 00:11:54,680
That's good.

199
00:11:54,760 --> 00:11:58,150
They're nice and even and this looks great.

200
00:11:58,150 --> 00:12:03,880
Now let's go ahead and let's design the view controller that will pop up when you tap by e-mail.

201
00:12:03,880 --> 00:12:08,130
So let's go ahead and let's just drag in a new controller here.

202
00:12:08,290 --> 00:12:13,460
We're going to set the background to be that same gray color.

203
00:12:13,720 --> 00:12:15,470
And so we're going to go find it.

204
00:12:15,670 --> 00:12:16,780
And that looks good.

205
00:12:16,930 --> 00:12:20,480
OK this color again is 4 1 4 5 5 0.

206
00:12:20,920 --> 00:12:23,150
And what we need to do is we need a cancel button.

207
00:12:23,170 --> 00:12:27,940
We need some text field and some labels and another button for signing in.

208
00:12:27,940 --> 00:12:31,680
So let's go ahead and let's drag in a button we're going to put it up here.

209
00:12:31,750 --> 00:12:34,310
That will be our cancel button.

210
00:12:34,600 --> 00:12:37,850
Let's set the image now to close.

211
00:12:38,050 --> 00:12:38,720
OK.

212
00:12:39,100 --> 00:12:45,400
Next dragging another button here and this one is just going to say seinen stretches so that it fits

213
00:12:45,400 --> 00:12:47,000
that looks good.

214
00:12:47,080 --> 00:12:53,820
And for this button let's go ahead and change the font to Menlo because Menlo just looks really cool.

215
00:12:54,220 --> 00:13:01,170
Let's change the size to 18 and let's change the color to our lovely teal color.

216
00:13:01,170 --> 00:13:08,980
Next we're going to drag in a UI textfield like so this will be for entering your e-mail and the other

217
00:13:08,980 --> 00:13:11,150
one will be for entering your password.

218
00:13:11,380 --> 00:13:15,330
And we're going to stretch these so they fit nicely in the View Controller.

219
00:13:16,140 --> 00:13:17,770
Looks pretty good.

220
00:13:18,430 --> 00:13:18,840
OK.

221
00:13:18,840 --> 00:13:20,940
And we'll fix the sizes later with the stack.

222
00:13:21,030 --> 00:13:21,880
Don't worry.

223
00:13:22,080 --> 00:13:25,520
And at the very top we should add a label.

224
00:13:25,790 --> 00:13:29,100
If I could spell it right that would be helpful you.

225
00:13:29,460 --> 00:13:31,150
There we go you by label.

226
00:13:31,230 --> 00:13:38,910
And we're going to change this to say e-mail seinen stretches so that it fits center the text and change

227
00:13:38,910 --> 00:13:47,750
the font and color to custom men low size 18 and the color is teal looks pretty good.

228
00:13:48,600 --> 00:13:48,940
All right.

229
00:13:48,960 --> 00:13:52,390
So now let's go ahead make a stack few to put all these in.

230
00:13:52,410 --> 00:13:54,820
We're going to select all four.

231
00:13:55,290 --> 00:13:58,350
We're going to select all three here.

232
00:13:58,530 --> 00:14:02,220
Now let's go ahead and let's select all three of these and we're going to put them in a stack.

233
00:14:02,220 --> 00:14:05,810
View by clicking the stack button when they are all three selected.

234
00:14:06,150 --> 00:14:06,930
All right.

235
00:14:06,930 --> 00:14:07,590
That looks good.

236
00:14:07,590 --> 00:14:10,860
And of course it gets a little messed up but we will fix it.

237
00:14:10,860 --> 00:14:12,480
Not to worry.

238
00:14:12,480 --> 00:14:16,060
Let's start actually by pinning this button exactly where it is.

239
00:14:16,380 --> 00:14:21,570
We're going to pin it eight from the margin and zero from the other margin and give it a fixed width

240
00:14:21,570 --> 00:14:23,540
and height of 30.

241
00:14:23,640 --> 00:14:25,470
Add those constraints.

242
00:14:25,470 --> 00:14:30,930
Next up we're going to go ahead and drag this all the way over here and it's going to get pinned.

243
00:14:30,930 --> 00:14:35,980
20 from the top zero from the left zero from the right.

244
00:14:36,240 --> 00:14:41,440
And let's go ahead and let's just start with that cool.

245
00:14:41,460 --> 00:14:42,700
That looks great.

246
00:14:42,720 --> 00:14:48,150
I'm not giving at a height constraint on purpose because I want to be able to give it some spacing of

247
00:14:48,180 --> 00:14:51,710
20 beneath each field or between each field.

248
00:14:51,930 --> 00:14:57,400
Now of course the alignment is centered and that's why these are all squished so change that to fill

249
00:14:57,900 --> 00:14:59,350
and that looks great.

250
00:14:59,430 --> 00:15:05,670
You know these are a little bit too long so I want to go ahead and modify the constraints here so that

251
00:15:05,670 --> 00:15:06,780
they're not so squishy.

252
00:15:06,780 --> 00:15:10,380
So let's go ahead and click Edit type 20 to bring it in a little bit.

253
00:15:10,380 --> 00:15:13,110
And on this side we're going to also type 20.

254
00:15:13,260 --> 00:15:17,480
And that brings in it in a little bit from the left and right sides that looks great.

255
00:15:17,490 --> 00:15:22,380
So this is now in its place and we're going to go ahead and center this button and we're going to pin

256
00:15:22,380 --> 00:15:24,960
it 20 from the stack view.

257
00:15:25,200 --> 00:15:29,160
So pinnate from the top and go ahead and give it.

258
00:15:29,420 --> 00:15:33,140
Let's let's give it a fixed width of maybe 80.

259
00:15:33,200 --> 00:15:34,150
That looks good.

260
00:15:34,440 --> 00:15:41,160
And to keep it in the center select the alignment button and pin it horizontally in the container.

261
00:15:41,160 --> 00:15:42,060
Very cool.

262
00:15:42,060 --> 00:15:46,020
So now that's in place and we're leaving enough room for the keyboard drucken to do any fancy sliding

263
00:15:46,020 --> 00:15:50,700
of buttons just yet but just hang with me here.

264
00:15:50,760 --> 00:15:55,440
Now we're going to go ahead and set up these text to you so they look really really cool and we're actually

265
00:15:55,440 --> 00:15:59,120
going to set up a custom view subclass to make these look really nice in just a moment.

266
00:15:59,250 --> 00:16:02,040
But for now go ahead and go to the attributes inspector.

267
00:16:02,130 --> 00:16:07,800
We're going to set the border to be square and we're going to set the background color to be the dark

268
00:16:07,920 --> 00:16:09,290
dark gray color.

269
00:16:09,580 --> 00:16:09,830
OK.

270
00:16:09,870 --> 00:16:14,370
So you can see that it really stands out nicely on the background there.

271
00:16:14,400 --> 00:16:15,480
Very cool.

272
00:16:15,480 --> 00:16:21,030
And what we're going to do next is we're going to change the font to be Menlo cause it should be the

273
00:16:21,030 --> 00:16:22,380
same font as the rest of the app.

274
00:16:22,380 --> 00:16:27,860
We should have a consistent font style So let's go ahead and type Menlo.

275
00:16:28,170 --> 00:16:34,530
Let's give it 18 for the size and what we're going to do next is we're going to set placeholder text

276
00:16:34,620 --> 00:16:35,680
per field.

277
00:16:35,760 --> 00:16:39,950
Now for this field we're going to go ahead and type e-mail because that's where the e-mail will go.

278
00:16:40,020 --> 00:16:41,050
You can't really see it.

279
00:16:41,070 --> 00:16:42,020
But that's OK.

280
00:16:42,390 --> 00:16:48,780
Next we're going to go ahead and type password and for the password field since it's a secure type of

281
00:16:48,780 --> 00:16:51,740
information we want to check secure text entry.

282
00:16:51,750 --> 00:16:52,330
OK.

283
00:16:52,590 --> 00:16:57,480
That will make sure that our password will be covered up with the appropriate dots when you type the

284
00:16:57,480 --> 00:16:58,110
password.

285
00:16:58,260 --> 00:16:58,940
OK.

286
00:16:59,340 --> 00:17:00,230
Very cool.

287
00:17:00,240 --> 00:17:05,280
And what we're going to do next is we're going to actually change our font color to be that bright green

288
00:17:05,280 --> 00:17:11,580
color and we can do that by selecting both text fields choosing color and then select the green color.

289
00:17:11,580 --> 00:17:16,230
Now there's something that's a problem that we can't really see the placeholder text and that's because

290
00:17:16,230 --> 00:17:21,190
you can't set the placeholder text color in Interface Builder or you have to do it in code.

291
00:17:21,420 --> 00:17:22,310
So that's what we're going to do.

292
00:17:22,310 --> 00:17:27,180
Now we're going to go create a custom view subclass for this textfield and we're also going to set it

293
00:17:27,180 --> 00:17:30,910
so that the text can be inset a little bit inside the text field.

294
00:17:31,260 --> 00:17:35,850
Before we do that let's go ahead and set a fixed height on these text fields so that they are nice and

295
00:17:35,850 --> 00:17:36,600
tall.

296
00:17:36,730 --> 00:17:37,990
So select both.

297
00:17:38,130 --> 00:17:44,490
Click the pin menu and we're going to give them a height of 50 k that just gives them a really cool

298
00:17:45,000 --> 00:17:46,950
height that makes them kind of stand out.

299
00:17:46,950 --> 00:17:48,090
I really like it.

300
00:17:48,390 --> 00:17:51,750
So you know what this video is getting a little long.

301
00:17:51,840 --> 00:17:53,780
We've built the UI that's great.

302
00:17:53,780 --> 00:17:58,100
But how about this in the next video we're going to go ahead and set up our custom view subclasses.

303
00:17:58,140 --> 00:18:05,150
We'll set up our view controller code files to go along with these interface builder displays and we'll

304
00:18:05,190 --> 00:18:06,480
set that all up in the next video.

305
00:18:06,480 --> 00:18:08,270
I don't want to make this video too long so.

306
00:18:08,280 --> 00:18:13,470
Thank you guys for going through this and we'll set up the custom view subclasses and the View Controller

307
00:18:13,470 --> 00:18:15,030
files in the next video.

308
00:18:15,060 --> 00:18:17,560
Go ahead and head over that way and I'll see you there.