Custom Side Menu With Transitioning Delegate Part 1
Before getting start coding, Let overview the mechanism of transitioning delegate.
The green view (Presenting View) represents a view is about to be presenting by a blue view. The blue view (Presented View) is the destination view. To make it simple, The green view is “from” and the blue view is “to”.
There are 3 objects come into play during transition which are Animator, Interactive Animator and Presentation Controller.
I split the topic into 3 parts
- Part 1 : We are going to implement Animator step by step.
- Part 2 : Presentation Controller
- Part 3 : Interactive Animator
Lets talk about Animator first, what is it and what i t does. Animator is an object who take in charge of managing transition.
During transition, There will be an additional view called “containerView” which manage the transition between two view inside itself. Transitioning Context is an object inside Animator which able to control time and manipulate the animation of present and dismiss.
Long story is ended. Lets take some look files structure before coding.
Let begin with Animator first.
function transitionDuration provides the animation duration to perform. I will keep fromViewController for later used.
Next we add animation coding block inside the BHMenuTransitionAnimator class
Well, just check whether the transition is Presenting or Dismiss transition by comparing context’s fromViewController and the reference viewController we passed at the beginning and then we can perform an appropriate animation.
Well the code has explained itself. I think it is not hard for you guy to figure it out what it does.
Remember, Do not forget to put in transitionContext.completeTransition when finish animation
Now, We have finished implementing the Animator. Next we going to create an wrapper class for Animator. The BHMenuTransitionManager class will handle three object’s task which are Animator, Presentation Controller and Interactive Controller
Next, Make BHMenuTransitionManager class conform to UIViewControllerTransitioningDelegate to override the animation by our Animator. Leave interactionControllerForDismissal and presentationController with returning nil. They will be shown in Part 2 and Part 3 respectively.
Next, Create ViewControllers which look like the image below. I named white view as FirstViewController and Blue view as MenuViewController.
Drag the segue to MenuViewController navigation and set its property like below picture. Here is the attributes of the segue.
Next, Create FristViewController. Remember to set modalPresentationStyle = .custom because we are going to overirde the default animation.
And finally for MenuViewController
Build and run to see the result. There is no shadow yet or dimmed view. There will be part 2 how to implement it
Lets talk in detail what really happen under the hood during transition.
View hierarchy before animation happen. There is no Container View showing yet.
The black view represents a Window. Well Pretty familiar when debugging view. Noting special here.
View hierarchy after complete animation.
The Container View now come to play with class name UITransitionView
I fill the Container View with brown colour to distinguish between views
I will finish Part 1 right here and continue on how to add dimmed view or shadow view at Presentation ViewController implementation in part 2.
I hope you guys understand the concept of transition delegate.
