#uicollectionviewlayout

For a recent project I needed to refactor a primary view within our iPad app, so I decided to learn the ins and outs of UICollectionView (introduced in iOS 6) and I thought it would make for a good tutorial to share.

I played around with UICollectionView for a new app these days and thought this little FlowLayout subclass might help others too.

It's a UICollectionViewFlowLayout subclass which can switch from a stacked state to the default grid, like the iPad photo app does.

You might have to adjust it for your own purposes, but it should give you a good idea about how to build some cool stuff with the existing flow layout.

Here is the content of the header file:

#import <UIKit/UIKit.h> @interface StackLayout : UICollectionViewFlowLayout // the point to which the stack collapses @property (nonatomic) CGPoint stackCenter; // 0.0 means completely stacked, 1.0 results in the default FlowLayout // Values bigger than 1.0 will spread the layout even more  @property (nonatomic) CGFloat stackFactor; @end

And the implementation:

#import "StackLayout.h" @implementation StackLayout // Custom setter for redrawing the layout - (void)setStackFactor:(CGFloat)stackFactor { _stackFactor = stackFactor; [self invalidateLayout]; }

- (void)setStackCenter:(CGPoint)stackCenter { _stackCenter = stackCenter; [self invalidateLayout];

}

// Animation of cells only works WITHIN the bounds of the contentView. // Enlarge the contentView to the size of the collectionView if needed -(CGSize)collectionViewContentSize { CGSize contentSize = [super collectionViewContentSize]; if (self.collectionView.bounds.size.width > contentSize.width) contentSize.width = self.collectionView.bounds.size.width; if (self.collectionView.bounds.size.height > contentSize.height) contentSize.height = self.collectionView.bounds.size.height; return contentSize; } -(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect { NSArray* attributesArray = [super layoutAttributesForElementsInRect:rect]; // Calculate the new position of each cell based on stackFactor and stackCenter for (UICollectionViewLayoutAttributes *attributes in attributesArray) { CGFloat xPosition = self.stackCenter.x + (attributes.center.x - self.stackCenter.x) * self.stackFactor; CGFloat yPosition = self.stackCenter.y + (attributes.center.y - self.stackCenter.y) * self.stackFactor; attributes.center = CGPointMake(xPosition, yPosition); if (attributes.indexPath.row == 0) { attributes.alpha = 1.0; attributes.zIndex = 1.0; // Put the first cell on top of the stack

} else { attributes.alpha = self.stackFactor; // fade the other cells out attributes.zIndex = 0.0; //Other cells below the first one } } return attributesArray; } @end

If you create an UICollectionView with stackFactor = 0.0 you will get a stack with only the top cell visible. Call something like that later to get a nice animation to the full grid layout:

[myCollectionView performBatchUpdates:^{ myCollectionView.collectionViewLayout.stackFactor = 1.0; } completion:nil];

You could also use an UIPinchGestureRecognizer to adjust the stackFactor property.

Here is a little preview showing different states of the animation:

If you want to archive something like the iPad photo app,  you will need another UICollectionView to display the single albums. Once the user selects an album, show the stacked Photos at the position of the album and animate the photos in.