1
00:00:07,640 --> 00:00:09,910
Hey hey everybody what is going on.

2
00:00:09,910 --> 00:00:14,750
This is Caleb with Debb slopes and in this video we're going to make those custom view subclasses for

3
00:00:14,750 --> 00:00:15,840
the textfield.

4
00:00:15,860 --> 00:00:20,620
We're also going to make a nice view subclassed at a shadow to our log in view.

5
00:00:20,640 --> 00:00:22,190
It looks super super cool.

6
00:00:22,280 --> 00:00:23,320
Very pretty.

7
00:00:23,330 --> 00:00:25,000
Mama let's do it now.

8
00:00:25,010 --> 00:00:27,930
So pull open that X code project.

9
00:00:28,130 --> 00:00:33,890
And here we go let's go ahead and set up the View Controller files for these first because without the

10
00:00:33,890 --> 00:00:38,630
proper swift file We're not going to be able to actually do anything with these controllers.

11
00:00:38,630 --> 00:00:39,770
We don't want that.

12
00:00:39,800 --> 00:00:41,740
So let's go ahead and let's.

13
00:00:41,740 --> 00:00:48,500
Right click on controller click new file and we're going to create a Cocco touch class that is a subclass

14
00:00:49,130 --> 00:00:50,570
of view controller.

15
00:00:50,570 --> 00:00:53,740
Now name one VC will name the other one.

16
00:00:53,740 --> 00:00:56,420
Log in VC click next.

17
00:00:56,510 --> 00:01:01,880
And we're going to save this to the controller file make sure that the target is properly ticked.

18
00:01:02,240 --> 00:01:03,580
OK click Create.

19
00:01:03,800 --> 00:01:05,420
And this looks awesome.

20
00:01:05,450 --> 00:01:10,550
Now go back to maynt story board select all AVC which that's this one.

21
00:01:10,670 --> 00:01:16,940
Then go into the identity inspector and we're going to type off the see press enter and that's great.

22
00:01:16,940 --> 00:01:21,680
Now just so you know for this app we're going to be instantiating certain view controllers using the

23
00:01:21,680 --> 00:01:22,360
storyboard.

24
00:01:22,370 --> 00:01:26,290
And so in order to do that we're going to need its storyboard ID.

25
00:01:26,300 --> 00:01:32,260
So what I like to do is I just like to copy the identity name and paste that in as the storyboard ID

26
00:01:32,570 --> 00:01:35,990
so just do that when I tell you to in this in this course.

27
00:01:36,080 --> 00:01:41,810
We're not going to use it for every single view controller but for some of them we will next right click

28
00:01:41,840 --> 00:01:47,780
on controller click new file Cocco touch class and we'll name this one.

29
00:01:47,780 --> 00:01:52,640
Locknut Lufkin log in VC as a subclass of view controller.

30
00:01:52,750 --> 00:01:53,310
OK.

31
00:01:53,570 --> 00:01:54,440
Just like before.

32
00:01:54,440 --> 00:01:59,410
Click next click Create and that looks good.

33
00:01:59,620 --> 00:02:07,300
Back in May main storyboard select log in VC and set its identity to log in VC and just like before.

34
00:02:07,300 --> 00:02:11,120
Copy it and paste that into the storyboard ID.

35
00:02:11,170 --> 00:02:13,420
Very cool so now its good it has an identity.

36
00:02:13,420 --> 00:02:15,260
Both of these have a proper identity.

37
00:02:15,440 --> 00:02:19,360
And now lets go ahead and create those custom view subclasses.

38
00:02:19,390 --> 00:02:24,760
Now I don't know if you saw it in the simulator but when you go into the log in view controller and

39
00:02:24,760 --> 00:02:32,080
you select by email these this email has the placeholder text inset from the top and bottom and the

40
00:02:32,080 --> 00:02:38,260
left and it has kind of a cool white placeholder text which you can't actually set in the Interface

41
00:02:38,260 --> 00:02:39,130
Builder.

42
00:02:39,130 --> 00:02:42,460
Then when you start typing it turns to this very cool green color.

43
00:02:42,490 --> 00:02:49,300
So we're going to set that up now so go ahead and right click on view click new file and we're going

44
00:02:49,300 --> 00:02:56,470
to create a cocoa touch class because everything in here that we can subclass we can make a custom subclass

45
00:02:56,470 --> 00:02:56,800
of.

46
00:02:56,800 --> 00:03:04,520
So go ahead and type UI and remember where we are typing our email and password is UI textfield.

47
00:03:04,870 --> 00:03:06,130
Very very cool.

48
00:03:06,130 --> 00:03:13,810
And I'm going to call this inset textfield because we're going to set the text to be inset a little

49
00:03:13,810 --> 00:03:14,350
bit.

50
00:03:14,580 --> 00:03:18,210
OK it's going into the view folder and our target is breakpoint.

51
00:03:18,250 --> 00:03:19,360
Click create.

52
00:03:19,360 --> 00:03:20,590
Very cool.

53
00:03:20,590 --> 00:03:23,050
And in here is where the magic happens.

54
00:03:23,050 --> 00:03:27,970
This is where we're going to set it up so that it does what we want it to do with the inset text and

55
00:03:27,970 --> 00:03:29,370
the custom placeholder.

56
00:03:29,590 --> 00:03:34,120
So we're going to delete that boilerplate code and what we're going to do is we're going to create a

57
00:03:34,120 --> 00:03:37,950
private variable that only this class can access.

58
00:03:37,990 --> 00:03:44,680
Basically to set the amount of offset we want for the rectangle that contains all of the text in a text

59
00:03:44,680 --> 00:03:45,190
field.

60
00:03:45,370 --> 00:03:53,850
So go ahead and type private var and we're going to call it text rect offset because as you'll see a

61
00:03:53,970 --> 00:03:56,940
text field has what is called a text rect.

62
00:03:56,980 --> 00:03:59,870
And that means the rectangle where the text goes.

63
00:04:00,040 --> 00:04:04,280
And we're going to set the offset to be 20.

64
00:04:04,390 --> 00:04:10,180
But the important thing is we need to actually set this to be of type C.G. float specifically because

65
00:04:10,180 --> 00:04:13,460
that's what's required to modify the view.

66
00:04:13,460 --> 00:04:14,150
All right.

67
00:04:14,260 --> 00:04:15,520
Very cool.

68
00:04:15,520 --> 00:04:20,500
So next what we're going to do is we're going to set what is called padding and this is going to basically

69
00:04:20,500 --> 00:04:25,320
set up the the rectangle for exactly how we want it.

70
00:04:25,330 --> 00:04:30,610
But it's going to allow us to use this padding to offset the rectangle and then we're going to subtract

71
00:04:30,610 --> 00:04:31,490
the offset.

72
00:04:31,750 --> 00:04:35,100
So everything still is is on the screen as it's supposed to be.

73
00:04:35,110 --> 00:04:42,130
So go ahead and create another private variable called private WIPs private var padding.

74
00:04:42,400 --> 00:04:46,900
And this is going to be of type UI edge inset.

75
00:04:46,940 --> 00:04:52,990
And the cool thing is if we instantiate this we can give it a value for how much it should be inset

76
00:04:52,990 --> 00:04:57,240
from the top which for us we want it to be in zero from the left.

77
00:04:57,250 --> 00:05:02,030
We want it to be inset the text rect offset.

78
00:05:02,060 --> 00:05:06,130
Although you know what we have not instance we can actually use that yet.

79
00:05:06,130 --> 00:05:12,050
So let's go ahead and just say 20 0 from the bottom and zero from the right.

80
00:05:12,090 --> 00:05:19,150
OK so now we have an offset that tells us how far we want to shift the rectangle and we have padding

81
00:05:19,150 --> 00:05:23,770
which tells us what the what it should look like on the rectangle itself.

82
00:05:23,770 --> 00:05:24,970
Very cool.

83
00:05:24,970 --> 00:05:33,070
And now there are three methods that we need to override for this text view in order to customize the

84
00:05:33,070 --> 00:05:33,930
way it looks.

85
00:05:33,940 --> 00:05:37,850
And so one of those is called Text recked for bounds.

86
00:05:37,870 --> 00:05:44,530
Now that's when you're just looking at text in the text rectangle without editing it or modifying it.

87
00:05:44,530 --> 00:05:53,850
Then there is editing recta for bounds that's the rectangle when you are actually typing text.

88
00:05:53,890 --> 00:05:57,190
And then there is placeholder recked for bounds.

89
00:05:57,300 --> 00:05:57,940
OK.

90
00:05:57,970 --> 00:06:00,510
All kinds of custom stuff in here.

91
00:06:00,700 --> 00:06:05,140
If you think about this text recked for bounce is where the text is held.

92
00:06:05,230 --> 00:06:11,140
Editing recked for Bounds is where you're editing and placeholder recked for Bounds is where your placeholder

93
00:06:11,140 --> 00:06:11,690
is.

94
00:06:11,770 --> 00:06:14,900
But I was trying to think like why would you want to modify all these different ones.

95
00:06:14,910 --> 00:06:21,700
And I think if you had let's say that you had email like we do in our placeholder which you can see

96
00:06:21,700 --> 00:06:24,070
in our in our little simulator here.

97
00:06:24,140 --> 00:06:24,620
OK.

98
00:06:24,820 --> 00:06:29,240
And let's say we wanted it to whenever we select e-mail.

99
00:06:29,310 --> 00:06:33,890
What if we wanted the word email to shrink up and float up here to the top corner.

100
00:06:34,060 --> 00:06:36,230
Then when we're editing we can type in here.

101
00:06:36,340 --> 00:06:41,950
Then we select password the password actually animates up and hides in the corner so that it still says

102
00:06:41,950 --> 00:06:42,540
password like.

103
00:06:42,550 --> 00:06:47,140
That's one way that you can modify the rectangle and make it a really cool experience.

104
00:06:47,200 --> 00:06:55,090
But what we're going to do is we are going to create basically a rectangle using our custom offsets

105
00:06:55,090 --> 00:07:01,510
here and we're going to return that these text rechts so that we can set up how it looks exactly which

106
00:07:01,510 --> 00:07:02,420
is pretty cool.

107
00:07:02,650 --> 00:07:07,590
But you know what before we do that let's actually go ahead and I want to see what this looks like.

108
00:07:07,690 --> 00:07:13,840
So for now I'm going to drag the initial view controller to load this log in VCS just so we can see

109
00:07:13,840 --> 00:07:15,270
what it looks like.

110
00:07:15,380 --> 00:07:18,720
You know it's going to give me a problem here.

111
00:07:19,240 --> 00:07:25,460
Oh to get rid of those placeholders and now build and run.

112
00:07:25,780 --> 00:07:30,070
Of course it's expecting something returns so commented out actually.

113
00:07:30,070 --> 00:07:31,040
My bad.

114
00:07:32,850 --> 00:07:33,440
Right.

115
00:07:33,450 --> 00:07:38,140
And I just keep my storyboard open here so I can move it right back to where it was.

116
00:07:38,280 --> 00:07:38,910
Ok cool.

117
00:07:38,910 --> 00:07:44,150
So as you can see it's really hard to see me try to zoom in here.

118
00:07:44,250 --> 00:07:49,560
You can see the black text there and when I type it's green because we've set the text color but we

119
00:07:49,560 --> 00:07:55,350
want the placeholder text to show up as white first because that looks really cool.

120
00:07:55,380 --> 00:07:58,590
Let's go ahead and set this back down to a viewable size.

121
00:07:58,590 --> 00:07:59,400
Awesome.

122
00:07:59,460 --> 00:08:03,470
So move that back to the initial view controller that looks good.

123
00:08:03,590 --> 00:08:07,640
Oh well now I'm going to keep it there because I'm going to rerun it in a second.

124
00:08:07,710 --> 00:08:10,610
So back to that textfield uncomment.

125
00:08:10,620 --> 00:08:15,480
What we have commented and what we're going to do is we're going to return a rectangle but we're going

126
00:08:15,480 --> 00:08:18,460
to use UI edge insets.

127
00:08:18,690 --> 00:08:19,320
OK.

128
00:08:19,650 --> 00:08:27,000
Now UIA edgin sets like we have done before basically creates a rectangle but with a certain amount

129
00:08:27,000 --> 00:08:29,720
of inset on the top left right and bottom.

130
00:08:29,850 --> 00:08:33,660
But you know what UI edge insets is actually not going to be enough.

131
00:08:33,660 --> 00:08:41,280
We need to give it an insets rectangle so that it knows Take this rectangle and inset it by x amount.

132
00:08:41,280 --> 00:08:45,600
So there's another thing that we can call here instead of UI edge insets.

133
00:08:45,600 --> 00:08:51,540
There is one called UI edge insets inset wrecked try saying that five times fast.

134
00:08:51,690 --> 00:08:57,930
And if you pull up the information here there's no description but you can see that it takes a rectangle.

135
00:08:57,930 --> 00:09:03,990
It takes the insets and it returns a rectangle taking into account the amount that you want inset which

136
00:09:03,990 --> 00:09:05,050
is pretty cool.

137
00:09:05,070 --> 00:09:12,660
So let's go ahead and let's set that up so that we can pass it the rectangle which for us we want to

138
00:09:12,660 --> 00:09:19,020
just give it the default rectangle of the textfield to do that we're going to use bounds which you can

139
00:09:19,020 --> 00:09:21,940
see already comes in from here.

140
00:09:21,930 --> 00:09:27,420
We're going to take the bounds but we need to modify where the text goes by using our insets.

141
00:09:27,420 --> 00:09:29,640
And thankfully we already have that.

142
00:09:29,640 --> 00:09:38,210
So let's go ahead and let's just go ahead and pass in padding right now you I insets insect recked.

143
00:09:38,310 --> 00:09:40,210
We're going to pass in the bounds.

144
00:09:40,230 --> 00:09:43,970
We're going to pass in the padding and we're going to return that to the function.

145
00:09:44,070 --> 00:09:49,740
And you know what we want that to work for all three of these rectangles so copy this and paste it to

146
00:09:49,740 --> 00:09:50,730
all three.

147
00:09:50,730 --> 00:09:55,080
Now it's kind of weird but if you want this to work properly you actually have to do the same thing

148
00:09:55,080 --> 00:10:00,150
for every rectangle unless you want custom functionality like what I was describing with the placeholder

149
00:10:00,510 --> 00:10:01,530
earlier.

150
00:10:01,620 --> 00:10:03,980
That's just one thing that you can do.

151
00:10:04,210 --> 00:10:10,500
Now I'm noticing that we did not actually use text recked offset and I think that I did that because

152
00:10:10,560 --> 00:10:15,330
it would not let me because we have not yet we can't yet use it.

153
00:10:15,330 --> 00:10:16,550
So let's just get rid of that.

154
00:10:16,560 --> 00:10:22,250
We don't actually need it only the padding for the UI edge sets.

155
00:10:22,260 --> 00:10:29,280
So next what we need to do is we need to basically set up our placeholder text so that it's white and

156
00:10:29,280 --> 00:10:31,590
there's a really easy way to customize that.

157
00:10:31,590 --> 00:10:35,180
And at the very end we're going to need to use awake from NIB.

158
00:10:35,220 --> 00:10:38,710
We need to overwrite it in order to actually get this to show up in the view.

159
00:10:38,910 --> 00:10:44,510
But for now let's create a function called set up view that we will later call from awake from NIB.

160
00:10:44,580 --> 00:10:46,560
So type phunk set up view

161
00:10:49,790 --> 00:10:55,960
and what we're going to do is we're going to create a placeholder of type and s attributed string.

162
00:10:56,240 --> 00:11:00,930
And the cool thing about that is that we can set specific attributes because it's attributed.

163
00:11:01,250 --> 00:11:07,730
And if we set an attribute of the font color or the foreground color of the text then that allows us

164
00:11:07,730 --> 00:11:15,660
to modify our placeholder so go ahead and type let placeholder equals and s attributed string.

165
00:11:16,040 --> 00:11:22,520
And if you put a print that is there you can see there is an option to pass it a string with attributes.

166
00:11:22,610 --> 00:11:30,350
Select that and we're going to go ahead and pass in self placeholder K because the placeholder text

167
00:11:30,350 --> 00:11:32,240
for one of our text fields is email.

168
00:11:32,240 --> 00:11:33,560
The other is password.

169
00:11:33,620 --> 00:11:38,120
So we're going to pass it the placeholder text and unwrap it because we know for sure there's a value

170
00:11:38,120 --> 00:11:39,170
that's fine.

171
00:11:39,170 --> 00:11:48,130
Now for the attributes we need to basically give it a dictionary with a key value and a value value.

172
00:11:48,290 --> 00:11:50,740
So go ahead and put some brackets there.

173
00:11:50,750 --> 00:11:57,620
And for the key what we need to give it is the foreground color key and to access that we need to access

174
00:11:57,620 --> 00:11:59,840
the N.S. attributed string keys.

175
00:11:59,870 --> 00:12:03,710
We can do that by typing N.S. attributed string key.

176
00:12:03,710 --> 00:12:04,820
Now there's another one.

177
00:12:04,860 --> 00:12:09,500
There's a key within this that you can access by typing dot foreground color.

178
00:12:09,770 --> 00:12:11,000
OK so that is the key.

179
00:12:11,000 --> 00:12:15,760
The foreground color key and the value we're going to set is your eye color actually.

180
00:12:15,780 --> 00:12:21,110
Let's do a color literal those are way cooler color literal and you can see it's already white that's

181
00:12:21,110 --> 00:12:22,050
perfect.

182
00:12:22,070 --> 00:12:29,480
So the foreground color is now set to white and all we need to do now is just call self attributed placeholder

183
00:12:29,990 --> 00:12:32,640
and we can set it to be placeholder.

184
00:12:32,660 --> 00:12:37,280
And now we have basically told our textfield to have an attributed placeholder or we could have done

185
00:12:37,280 --> 00:12:43,010
this in code by setting and attributed by making it an attributed textfield but I didn't want to do

186
00:12:43,010 --> 00:12:43,210
that.

187
00:12:43,220 --> 00:12:46,840
I thought it would be cooler to show you how we can set it up this way.

188
00:12:46,850 --> 00:12:53,030
So next what we're going to do is at the very top beneath padding we're going to override awake from

189
00:12:53,030 --> 00:12:53,810
NIB.

190
00:12:53,870 --> 00:13:00,960
We're going to call wups says set up view and beneath that we're going to call a super awake from NIB.

191
00:13:01,340 --> 00:13:02,450
OK.

192
00:13:02,840 --> 00:13:08,630
The Apple documentation asks you to do that at the very end of overriding things and awake from NIB.

193
00:13:08,630 --> 00:13:15,170
So now that we have set this up let's go ahead and head back to main storyboard let's select our textfield

194
00:13:15,230 --> 00:13:19,210
and let's give them an identity of inset textfield.

195
00:13:19,280 --> 00:13:19,800
OK.

196
00:13:20,030 --> 00:13:26,960
Now when we run this it should give us a nice inset label here and a nice white placeholder let's build

197
00:13:26,960 --> 00:13:31,610
it and let's see if it worked then we're going to set up our shadow view on this great view controller.

198
00:13:31,610 --> 00:13:33,240
It's really easy.

199
00:13:33,490 --> 00:13:34,840
We'll just set that up in just a second.

200
00:13:34,850 --> 00:13:36,550
But let's go ahead and let's verify.

201
00:13:36,590 --> 00:13:37,010
OK.

202
00:13:37,040 --> 00:13:37,390
Awesome.

203
00:13:37,400 --> 00:13:43,500
Look at that beautiful we have a nice white placeholder it's inset properly and when we type it's going

204
00:13:43,500 --> 00:13:46,780
to be green exactly what we wanted.

205
00:13:46,790 --> 00:13:47,810
That's perfect.

206
00:13:47,810 --> 00:13:49,640
So looks like that worked.

207
00:13:49,670 --> 00:13:54,220
Let's go ahead and drop the initial view controller over here so we can test this one for now.

208
00:13:54,440 --> 00:13:58,040
And we're going to just create a very simple subclass here.

209
00:13:59,450 --> 00:14:01,940
That will basically give a nice little drop shadow.

210
00:14:02,160 --> 00:14:07,730
And that's just kind of enhances the experience it makes it look like it's floating out above the page.

211
00:14:07,790 --> 00:14:16,400
Very cool so to do that go ahead and right click on view click new file Cocco touch class UI view is

212
00:14:16,400 --> 00:14:20,160
the subclass and we're just going to call this shadow view.

213
00:14:20,300 --> 00:14:23,100
Click next and create it in the view folder.

214
00:14:23,570 --> 00:14:24,350
And here we go.

215
00:14:24,410 --> 00:14:27,060
So get rid of that boilerplate code.

216
00:14:27,110 --> 00:14:32,000
We're going to go ahead and we're going to create a function just like we always do called set up view

217
00:14:32,870 --> 00:14:39,550
an inside set up view we're going to set a few different properties to give Are you I view a shadow.

218
00:14:39,710 --> 00:14:42,470
The first one is the shadow opacity.

219
00:14:42,470 --> 00:14:42,970
OK.

220
00:14:43,220 --> 00:14:47,260
We're going to set it to be 75 percent opaque by typing self.

221
00:14:47,520 --> 00:14:54,560
Layer dot shadow opacity and set it to be 0.75 for 75 percent.

222
00:14:54,560 --> 00:15:01,010
Next we're going to give it a shadow radius to say how big like how focused or unfocused should the

223
00:15:01,010 --> 00:15:01,840
shadow be.

224
00:15:02,090 --> 00:15:09,110
So go ahead and type self-taught layer dot shadow radius and set that to be equal to 5.

225
00:15:09,110 --> 00:15:14,690
We don't want it to be too big and pillowy of a drop shadow but we want it to be nice and kind of closer

226
00:15:14,690 --> 00:15:18,700
so it looks like it's floating but it's not flying off the screen.

227
00:15:18,770 --> 00:15:19,270
Cool.

228
00:15:19,270 --> 00:15:23,000
So next we're going to give it a color of course because we need to know what color to show this shadow

229
00:15:23,000 --> 00:15:23,350
us.

230
00:15:23,360 --> 00:15:34,130
So go ahead and type self layer dot shadow color and we're going to set this to be a color literal because

231
00:15:34,190 --> 00:15:42,810
color literals are cool and oh you know what it's looking like it's not going to let me.

232
00:15:42,810 --> 00:15:43,380
Interesting.

233
00:15:43,410 --> 00:15:44,010
OK.

234
00:15:44,250 --> 00:15:51,230
Now for modifying view subclauses it requires a C-g color so at the end of you I color black.

235
00:15:51,240 --> 00:15:54,200
Go ahead and modify it so that it's a C.G. color at the end.

236
00:15:54,510 --> 00:15:57,120
And you know what this is all we need to do to create a shadow.

237
00:15:57,120 --> 00:15:58,500
It's that easy.

238
00:15:58,500 --> 00:16:04,420
Now what we can do is we can call awake from NIB and we can call set up view.

239
00:16:04,440 --> 00:16:12,090
But if you notice this is kind of redundant We don't really need to be calling it from a set up view

240
00:16:12,120 --> 00:16:14,430
because we only actually use this once.

241
00:16:14,430 --> 00:16:18,060
We don't need to repeat this anywhere else in this in this subclass.

242
00:16:18,060 --> 00:16:20,000
So I'm actually going to make this a little more efficient.

243
00:16:20,010 --> 00:16:24,720
I'm going to cut this I'm going to get rid of set up view and just in Awake from NIB I'm going to go

244
00:16:24,720 --> 00:16:28,110
ahead and override this and then call superdad a week from now.

245
00:16:28,650 --> 00:16:30,580
And let's get rid of set up view.

246
00:16:30,720 --> 00:16:37,140
And I think that we can actually make our inset textfield subclass efficient as well because we don't

247
00:16:37,140 --> 00:16:43,230
need to modify the the attributed placeholder as well so let's get rid of that get rid of set up view

248
00:16:43,740 --> 00:16:47,740
paste that in call superdad awake from NIB and get rid of set up view.

249
00:16:47,760 --> 00:16:48,310
Sorry.

250
00:16:48,480 --> 00:16:50,640
We can make our code a little better that way.

251
00:16:51,000 --> 00:16:53,000
And now for Shadow view.

252
00:16:53,010 --> 00:16:58,070
Let's go ahead and go back to main that storyboard select our gray background view here.

253
00:16:58,110 --> 00:17:01,410
Make sure you're not selecting the stack view and in the identity.

254
00:17:01,410 --> 00:17:03,990
Go ahead and call it Shatto view.

255
00:17:04,080 --> 00:17:04,950
All right.

256
00:17:04,950 --> 00:17:05,640
That should be it.

257
00:17:05,640 --> 00:17:11,940
Let's go ahead and see if we get ourselves a nice shadow build and run open the simulator and let's

258
00:17:11,940 --> 00:17:12,980
check it out.

259
00:17:13,020 --> 00:17:16,960
You'll notice in the end the interface builder here there's no shadow but hey look at that.

260
00:17:16,980 --> 00:17:21,960
When we open it we get a nice floaty shadow it just makes it look so cool.

261
00:17:22,100 --> 00:17:24,120
And yeah man I really like that.

262
00:17:24,120 --> 00:17:25,620
That's so awesome.

263
00:17:25,620 --> 00:17:32,790
So our textfield here we basically created a subclass to inset it and we set an attributed placeholder

264
00:17:32,910 --> 00:17:35,250
in code to be white.

265
00:17:35,250 --> 00:17:42,000
We also created a subclass of UI view to add a nice drop shadow which you can see here in our interface

266
00:17:42,000 --> 00:17:43,330
builder compare the two.

267
00:17:43,410 --> 00:17:44,260
No drop shadow.

268
00:17:44,280 --> 00:17:50,640
And a nice drop shadow Whyalla very nice in the next video we're going to do is we're going to set up

269
00:17:50,640 --> 00:17:57,510
our authentication service which will allow us to actually open up the email button here type in an

270
00:17:57,510 --> 00:18:03,630
email and password create a user and authenticate them into our app so that we can actually start doing

271
00:18:03,930 --> 00:18:07,580
stuff with them authenticated like making posts adding groups.

272
00:18:07,590 --> 00:18:10,050
All of that amazing stuff.

273
00:18:10,110 --> 00:18:11,370
So I'll see it in the next video.

274
00:18:11,370 --> 00:18:12,600
Thanks for watching this one.

275
00:18:12,600 --> 00:18:14,010
And let's head on over.