[MUSIC].

[SOUND] Starting in iOS7.

Apple added the ability to create custom transitions between view controllers.

Today we're going to focus on creating a custom transition for

a modal view controller's presentation and dismissal.

So instead of relying on Apple's standard modal transitions,

such as the slide in from the bottom of the screen, cross dissolve,

flip, etc., we'll create our own custom transition.

[SOUND] For our workshop demo, we're going to build a simplified version of a photos

app, where users tap on an image thumbnail to view the image in a full screen modal.

We'll use a custom view controller transition to launch and

dismiss a view controller.

So let's get started.

Let's create a new single view project in x code.

We'll call it transitions demo.

We're going to add an image into the project,

which we'll be using in our views.

In the viewercontrol.m file infuted load we'll create a button that

displays an image.

[NOISE] So UIButton button equals UIButton buttonWithType: UIButtonTypeCustom,

We'll add target self with selector present modal.

[SOUND].

Then, we'll set the button's image to the one we added to the project.

We'll set translatesAutoresizingMaskIntoConstraints

to no, then add it as a subview of self.view.

Then, we'll add some basic constraints,

making it 150 point square

with 30 points of top and

right padding.

[SOUND] The vertical constraints will just copy

the horizontal constraints [SOUND] and

will change h to v and update the string.

[SOUND] So we'll have a square button with our image on it,

150 point square in the top right corner.

Next, let's create that present modal method.

In it, we'll be presenting our modal, so we'll need to create that view now.

In X code, we'll go to File, New File, and select Coco touch class, and then name

our file custom modal view controller, a subclass of UI view controller.

Hit next, then create, and our class is added to our project.

Let's import CustomModalViewController.h at the top of ViewController.m.

[SOUND] And then down in present modal,

we'll create a new instance

of the view controller.

[SOUND] Then we'll call presentViewController,

animated, yes, with an empty completion block.

Next, let's open CustomModalViewController.m and

under viewDidLoad let's add our full screen image and a close button.

To add some visual separation, let's first set self.views background color to black..

[SOUND] Next, let's build our close button.

We'll create it with type custom.

[NOISE] Then, we'll set

translate auto resizing

mass into constraints to know.

We're just going to keep this simple.

So the close button will just be the letter x.

We'll just set its title to the string, x.

Then we'll set its title label font to system font of size

twenty-four.

We'll set its title color to light-gray color.

Then add target self, with action close button pressed.

[SOUND] Finally, we'll add the button

as a subview of self dot view.

We want to position this button in the top right corner of our view.

So we'll create some auto layout that makes it 40 point square

with 10 points padding on the right, and 22 points padding above to account for

the status bar.

[SOUND].

Next we'll create our full-screen image view.

We'll create our instance, UI image view image view equals UI image view new.

Set it's content mode to fit.

Set translates auto resizing mask into constraints to no.

Set the image to our mabelFlip image.

[SOUND] Then, add it as

a subview of self.view.

[SOUND] Then, we'll setup imageView's constraints pinning it to the edges of its

super view, which is self.view.

Next we'll create that close button pressed method.

[SOUND] Inside it, we'll call self

dismiss view controller animated,

yes, with completion nill.

Now, lets launch the app, we can see our 150 by 150 point button,

containing our image.

If we tap it, we see our modal with the full screen image enclose button

in the tope right corner.

Tapping that close button dismisses our modal.

Great.

Of course we don't have any custom transitions yet.

We didn't specify anything for the modal presentation.

So it's defaulting to the slide up from bottom animation you're probably

familiar with.

Back in viewController.m, in our presentModal method, we're going to set

the modal presentation style on the controller to UIModalPresentationCustom.

If we click on UI modal presentation custom and bring up the quick help in

the utility sidebar in X code, we can see a quick description of this value.

If we tap on UIViewController class reference,

the documentation gives us a little more information.

It explains that we also need to set the transitioning

delegate on the view controller, and we have this

UI view controller transitioning delegate protocol to conform to.

So let's also set that transitioning delegate to self on the modal.

[SOUND] And up in our private

interface we'll add

the protocol UI view controller

transition delegate.

[SOUND] If we command on this protocol we can see that it contains several optional

methods.

We're going to grab two of these, the animationControllerForPresentedController

method and the

animationControllerForDismissedController method.

We'll copy these into our view controller's implementation, and

in both we'll return self.

What we're doing here is telling the modal that this view controller is going to be

its transitioning delegate.

That's step one.

Then we're also saying that when it wants an animation controller for

presenting or dismissing the modal Then this view controller will also be that.

You'll notice that we're getting warnings on the return self-line

of each of these delicate methods.

They're expecting the object to subscribe to another protocol,

UI View controller animated transitioning.

Which our view controller class isn't subscribed to yet.

So let’s add that to our private interface above.

Now if we command click into that protocol's implementation

we can see the methods it defines.

We have two required methods and one that is optional.

We'll just copy the two required ones into our view controller's implementation.

For transition duration we'll just return 0.5.

Animate transition is going to be where we define the custom transition itself first,

we're going to want to keep a reference to the current transition context,

so lets add that as a property in the private interface.

[SOUND] In animate transition, we'll set self dot transition context to

the transition context that gets passed into this method.

Now we're going to make use of this transition context object.

If we command click into the UI view controller context transitioning protocol,

we'll see many methods we can call on this transition context object.

We'll just be using this view for key method.

[SOUND] You'll notice this is IOS eight only.

If you need to support IOS seven, you'll want to instead use the similar view

controller for key methods, then access their views.

Back in the animate transition method, we'll use this method with two keys.

UI transitionContext From View key.

And UI transitionContext to view key.

So from view equals transitionContext view for

key UI transition context from view key, and

to view will equal transition context view for key UITransitionContextToViewKey.

We now have a reference to the UI view that presented the modal, and

the view that is being presented.

Our animation code is going to animate our modal view from the buttons frame

to full screen.

To help with this, we'll create two frame properties in our private interface.

ModalCollapsedframe [NOISE] and

modalExpandedframe.

We'll also create a property for our button,

which is what we'll use to create the collapsed frame.

[SOUND] In animate transition,

we'll set the modalCollapsedFrame to the buttons frame.

Then we'll set the modalExpandedFrame to transition context containerview.bounds.

This container view for the transitionContext is the view that acts as

the super view for the views involved in this transition next we need to

discuss an interesting aspect of these custom transitions.

If you're presenting, the to view is the modal and

the from view is the view that presented it.

If you're dismissing, they're the opposite.

To view Is the presenter, and from view is the modal.

It makes sense if you think about it, but

it means that we need to be able to check which is which.

Since we're setting our view controller as the animation controller for

both presented controller and dismissed controller,

this animate transition method gets called in both cases.

So let's create a BOOL property in our private interface, called isPresenting.

Now in present modal, let's set is presenting to yes,

right before present view controller.

Then set it back to no, in the completion block.

Now, back in our animate transition method,

we'll declare a UI view called modal view and a CG rect destination frame.

We'll set these in a minute.

Next, we'll create an if statement.

If self isPresenting, modalView will equal toView, and

destination frame will equal modal expanded frame.

Else, modal view will equal fromView, and destinationFrame,

will equal the modalCollapsedFrame.

Now, if we're presenting, there's something we’re expected to do, and

that's add the modal to the transition context container view.

[NOISE] We don't actually have

to ever remove this.

The animator will do that for us, but we do have to remember this when presenting.

Otherwise, no modalView will appear.

Also, if we're presenting, we want to first start the modal view

at the frame of the button so that it animates from that framed to full screen.

So, we'll set it's frame to the collapsed frame,

and then call layout if needed on the view.

Now, for the actual animation.

Let's create a new method.

[SOUND] We'll call it animate with modal view passing in a UI

view destination frame passing in the destination frame.

In this method, we'll create our animate with duration call and

I'm going to use the spring with damping variation with some values I like.

And you'll notice I'm using the transition duration method,

passing in our transition context property.

Although in our case, the method really doesn't do anything with it.

Inside the animation block, we'll set the views frame to our destination frame and

call layout if needed on it.

[SOUND] In the completion block, we'll call

complete transition on the transition context.

We'll pass in yes.

This call tells the transition context that we're done transitioning, so

at the bottom of our animate transition method

let's call this new animation method.

We'll call self animateWithModalView, modalView destinationFrame,

destinationFrame.

One final thing I forgot to do was set our button property,

self dot button, to the button we created.

I'll do that now.

[SOUND] So now, if we launch the app, we can see that tapping

the button gives us the desired modal animation and

tapping the close button animates us back to the button's frame.

Great.

You'll leave a notice that we didn't do anything special in the code to dismiss

the model.

We just called the standard dismiss modal view controller method.

The modal's transitioning delegate is simply called and it behaves a specified.

And since our modal's layout was done with auto layout

if you animate smoothly through the transition, positioning elements properly.

The image view is pinned to the edges of its superview, which at the beginning of

the transition are in the same position as the view controllers button frame.

As it animates up to full screen, the image view and

the close button on the top right position as expected.

Now, wouldn't it be cool if we could pinch to dismiss this modal?

And wouldn't it be cool if the animation would track our finger through

the gesture?

To do this we're going to create an interactor object.

We'll go to file, new file Then select coco touch class and we'll name it

interactor which will be a subclass of UI percent driven interactive transition.

This is the class Apple has provided for us to subclass and manage a transition

that we can actually control at every percentage step of the way.

Click Next, then create.

[NOISE] If we go to the files header and command-click on the super class,

we'll see a few properties and then three methods at the bottom.

Let's copy these into our files implementation.

[NOISE] So we have updateInteractiveTransition,

cancelInteractiveTransition and

finishInteractiveTransition now,

we're going to move all of our transitioning delegate and

animated transitioning protocol methods in our view

controller's implementation into this interacter's implementation.

We'll also move our animate with modal view method.

After we cut and paste, you'll see we need to bring over several properties too.

So we'll move these into our interacters interface.

We'll put the frames and the BOOLs in the public interface, and

the transition context in the private interface.

[NOISE] We don't actually

have a private interface

generated for us yet.

So we'll create one at the top of the dot M file.

We also need to bring over the protocol definitions.

We'll put these in the public interface.

[NOISE] In our view controller dot M file lets create an interacter property.

We'll first need to include its header,

then create the property.

[NOISE] In view did load,

we'll create the interactor.

Now, under presentModal,

we'll update the transitioning delegate on the modal, to self.interactor.

We also need to update our isPresenting bool,

since it's now a property on the interactor.

We still have en error in our interactor.m.

In animate transition we don't have access to the button property anymore, so

we'll need to remove this line.

[NOISE] We'll need to get this frame elsewhere.

Back in ViewController.m, in presentModal, we'll set the modalCollapsedFrame

on the interactor to the button's frame right before presentation.

[NOISE] Above this method,

I'm going to override view did layout subviews.

We'll first call super in it.

What we want to do is update the modal collapsed frame.

To the button frame, whenever the view may change.

So we'll check to make sure the interactor and button both exist, and

if so, we'll update this frame.

For our testing, this will get hit after the view rotates and

the button frame may be different than before.

Now if we run the app, we'll see that it’s working just as before.

Our refactor hasn't broken anything.

Good.

Let's go back to our interactor.h file and

Cmd+click on the UI view controller transitioning delegate protocol.

[NOISE] We want to copy the two interaction controller methods and

paste them into our interactor's implementation.

We'll return self in both of these.

You'll notice that again we have a protocol that our class needs

to subscribe to.

UIViewControllerInteractiveTransitioning.

If we Cmd+click into that,

we'll see that it has one methods start interactive transition.

We'll copy and paste that into our implementation since we have update,

cancel and finish interactive transition methods that we're overriding in

this class, we'll put it right above those.

There's one more thing we need to do with these interaction controller methods.

If we just returned self all the time we're essentially telling the custom

transition that we always want it to be an interactive transition.

We have to check to see whether we are doing a gesture based interactive

transition or the regular button press transition

which means we just want our standard custom animated transition to get called.

So we'll add a property to our public interface, a bool called isInteractive.

[SOUND] We'll set this to yes when we're

starting a gesture based transition.

Back in the implementation, we'll add a ternary operator, and

if we're interactive, return self, otherwise, return nil.

[SOUND] Next, let's flesh out

our interactive transition.

Under start interactive transition,

we'll save the transition context passed in, setting it to our property.

And we'll set the modal expanded frame to the transition context container view's

bounds.

Inside update interactive transition, we're going to write the code that

collapses the modal, based on percent complete.

This is where you're free to do something creative.

What we'll be doing is generating a frame that scales down from full screen

to the presenting buttons frame, just like the regular animated transition.

Percent complete will range from 0 to 1.

In a few moments,

we'll write a pinch gesture that passes its scale into this method.

We know that the pinch will start at a scale of one,

then reduce down toward zero as the fingers come together.

Whether your internal math here goes from zero to one or one to zero is up to you.

To keep things simple, we'll be passing in the pinch's scale,

expecting a transition from zero to one.

To keep things simple, we be passing in a pinch of scale,

expecting a transition of zero to one.

The first thing we'll do is get a delta or difference value for the origin x,

origin y, width, and height values of our expanded and collapsed frames.

We'll do this by subtracting the collapsed destination value

from the expanded starting value.

So for the x origin delta.

Will be self dot modal expanded frame dot original dot x minus self dot modal

dot collapsed

frame dot x.

[SOUND] The why origin delta will be the same.

The modal expanded y minus the collapsed y.

[SOUND] The x width

delta will be

the expanded

width minus

the collapsed width.

And the y height delta will be the expanded height minus the collapsed

height.

Next, we'll create a transition value for each of these four parameters,

by starting with the collapsed frames value, then adding the calculated delta

multiplied by our current percent complete.

In other words, we'll be trying to figure out

where should our modals frame be at this percent in the transition?

Starting with the collapsed frame's values,

we add on a percentage of the difference between the expanded and collapsed frames.

[NOISE] So the transition x will

be the modal collapsed frame origin x plus.

The delta for the x times percent complete.

And the transition y will be the same with the y value.

And again, the transition width and height will be

the collapsed values adding their delta multiplied by percent complete.

[SOUND] In copying and pasting,

be sure that your values are correct.

Next, we need to get a reference to our modal view from the transition context.

Since we're only doing the gesture on dismissal,

we know it's going to be the from view So we'll call

self.transitionContext viewForKey UI transition context from view key.

Next, we'll set the from views frame to our transition origin x and

origin y, transition width, and transition height values.

Now, under finish interactive transition and cancel interactive transition,

we're basically going to call our animate with modal view method we created,

either dismissing down to the button frame, or cancelling the dismissal, and

animating back to full screen.

In both methods, we'll copy and paste in the from view line from the update

interactive transition, where we get it from the transition context.

We now need to make a small update to our animate with modal view method.

When we call it from cancel interactive transition,

we don't want to call complete transition yes in the animation completion block.

We want to say no instead so let's add didComplete as a bool variable

that gets passed into the method.

Then when we call complete transition, we'll just pass in didComplete.

This means we'll need to update the method call at the end of animateTransition,

passing in yes for didComplete in this case.

Then in finishInteractiveTransition we'll call animateWithModalView,

passing in the collapsed frame for the destination frame and yes for didComplete.

And in cancelInteractiveTransition we'll call the same method to pass in

the expanded frame for the destination frame, and no for did complete.

There's an optional method under UI view controller animated transitioning

named animation ended.

We'll add this method to our interacter and use it to clean up a bit.

We'll set our isInteractive and

isPresenting BOOL

values to no whether or not

the transitionCompleted

value is yes or no.

This way, we're in a good default position for whatever the user may do next.

Now, we'll go to our custom modal view controllers implementation and

set up the pinch gesture along with some other details.

For the pinch gesture to talk to our interactor, we'll need to have a way for

them to communicate.

Let's create an init method that passes in an interactor object.

We'll first need to import our interactor header file.

Then we'll add a property for the interactor in our private interface.

Then we'll create our new init method,

setting our interactor property to the one passed in.

So we'll write, instance type,

init with interactor, interactor,

if self equals super init, return self.

And inside the if statement, our interactor property equals interactor.

We'll also going to expose this init method in the header.

[SOUND] And we'll need to declare

the interactor class in the header as well.

Now, back in the dot m file, at the end of our view did load method,

let's set up a UIPinchGestureRecognizer, targeting self with the action

set to user did pinch, and then add the gesture recognizer to self.view.

So we'll write UIPinchGestureRecognizer PinchRecognizer

equals UIPinchGestureRecognizer alloc initWithTarget self action

selector userDidPinch Then self.view addGestureRecognizer pinchRecognizer.

Next we'll create this userDidPinch method.

[SOUND] Inside the method, we'll stem

out our three basic states began,

changed, and ended or canceled.

Inside began, we'll tell our interactor instance that is interactive is yes,

and that is presenting is no.

Since we're only doing an interactive dismissal,

we know that we are not presenting here.

Next we call dismissed view controller,

just as you would with the normal modal dismissal.

Inside changed, we'll first check that

the recognizer scaled is less than or equal to one.

In other words, we only want pinches that get smaller,

not pinches that might be a zooming in gesture.

Then, we'll call update interactive transition passing in the recognizers

scale value.

So we'll write, if recognizer scale is less than or equal to 1,

call self.interactor, update interactive transition, passing in recognizer.scale.

In ended or canceled, we'll check if the recognizer scale is beyond a certain

arbitrary point, which we’ll set to be 0.5, or half way.

If it's less than that value,

we'll call finish interactive transition on our interactor.

Otherwise, we'll call cancel interactive transition.

So we'll write another ternary operator here to call one of these two methods.

So we'll write recognizer.scale less than 0.5, if so

self.interactor Finish interactor transition.

Otherwise, self.interactor cancel interactor transition.

If you remember, these methods inside the interactor

animate the modal to it's expanded or collapsed frame.

Finally, we'll need to go back to our viewcontroller.m file and

update the custom modal view controllers instantiation with our new method

that passes in the interactor.

Now, if we build and run, we'll get to try out our new pinch gesture based dismissal.

If we launch the modal, then pinch to dismiss, and

when we've released the pinch beyond halfway, it closes.

If we pinch and release before halfway, it bounces back to full screen, great!

One final thing to show is that if we start in portrait, launch the modal,

then rotate to landscape, then start our dismissal,

it gets the proper collapsed frame for its final position.

This is because of our frame update code in view controllers viewdid

layout subviews.

So even though the button's position has changed,

we still animate out to the proper frame.

Great, that's it for this workshop.

I hope you've acquired some useful tools to help you build you own,

cool view transitions.

Thanks for watching.