Expand/collapse UITableViewCell to achieve Evernote-like transition

Question

I'm interested in achieving a transition between view controllers very similar to the transition in Evernote's iOS app:

When "Places" is tapped, it smoothly expands into what looks like UINavigationController with a green border around it. To collapse it, I can either tap "Back" or swipe from the left side of the screen to gradually transition to the home screen.

I'm not looking for exact code samples to copy-paste, bur rather for high-level guidance on which concepts and Apple APIs to leverage. More specifically,

• Which transition/animation APIs does this likely use?
• How can I achieve the green border around the entire view controller once "Places" is expanded?

Answer 1

An approach to consider: you can use a UICollectionView with two different layouts. The unexpanded layout can just be a UICollectionViewFlowLayout and the expanded layout can be a subclass that shrinks/fades all the cells except the one you want expanded. Then you can use setCollectionViewLayout:animated: to switch between them.

The green border would just be the background of the parent view, since this wouldn't involve a UINavigationController.

And if you want the interactive swipe gesture for going back from the expanded layout, you hook up a UIScreenEdgePanGestureRecognizer to an interactive collection view layout animation (see startInteractiveTransitionToCollectionViewLayout:completion:).

Answer 2

Judging by that border around places in full screen I would say it's not a UINavigationController but rather two view controllers with custom transition between them.

This was introduced with iOS7 and you can find few tutorials online to implement any custom transitions:

http://www.objc.io/issue-12/custom-container-view-controller-transitions.html

https://developer.apple.com/library/IOs/documentation/UIKit/Reference/UIViewControllerTransitioningDelegate_protocol/index.html

Answer 3

I think it uses a custom transition for the zoom in effect. It can be achieved by using this 3rd party framework: https://github.com/mluisbrown/LCZoomTransition as a pattern since the destination view controller looks like a modal and not a destination view controller.