Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom Interactive Presentation Transition

I am attempting to create a custom view controller container, which will display a drawer at the bottom of the screen, like the Apple mail or music apps, and I want the user to either be able to tap on it to transition it to fullscreen, or slide it up interactively to reveal the content.

enter image description here

I have the drawer working, using a UIPanGestureRecognizer to slide it. I can implement this by adding the content controller as a child controller, the content view to the hierarchy and call viewWillAppear: and viewDidAppear: when appropriate.

But I wish to allow the content view controller to animate alongside the swipe (e.g. any animations in viewWillAppear:, like with interactive pop), thus I am looking at custom modal presentation and UIPercentDrivenInteractiveTransition, but I am hitting a wall, and I can't see why this is happening. I have setup a transitioning delegate, returning a custom animation controllers and an interaction controller which is a UIPercentDrivenInteractiveTransition object.

My drawer is part of the container controller's view hierarchy, and naturally I want the content controller's view to be a subview of the drawer. But when calling presentViewController:animated:completion:, a new UITransitionViewsubview is added to the UIWindow, supposedly for where the transition animation should occur. But this kills my UIPanGestureRecognizer and the user cannot perform the swipe to open the drawer.

I tried creating a custom UIPresentationController and other ways to control where in the hierarchy this containerView should be, but I am unable to change the behavior.

Is what I am attempting to do the correct way? What have I missed?


If anyone is interested, here is my framework: LNPopupController

like image 541
Léo Natan Avatar asked Jul 18 '15 21:07

Léo Natan


People also ask

What is a UIViewController?

The UIViewController class defines the shared behavior that's common to all view controllers. You rarely create instances of the UIViewController class directly. Instead, you subclass UIViewController and add the methods and properties needed to manage the view controller's view hierarchy.

What is a navigation controller?

NavController manages app navigation within a NavHost . Apps will generally obtain a controller directly from a host, or by using one of the utility methods on the Navigation class rather than create a controller directly. Navigation flows and destinations are determined by the navigation graph owned by the controller.


2 Answers

Update 2015.11.19

A demo project as well

Obj-C -> https://github.com/saiday/DraggableViewControllerDemo

Swift 2.x -> https://github.com/ostatnicky/DraggableViewController

Swift 4.x -> https://github.com/satishVekariya/DraggableViewController

Thanks @avdyushin mentioned my blog post.

And yes, my post Draggable view controller? Interactive view controller! is a tutorial just about your topic.

Quoted from my blog post:

How to do it

Design philosophy

There is no two UIViewController in together, instead there's only one UIViewController at a time. When user begin drag on certain subview, present another view controller with custom UIViewControllerAnimatedTransitioning by custom UIPercentDrivenInteractiveTransition protocol.

Technical things

These two protocols is the foundation of customize interactive UIViewController transitions. In case you don't know yet, take a glance before starting.
1. UIViewControllerAnimatedTransitioning protocol
2. UIPercentDrivenInteractiveTransition protocol

like image 199
saiday Avatar answered Oct 12 '22 16:10

saiday


An updated answer for iOS 10: this is now trivial using UIViewPropertyAnimator.

UIViewPropertyAnimator is a continuation of the block-based animation concept, taken to its logical continuation - an object oriented wrapper around animations. This allows for much more control, such as controlling the completion of the animation using fractionComplete - precisely what was needed here.

like image 32
Léo Natan Avatar answered Oct 12 '22 15:10

Léo Natan