Hey guys going on this is Caleb with Dev slopes and in this video we're going to create an extension
of you view controller that's going to modify the way that view controllers are presented.
And it's basically going to make it really easy for us to emulate the animation style of a navigation
controller without actually needing to use one.
So pull open your X code project just like so and right click on the extensions group and select new
file.
It's just going to be a swift file and we're going to call this UI View Controller XTi press create.
And here we go.
We have a an empty switch file ready for us now in order to actually use this since we're modifying
part of you view controller we need to import UI kit and you like it includes foundation so we're just
going to get rid of foundation and import it.
So go ahead and type extension and just like you might expect it's an extension of UI view controller
give it some curly brackets and in here we're going to write two functions present detail and dismiss
detail.
Basically what we're doing is we are overriding the default animation that happens when you present
a view controller.
And we're going to be just modifying the animation with our own.
It's that easy.
So let's go ahead and let's begin let's type phunk present detail and we're going to go ahead and give
it some curly brackets and to present this we need to pass it.
A view controller.
So we're going to go ahead and call view controller to present.
And that's going to be of type you have controller but I don't necessarily want it to show this the
whole time like if I type present detail view controller present I don't want it to show this.
So I'm going to actually put an underscore at the beginning and just set this as an internal parameter.
So now we need to create a transition of type C.A. transition which comes from the core animation library.
So let's go ahead and do that by typing.
Let.
Transition equals C.A. transition and go ahead and instantiate it.
And now we're going to go ahead and set it up.
So let's set the duration of the transition.
How long it takes by typing transition duration and we're going to make it 0.3.
That's a good amount of time for a transition.
K now we need to set the type of the transition.
So go ahead and type transition type whip's type.
And for the type in order to access it we need to use a K then see a four core animation and you'll
see that there are quite a few If we type see a transition there is Faid push move in Reveal from top.
And this basically just changes how the animation works.
You can set whatever you want but I'm going to use push because it takes any existing content and it
pushes that out as the the current view controller slides into place.
So we're basically going to just slide over the old view controller and present this one just like a
UI navigation controller.
So select KCA transition push.
Now we're going to set up a subtype which tells it where it should come from.
So go ahead and type transition dot subtype and that's going to be KCA transition from.
Right.
OK.
So we're pushing the current view controller often replacing it with the new one and we're doing it
from the right to the left.
All righty.
That looks great.
And now all we need to do is set the layer of whatever view controller we're dealing with here we're
going to set the layer to have this transition we're going to add it as it's transition.
So go ahead and type self meaning whatever view controller this is going on.
We're going to go into the view.
We're going to access it's window.
We're going to access the layer of that window.
And if you type as you can see that you can add ASEA animation.
Now you might be thinking wait a minute see a transition that's not C.A. animation but if you inspect
it you can see that it really is a type of C.A. animation so we can pass in the transition.
Now the key is this is the thing that we need to pass in it's a string.
But the cool thing is that s.a.a transition already has a built in key and we can access it by typing
K see a transition.
It's an identifier that represents a transition animation so we can just give it that key.
It's already built in for us supercool.
So now that this is all done we have set up our own custom transition what we need to do is to present
the view controller that we have passed in.
So go ahead and type present and for the view controller to present pass in view controller to present
the one we pass in when we call this function and for the animated part here we're going to go ahead
and call false.
The reason for that is because we have already overwritten the animation and we've added it in.
If we were to call it true it would just call the default animation style which is pop it up from the
bottom to the top.
We don't want that now when it's done we don't care.
We're just going to type nil.
We don't care when it's finished we just care when when it presents.
So this is how we're going to present our detail controller and have it slide in from the right.
Now we need to create our function that will dismiss it properly and animate it to the left.
OK.
Just like a navigation controller.
So go ahead and type phunk dismiss detail.
And what we're going to do is we're going to do the same exact thing and I'm actually going to just
copy and paste this code.
I know that's bad but I'm going to copy and paste it in because we're literally doing the same thing
except instead of transitioning from the right.
We're transitioning from the left.
And that's why I'm doing that.
So we have added a custom animation.
It's going for 0.3 seconds we're pushing the view controller and we are going from the left to the right
now and all we need to do to actually make this work is to call dismiss the default function from Iowa
s but we're going to call false for animated because otherwise it would just do the default dismissal
animation.
We're trying to use our custom one here so called false for animated and for the completion call no.
Now any instance of UI controller we can call this on and it will be able to present and dismiss just
like a UI navigation controller.
There's a few more things that we need to set up before we can use it but it's going to be really cool.
So let's go do that now.
Go into maned storyboard and what we're going to do is we're actually going to have to give some of
our view controllers identifiers so that they can be instantiated from the storyboard.
Now to do that we're going to click Create Go AVC and we're going to give it a storyboard ID.
This allows us to easily instantiate these view controllers just based on their identifier from the
storyboard.
Now I'm going to just call this create wups create goal VC and press enter on goals.
VC I'm going to do the same thing and Precentor OK.
I'm going to get rid of this manual storyboards segue because we're going to actually present this using
our custom function.
So let's go ahead and let's think about what do we need to do here.
We need to go into Goles VC and we have an IB action here that allows us to do something when we press
the ad goals button.
Now what we need to do is we need to instantiate an instance of create goals Fisi and we need to present
it using our handy dandy present detail function we just wrote in our extension.
So let's go ahead and let's create that view controller by using a guard.
Let k so type.
Guard let create cool Visi and we're going to set this to be equal to storyboard dot instantiate a view
controller with identifier.
This is an optional way to access the storyboard and instantiate a view controller with a specific identifier
which we just created create goal Visi since it's optional and there are chances there could be errors.
That's why I am using a guard left because if that doesn't work we're just going to go ahead and return.
Whoops we're just going to go ahead and return out of this return.
And that's going to let us exit this and not actually cause an error if there is no controller with
that identifier.
It's just the way to be safe.
But assuming that it works and it will because we have given it the proper identifier we're going to
go ahead and call present detail since we're in an instance of you I view controller we can access this
function and we can pass it create Go Visi check it out.
Now we can present it properly using our animation style.
Now presenting It's one thing but we should also be dismissing it the proper way to do that.
Go into create Visi scroll down and replace this stock iOS dismissal with dismiss detail and that should
properly dismiss it back to the left the way we want.
She we go try it out.
I think we should.
I'm really excited.
So click build and run and we're going to open up our simulator here.
We'll test to see if this works the way that we are hoping.
Let's go check it out.
All right.
So tap on the button and let's see if it slides over to the right.
Did you see that.
That was cool.
So now.
Tap the dismiss button and we'll see if it goes back the right way.
It works.
Amazing that looks so good.
So let's try it again.
Awesome guys we can get this beautiful animation just like a UI navigation controller.
And by the way it looks very fluid on an iPhone sometimes animations in the simulator can be a little
bit choppy and if you ever want to test the animations you can turn on slow animations and watch how
it actually looks in real life.
Oh you know what weird I wonder why it's not letting me do that.
Oh you know what.
I bet it's because it's a custom animation.
OK.
Anyway so I guess you can't do that for a custom C.A. transition.
But anyway you guys get the idea.
It's moving nicely and it's transitioning just like a navigation controller.
So so cool.
And then the next video we're going to go ahead and write another extension that is going to allow us
to bind our buttons to the keyboard so that when we tap on our text view the button will slide up with
the keyboard and not be obscured.
We're also going to write an extension for these buttons so that when they're selected we can change
their selection or selection color.
It's going to be super cool.
Let's head over there and do that right now.
I'll see in the next video.