How do I recreate the rename animation in Pages with a UICollectionView?

Question

In Pages documents are listed as paper size rectangles with a title and date underneath. I've recreated this look with a UICollectionView.

When the user taps on the title to rename the document all other documents fade out and the one you tapped on transitions from its current location to the center and expands in size a bit as the keyboard slides out.

(I found this video that show what I'm talking about)

What's the best way to do this when using a UICollectionView?

Answer 1

You gotta subclass the UICollectionViewFlowLayout. Then when the needed action (to rename) is performed, you pass the indexPath of the cell that needs to be edited to the layout.

Then you can add the needed layout attributes, like this:

-(void)applyRenameAttributes:(UICollectionViewLayoutAttributes *)attributes
{
    if (self.renameIndexPath != nil) {
        if (attributes.indexPath == self.renameIndexPath) {
            // add attributes for the item that needs to be renamed
        } else {
            attributes.hidden = YES;
        }
    }
}
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *allAttributes = [super layoutAttributesForElementsInRect:rect];

    for (UICollectionViewLayoutAttributes *attributes in allAttributes) {
        [self applyRenameAttributes:attributes];
    }

    return allAttributes;
}
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attributes = [super layoutAttributesForItemAtIndexPath:indexPath];

    [self applyRenameAttributes:attributes];

    return attributes;
}

You also need to invalidate the layout when the renameIndexPath value is changed (do that in the setter). When renaming is finished (or cancelled), you change the renameIndexPath back to nil.