Hey hey everybody what is going on this is Caleb with devah slopes and in this video we're going to
make those custom subclasses for the textfield.
We're also going to make a nice view subclassed to add a shadow to our log in view to look super super
cool very pretty.
MWAA let's do it now.
So pull open that X code project.
And here we go let's go ahead and set up the View Controller files for these first because without the
proper swift file We're not going to be able to actually do anything with these controllers.
We don't want that.
So let's go ahead and let's right click on controller click new file and we're going to create a Cocco
touch class that is a subclass of view controller.
Now name one off VC will name the other one.
Log in VC click next and we're going to save this to the controller file make sure that the target is
properly ticked.
OK click Create.
And this looks awesome.
Now go back to main storyboard select all Visi which that's this one.
Then go into the identity inspector and we're going to type Fisi press enter and that's great.
Now just so you know for this app we're going to be instantiating certain view controllers using the
storyboard.
And so in order to do that we're going to need its storyboard ID.
So what I like to do is I just like to copy the identity name and paste that in as the storyboard ID
so just do that when I tell you to in this in this course.
We're not going to use it for every single view controller but for some of them we will next right click
on controller click new file Cocco touch class and we'll name this one.
Locknut Lufkin log in VC as a subclass of view controller.
OK.
Just like before.
Click next click Create and that looks good.
Back in main storyboard select log in VC and set its identity to log in VC and just like before copy
it and paste that into the storyboard ID.
Very cool so now its good it has an identity.
Both of these have a proper identity and now lets go ahead and create those custom view subclasses.
Now I don't know if you saw it in the simulator but when you go into the log in view controller and
you select by email these this email has the placeholder text inset from the top and bottom and the
left and it has kind of a cool white placeholder text which you can't actually set in the interface
builder.
Then when you start typing it turns to this very cool green color.
So we're going to set that up now so go ahead and right click on view click new file and we're going
to create the cocoa touch class because everything in here that we can subclass we can make a custom
subclass of.
So go ahead and type UI and remember where we are typing our email and password is UI textfield.
Very very cool.
And I'm going to call this inset textfield because we're going to set the text to be inset a little
bit.
OK it's going into the view folder and our target is breakpoint.
Click create.
Very cool.
And in here is where the magic happens.
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
the custom placeholder.
So we're going to delete that boilerplate code and what we're going to do is we're going to create a
private variable that only this class can access.
Basically to set the amount of offset we want for the rectangle that contains all of the text in a text
field.
So go ahead and type private var and we're going to call it text rect offset because as you'll see a
text field has what is called a text rect and that means the rectangle where the text goes.
And we're going to set the offset to be 20.
But the important thing is we need to actually set this to be of type C.G. float specifically because
that's what's required to modify the view.
All right.
Very cool.
So next what we're going to do is we're going to set what is called padding and this is going to basically
set up the rectangle for exactly how we want it.
But it's going to allow us to use this padding to offset the rectangle.
And then we're going to subtract the offset.
So everything still is is on the screen as it's supposed to be.
So go ahead and create another private variable called private WIPs private var padding.
And this is going to be of type UI edge inset.
And the cool thing is if we instantiate this we can give it a value for how much it should be inset
from the top which for us we want it to be in zero from the left.
We want it to be inset the text rect offset.
Although you know what we have not standard we can actually use that yet.
So let's go ahead and just say 20 0 from the bottom and zero from the right.
OK.
So now we have an offset that tells us how far we want to shift the rectangle and we have padding which
tells us what the what it should look like on the rectangle itself.
Very cool.
And now there are three methods that we need to override for this text view in order to customize the
way it looks.
And so one of those is called Text recked for bounds.
Now that's when you're just looking at text in the text rectangle without editing it or modifying it.
Then there is editing recta for bounds that's the rectangle when you are actually typing text.
And then there is placeholder recked for bounce.
All kinds of custom stuff in here.
If you think about this text recked for bounce is where the text is held editing record for bounds is
where you're editing and placeholder recked for bounds is where your placeholder is.
But I was trying to think like why would you want to modify all these different ones.
And I think if you had let's say that you had email like we do in our placeholder which you can see
in our in our little simulator here.
OK.
And let's say we wanted it to whenever we select e-mail what if we wanted the word email to shrink up
and float up here to the top corner.
Then when we're editing we can type in here.
Then we select password the password actually animates up and hides in the corner so that it still says
password like.
That's one way that you can modify the rectangle and make it a really cool experience.
But what we're going to do is we are going to create basically a rectangle using our custom offsets
here and we're going to return that these text rechts so that we can set up how it looks exactly which
is pretty cool.
But you know what before we do that let's actually go ahead and I want to see what this looks like.
So for now I'm going to drag the initial view controller to load this log in B.C. So it just just so
we can see what it looks like.
You know it's going to give me a problem here.
Oh the get rid of those placeholders and now build and run out.
Of course it's expecting something returned so commented out actually.
My bad.
Right going to just keep my storyboard open here so I can move it right back to where it was.
Ok cool.
So as you can see it's really hard to see me try to zoom in here.
You can see the black text there and when I type it's green because we've set the text color but we
want the placeholder text to show up as white first because that looks really cool.
And let's go and set this back down to a viewable size.
Awesome.
So move that back to the initial view controller that looks good.
Oh well now I'm going to keep it there because I'm going to rerun it in a second.
So back to inset textfield uncomment.
What we have commented and what we're going to do is we're going to return a rectangle but we're going
to use UI edge insets.
OK.
Now UI edgin sets like we have done before basically creates a rectangle but with a certain amount of
inset on the top left right and bottom.
But you know what UI edge insets is actually not going to be enough.
We need to give it an insets rectangle so that it knows Take this rectangle and inset it by x amount.
So there's another thing that we can call here instead of UI edge insets.
There is one called UI edge insets inset wrecked.
Try saying that five times fast.
And if you pull up the information here there's no description but you can see that it takes a rectangle.
It takes the insets and it returns a rectangle taking into account the amount that you want inset which
is pretty cool.
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
just give it the default rectangle of the textfield to do that we're going to use bounds which you can
see already comes in from here.
We're going to take the bounds but we need to modify where the text goes by using our insets and thankfully
we already have that.
So let's go ahead and let's just go ahead and pass in padding.
All right now you I insets insect recked.
We're going to pass in the bounds.
We're going to pass in the padding and we're going to return that to the function.
And you know what we want that to work for all three of these rectangles so copy this and paste it to
all three.
Now it's kind of weird but if you want this to work properly you actually have to do the same thing
for every rectangle unless you want custom functionality like what I was describing with the placeholder
earlier.
That's just one thing that you can do.
Now I'm noticing that we did not actually use text recked offset and I think that I did that because
it would not let me because we have not yet we can't yet use it.
So let's just get rid of that.
We don't actually need it only the padding for the UI edge insets.
So next what we need to do is we need to basically set up our placeholder text so that it's white and
there's a really easy way to customize that.
And at the very end we're going to need to use awake from NIB.
We need to overwrite it in order to actually get this to show up in the view.
But for now let's create a function called set up view that we will later call from awake from NIB.
So type phunk set up view
and what we're going to do is we're going to create a placeholder of type and s attributed string and
the cool thing about that is that we can set specific attributes because it's attributed.
And if we set an attribute of the font color or the foreground color of the text then that allows us
to modify our placeholder so go ahead and type let placeholder equals and s attributed string.
And if you put a print there you can see there is an option to pass a string with attributes.
Select that and we're going to go ahead and pass in self placeholder K because the placeholder text
for one of our textfield is e-mail.
The other is password.
So we're going to pass it the placeholder text and unwrap it because we know for sure there's a value
that's fine.
Now for the attributes we need to basically give it a dictionary with a key value and a value value.
So go ahead and put some brackets there.
And for the key what we need to give it is the foreground color key and to access that we need to access
the N-S attributed string keys.
We can do that by typing N.S. attributed string key.
Now there's another one.
There's a key within this that you can access by typing dot foreground color.
OK so that is the key.
The foreground color key and the value we're going to set is your eye color.
Actually now let's do a color literal those are way cooler color literal and you can see it's already
white that's perfect.
So the foreground color is now set to white and all we need to do now is just call self attributed placeholder
and we can set it to be placeholder.
And now we have basically told our textfield to have an attributed placeholder or we could have done
this in code by setting and attributed by making it an attributed textfield but I didn't want to do
that.
I thought it would be cooler to show you how we can set it up this way.
So next what we're going to do is at the very top beneath padding we're going to override awake from
NIB.
We're going to call wups says set up view and beneath that we're going to call a super dad awake from
NIB.
OK.
The Apple documentation asks you to do that at the very end of overriding things and awake from NIB.
So now that we have set this up let's go ahead and head back to main that storyboard let's select our
textfield and let's give them an identity of inset textfield.
OK.
Now when we run this it should give us a nice inset label here and a nice white placeholder let's build
it and let's see if it worked then we're going to set up our shadow view on this great view controller
it's really easy.
We'll just set that up in just a second.
But let's go ahead and let's verify.
OK.
Awesome.
Look at that beautiful we have a nice white placeholder it's inset properly and when we type it's going
to be green exactly what we wanted.
That's perfect.
So looks like that worked.
Let's go ahead and drop the initial view controller over here so we can test this one for now.
And we're going to just create a very simple subclass here that will basically give a nice little drop
shadow.
And that's just kind of enhances the experience it makes it look like it's floating out above the page.
Very cool so to do that go ahead and right click on view click new file Cocco touch class you view is
the subclass and we're just going to call this shadow view.
Click next and create it in the view folder.
And here we go.
So get rid of that boilerplate code.
We're going to go ahead and we're going to create a function just like we always do called set up view
an inside set up view we're going to set a few different properties to give are you I view a shadow.
The first one is the shadow opacity.
OK.
We're going to set it to be 75 percent opaque by typing self layered shadow opacity and set it to be
zero point 7 5 for 75 percent.
Next we're going to give it a shadow radius to say how big like how focused are unfocussed should the
shadow be.
So go ahead and type self-taught Layard's shadow radius and set that to be equal to 5.
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
so it looks like it's floating but it's not flying off the screen.
Cool.
So next we're going to give it a color of course because we need to know what color to show this shadow
us.
So go out and type self layer dot shadow color and we're going to set this to be a color literal because
color literals are cool and oh you know what it's looking like it's not going to let me.
Interesting.
OK.
Now for modifying you I've subclasses it requires a C-g color so at the end of you I color black.
Go ahead and modify it so that it's a C.G. color at the end.
And you know what this is all we need to do to create a shadow.
It's that easy.
Now what we can do is we can call awake from NIB and we can call set of view but if you notice this
is kind of redundant.
We don't really need to be calling it from a set up view because we only actually use this once we don't
need to repeat this anywhere else in this in this subclass.
So I'm actually going to make this a little more efficient.
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
ahead and override this and then call super awake from NIB and let's get rid of set up view.
And I think that we can actually make our inset textfield subclass efficient as well because we don't
need to modify the the attributed placeholder as well.
So let's get rid of that get rid of set up view paste that in call superdad awake from NIB and get rid
of set up view.
Sorry.
We can make our code a little better that way.
And now for chteaux view let's go ahead and go back to main storyboard.
Select our gray background view here.
Make sure you're not selecting the stack view and in the identity.
Go ahead and call it Shatto view.
All right that should be it.
Let's go ahead and see if we get ourselves an eye shadow build and run open the simulator and let's
check it out.
You'll notice in the in the interface builder here there's no shadow but hey look at that when we open
it we get a nice floaty shadow it just makes it look so cool.
And yeah man I really like that.
That's so awesome.
So our textfield here we basically created a subclass to inset it and we set an attributed placeholder
in code to be white.
We also created a subclass of view to add a nice drop shadow which you can see here in our Interface
Builder compare the two.
No drop shadow.
And a nice drop shadow Lalah very nice.
In the next video.
We're going to do is we're going to set up our authentication service which will allow us to actually
open up the email button here type in an email and password create a user and authenticate them into
our app so that we can actually start doing stuff with them authenticated like making posts adding groups.
All of that amazing stuff.
So I'll see it in the next video.
Thanks for watching this one.
And let's head on over.