CODEWITHSUNDEEP
iosobjective-cnavigationuicollectionview
liquidpenguins
liquidpenguins

Reputation: 994

UICollectionView Stacking

How can I stack cells (in a UICollectionView) on top of each other? Feedly does it quiet well and I was wondering if I can somehow manipulate the zIndex property to get a similar effect in navigation of a UICollectionView.

Or am I wasting my time with UICollectionViews and should be looking into changing my approach with perhaps a Container View Controller?

Upvotes: 1

Views: 2104

Answers (3)

novalagung
novalagung

Reputation: 11512

You can use CHTCollectionViewWaterfallLayout to create pinterest-like-layout. It's created on top of UICollectionView.

Upvotes: 1

Sean Dunford
Sean Dunford

Reputation: 949

In order to accomplish this my team added a basic full page horizontal cover flow layout to a uicollectionview. We then added a pan gesture recognizer and disabled scrolling on the collectionView controller. As soon as the pan gesture starts we screen cap the cell and place the image over the collectionView. Once that is done we manually change the page of the collectionView to the next page behind the screenshot. We then animate the uiimage (the screen cap of the previous page) along the path of the gesture. If it goes past a threshold we commit the animation and remove the image and you get the full effect of a previewed collectionView cell.

Unfortunately the threshold checking is a bit tedious because you must revert. Also the animation for bringing a cell back is a little quirky. With this method if you don't add it as a special case then it looks the cell is always behind. Since we want it to look like a stack we made sure that it looks like you are pulling the previous cell from offscreen to the top of the stack. This is done by keeping a collection (NSArray) of cell screenshots that matches are data source so basically we can just grab the image based on indexPath.row. Do the pan gesture recognizer to bring it back on to the stack. If it passes the threshold we commit the animation and at the end change the current cell of the collection view and remove the screenshot. So it feels seamless.

Upvotes: 2

TeaCupApp
TeaCupApp

Reputation: 11452

There is really nice write up regarding this, jump onto this website and you will find everything you need.

http://skeuo.com/uicollectionview-custom-layout-tutorial

Basically what you are looking for is the CustomLayout.

Upvotes: 1

Related Questions