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

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.

Answer 2

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:).