Custom Transitions in iOS 7 - Cocoaheads Berlin Talk

Presented on 16.10.2013 in Cocoaheads Berlin

Transcript

1. Custom Transitions in iOS 7 by Engin Kurutepe Cocoaheads Berlin - 16. Oct 2013
2. Who? • Engin Kurutepe – @ekurutepe • iOS Team Lead at Txtr – www.txtr.com • Co-author of Developing an iOS 7 Edge http://bleedingedgepress.com/our-books/ developing-an-ios-7-edge/
3. Roadmap • Which transitions can be customized? • Anatomy of a custom transition • A simple example • An interactive example
4. What can be customized? • Demo Time!
5. Anatomy A lot of protocols: • UIViewControllerTransitioningDelegate • UIViewControllerInteractiveTransitioning • UIViewControllerAnimatedTransitioning • UIViewControllerTransitionCoordinator • UIViewControllerContextTransitioning • UIViewControllerTransitionCoordinatorContext
7. Tap!
8. Tap!
9. UIKit
10. UIKit -transitioningDelegate
11. UIKit TransitioningDelegate
12. UIKit TransitioningDelegate animationControllerForPresentedController: presentingController: sourceController:
13. UIKit TransitioningDelegate AnimationController
14. UIKit TransitioningDelegate AnimationController interactionControllerForPresentation:
15. UIKit TransitioningDelegate InteractionController AnimationController
16. UIKit TransitioningDelegate InteractionController AnimationController TransitioningContext
17. UIKit TransitioningDelegate InteractionController AnimationController TransitioningContext
18. in Practice… • Assign the transitioning delegate: • Full source code on Github: https://github.com/iosedgeapp/iOSEdge - (IBAction) presentTapped:(UIButton*)sender { BEPSimpleImageViewController* ivc = [[BEPSimpleImageViewController alloc] init]; ivc.image = [UIImage imageNamed:@"Canyon.jpg"]; ivc.modalPresentationStyle = UIModalPresentationCustom; ivc.transitioningDelegate = self; [self presentViewController:ivc animated:YES completion:nil]; }
19. in Practice (cont’d) • Transitioning delegate vends an animator: - (id<UIVCAnimatedTransitioning>) animationControllerForPresentedController:(UIVC*)modal presentingController:(UIVC*)parent sourceController:(UIVC*)source { return [[BEPModalTransitionAnimator alloc] initWithDirection:BEPModelTransitionDirectionPresent]; }
20. in Practice (cont’d) • Transitioning delegate does not vend an interaction controller // Not implemented: //- (id<UIViewControllerInteractiveTransitioning>) interactionControllerForPresentation: (id<UIViewControllerAnimatedTransitioning>)animator
21. in Practice (cont’d) • The animator sets the duration for the transition - (NSTimeInterval) transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext { return 0.75; }
22. in Practice (cont’d) • The animator performs the animations - (void) animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext { UIView* inView = [transitionContext containerView]; UIVC* fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; UIView* fromView = [fromVC view]; UIVC* toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIView* toView = [toVC view]; if (self.direction == BEPModelTransitionDirectionPresent) { [self performPresentationAnimations]; } else { [self performDismissalAnimations]; } }
23. in Practice (cont’d) • The animator inserts the presented view • The animator MUST inform the context when transition is finished [inView insertSubview:toView aboveSubview:fromView]; [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0 usingSpringWithDamping:DampingConstant initialSpringVelocity:InitialVelocity options:0 animations:^{ toView.alpha = 1.0; toView.frame = finalRect; toView.transform = CGAffineTransformIdentity; } completion:^(BOOL finished) { [transitionContext completeTransition:YES]; }];
24. How about interaction? • Demo Time!
25. How about interaction? • Transitioning Delegate must vend an interaction controller • Apple provides the UIPercentDrivenInteractiveTransition class • Can drive UIView block-based animations
26. in Practice… • Transitioning Delegate vends an interaction controller: - (id <UIVCInteractiveTransitioning>) navigationController:(UINavigationController*)nc interactionControllerForAnimationController:(id<UIVCAnimatedTransitioning>)animator { if (animator == _popper && _popper.interactive) { return _popper; } else { return nil; } }
27. in Practice (cont’d) • Previously during viewDidAppear… • but not interactive, no? self.popper = [[BEPNavigationTransitionsPopAnimator alloc] initWithNavigationController:self]; _popper.interactive = NO;
28. in Practice (cont’d) • Previously during viewDidAppear… • but not interactive, no? self.popper = [[BEPNavigationTransitionsPopAnimator alloc] initWithNavigationController:self]; _popper.interactive = NO; - (instancetype) initWithNavigationController:(UINavigationController*)nc { if (self = [super init]) { self.parent = nc; UIPinchGestureRecognizer* pgr = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinch:)]; [self.parent.view addGestureRecognizer:pgr]; } return self; }
29. in Practice (cont’d) • but still not interactive?
30. in Practice (cont’d) • but still not interactive? - (void) handlePinch:(UIPinchGestureRecognizer*)gr { CGFloat scale = [gr scale]; switch ([gr state]) { case UIGestureRecognizerStateBegan: self.interactive = YES; _startScale = scale; [self.parent popViewControllerAnimated:YES]; break;
31. in Practice (cont’d) • Popper driving the animation:
32. in Practice (cont’d) • Popper driving the animation: case UIGestureRecognizerStateChanged: { CGFloat percent = (1.0 - scale/_startScale); [self updateInteractiveTransition:MAX(percent,0.0)]; break; } case UIGestureRecognizerStateEnded: case UIGestureRecognizerStateCancelled: if ([gr velocity] >= 0.0 || [gr state] == UIGestureRecognizerStateCancelled) { [self cancelInteractiveTransition]; } else { [self finishInteractiveTransition]; } self.interactive = NO; break; default: break; } }
33. Re-cap • Custom transitions very powerful • Complex set of protocols • But in practice, it’s not that hard… • Source code for the examples available: https://github.com/iosedgeapp/iOSEdge
34. Further Reading • WWDC 2013 Session 218 • objc.io article by Chris Eidhof http://www.objc.io/issue-5/view-controller- transitions.html • Developing an iOS 7 Edge (40% off for Cocoaheads): https://gumroad.com/ products/yLKx/cocoaheads