iOS UI - App Store Explore section Transition

Question

I was wondering if this nice master-detail transition where you click on the tableView cell and it expand to disclose the detail , with the cell's label being the navigation bar title is an interface which is part of the SDK object library or it is a customised one?

Answer 1

I've tried few things but so far this is the best option I could think of. Animating the frames of all the visible cells and making use of childViewController is how I achieved it.

Animation test project

https://github.com/armaluca/iOS-App-Store-Explore-Section-Animation

Would be nice to know any other possible solution and ultimately to know how Apple did it!

Answer 2

It is custom implementation.There is no API in UIKit/UITableView which implements this behaviour. Only animation to present a cell is there(which I think is used here).

This behaviour can be implemented like-

Add sections(News, Productivity, etc) in table with zero cells(numberOfRowsInSection: = 0 for all sections). Then on tapping any section just reload that section(reloadSections:withRowAnimation:) by adding a cell to it(numberOfRowsInSection: = 1) and animation(maybe UITableViewRowAnimationMiddle). Scroll that section/row to top in same animation loop(UI update cycle).

Answer 3

This is a custom transition between ViewControllers. There's a nice example of a few transitions (including this one) in this library.

Of course you'll need to add the tableview etc' but this is a great place to start.