Hey everybody what's going on this is Caleb with Debb slopes dot com and in this video we're going to
dive into the world of view and we're going to create a custom view that will show very special characteristics
that we can set in code using our view layer.
So go ahead and pull open your X code project and we last left off creating our model layer.
But for now we're going to go ahead and dive into this view folder right click on view click new file
and instead of clicking swift file what we're going to do is we're going to create what's called a cocoa
touch class.
So double click on it and you'll see right here subclass of k now subclassing is a core principle of
object oriented programming and swift in general if you're using model view controller.
And we will talk about that very quickly just to cover the principles there.
But basically this class we can give it whatever name we want and it's conventional to use capital letters
for every word and not have any spaces so I'm just going to call this custom pretty view loops with
only two t's there.
And you'll see it is subclassing you I view.
We'll talk about that in a second.
Make sure the language is swift.
Click next then click Create K and you'll notice right here it creates a class for us automatically
which is very cool.
Delete this comment and then let's just talk about what's going on here.
We have a class called Custom pretty view.
Then there's a colon.
And afterwards you view now you view is a very very big subclass.
And most things in Interface Builder that we can use like labels and buttons segmented controls text
fields all of it is going to inherit from you I view meaning there are some shared properties amongst
all of them.
Now if we were to go into main that storyboard and drag on a view like so you view drag it on like this.
So go ahead and click the pin button and give it a fixed width of 250 and have it a fixed height of
300.
Add two constraints.
And of course it's not going to show up because we haven't told where on the screen it should live.
So let's do that by clicking the alignment button and pinning it horizontally and vertically in the
container.
So now it shows up the right size it's going to be perfectly centered and take a look that is an instance
of you eye view you can see it right there.
Now we have not given at a particular class to identify with but we're going to go ahead and set that
up here in Kustom pretty view.
Now in a view if you're going to create a subclass of a view there's a very important function you need
to call that's called Awake from NIB.
And actually we're overriding the function awake from NIB so that we can pass in our customization.
Now I'm not sure if you saw that I was a little fast I'll type away from that again.
And let's read it awake from NIB prepares the receiver for service after it's been loaded from an interface
builder archive or nib file.
OK.
Now our app is using Interface Builder so it's basically saying hey after we load that view on the screen
call all the code in Awake from NIB.
OK.
And that's how that's why we pass it in here because that's when it can be customized after it loads.
We customize it if we tried to customize it before it was loaded.
We'd get a crash because the view would be nil.
But for now let's go ahead and let's set up some customizations.
Now the way to do that is we need to access the layer property of this view.
So if we think about custom pretty view we're going to access it's layer.
And if you've ever done any work with like Photoshop or sketch or anything like that you probably understand
the concept of working in layers you'll have way back layers and you have way up close layers and there
can be you know hundreds of layers between all the way to the back of your project the interface builder
is no different.
This layer this view right here is on top of this back view.
So it's a layer above it.
Now if we think about that this is the layer that we're modifying.
We want to modify what it looks like so we can call layer dot and we can access properties like the
corner radius for instance and we can simply set that to be a number like 20.
That will give us a nice rounded corner.
We can set things like a laser dot shadows.
So let's give it a shadow let's give it a shadow with a color of go ahead and press equals there and
we'll use a color literal.
This is another really cool thing and swift for an X cotinine.
You can select this little dot here and choose a color like this dark gray and it'll set the shadow
color to be that dark gray.
But setting a color for a Shadow is not enough.
We also need to set an opacity and we also need to set a radius so called Layer shadow radius.
And this is like the amount of Blur that's on the shadow so I'm just going to say maybe I don't know
10 k and then for the layer dot shadow opacity I'm going to set an opacity of 75 percent like so.
So at this point our view our custom pretty view is going to have a rounded corner of 20.
A dark gray shadow with a radius of 10 and an opacity of 75 the shadow not the view.
Let's think what else could we do.
Let's let's give it a nice background color.
Called background color and use a color literal like so.
And let's choose a fun color.
How about this orange color.
That looks fun.
Very nice.
So you know what.
This looks pretty good.
So we're going to have a rounded corner a nice shadow and the background color of orange.
You know what else we can do we could give it a border.
We could say layered border color.
OK.
By the way you have to give both a width and a color.
How about a border color of dark gray.
So we use a color literally again.
Double click it and we'll choose that dark gray.
Then we'll go ahead and say layer border width and we'll set it to be equal to about five.
All right.
So now we have a bunch of properties here that we have modified in code and now just like in the previous
video when I changed the name of controller I had changed the identity of that controller right.
What I can do now is go into main story board and I can select this view.
I can go to the identity and look what I can set custom pretty view push enter and it's now an instance
of custom pretty view.
Now you're probably wondering wait why isn't the background orange Why isn't there a shadow the way
that we've done this interface builder can't actually present the details because the app is not running
the function is called when the app is actually built and loaded on a real device.
There is an advanced topic called I.B. desirables and Iby inspectable is that will allow you not only
to view those changes from your custom class in interface builder but it lets you modify them here with
cool sliders and buttons and selections.
So we can talk about that in another target topic but for now I want to build this and I want to see
if our custom view subclass worked.
So go ahead and click BuildOn run and it's going to go ahead and build and compile our app.
It'll load the simulator which will be able to check out and see how we did.
So I'm going to pull this over if it will let me it's not even letting me move it.
That's weird.
Come on iPhone that's being grumpy.
Oh well so here we go it's loading.
And look at that.
That's our view.
That's exactly how we wanted to configure it.
We have an orange background a dark gray border a nice fluffy drop shadow.
Wow.
So we have the view controller here communicating with our view that has a special subclass that we
just created.
That's our view layer.
Our controller is interfacing with it.
By default that's something that Apple just gives you out of the box which is really really cool.
In the next video we're going to go ahead and connect more things to The View Controller and show you
how to actually interface with those in code.
In our view controller subclass.
So we're going to head over to the next video.
Amazing job guys just take a look at this.
It looks so good.
All right let's head over to the next video and let's connect some things to our view controller and
help it to communicate back and forth.