相同数据的不同视图之间过渡的概念

Question

I have data in a grid and as soon as the user touches an item the layout should change and the items animate to the new layout.

I am currently using the UICollectionViewFlowLayout for the grid. Naturally I could just add new views for the strip at the bottom and the detail view at the top, but I want to animate the items from the grid to the strip.

Can I elegantly achieve this behaviour using UICollectionViewFlowLayout or do I have to create a custom Layout and custom transitions for this (Which is what I would like to avoid).

Answer 1

The most durable way to do this would be to subclass UICollectionViewLayout for the second layout. However, you may be able to do this without subclassing, although it probably will seem more complicated.

The idea is to copy out the contents of the green cell and animate them into place above the collection view - not a cell in the collection view. You'd get the frame of the starting point of the animation using [collectionView layoutAttributesForItemAtIndexPath:selectedIndexPath].frame and adjust for the content offset of the collection view. Of course, you'd then have to delete the green cell from the collection view using [collectionView deleteItemsAtIndexPaths:@[selectedIndexPath]] .

In the meantime, create another instance of UICollectionViewFlowLayout . This instance would have scrollDirection set to horizontal. In your UICollectionViewDelegateFlowLayout methods, set the inset for the section to the area you want to display the cells in - ie, a very large value for top .(You wouldn't have to set the collection view frame.) You would then transition to this layout.

I think you'll find that subclassing UICollectionViewLayout is going to be more straightforward and encapsulated. If you want to recreate this presentation in another context, for instance, it would be much easier to do so with a subclassed layout.