IOS 7 CollectionViewFlowLayout 3D Translation (like new Safari Tabviewer)

Question

My Problem

I want to implement a CollectionView with the CollectionViewFlowLayout that looks like Safari Pageviewer (see screenshot)

Since Apple was quoting stuff like "z-index" and "Transformations" are easy to implement. After several days of following tutorials and research I was not able to make it.

I followed some normal CollectionViewFlowLayout and made it to subclass CollectionView FlowLayout. Now I tried the

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect

the

-(void)modifyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes

and the

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

in my attempts to give the cells a 3D Transform.

But layoutAttributesForItemAtIndex is never been called (found some explanations for that but I did not really understand it)

And trying the other Methods did also not work (there was no 3D Transformation visible on the cells.)

Here are my attempts so you can see what I tried:

//this one has never been called

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{

    UICollectionViewLayoutAttributes *attributes =
    [super layoutAttributesForItemAtIndexPath:indexPath];


    [attributes setTransform3D:CATransform3DMakeTranslation(10.0, 20.0, 10.0)];
    attributes.transform3D = CATransform3DMakeScale(1.0, 2.0, 1.0);


    return attributes;
}

// this one was called but Transformation did not work as desired.

 -(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
    {

        NSArray *allAttributesInRect = [super
                                        layoutAttributesForElementsInRect:rect];

        for (UICollectionViewLayoutAttributes *cellAttributes in allAttributesInRect)
        {
            cellAttributes.size=CGSizeMake(300, 300);
            cellAttributes.transform3D = CATransform3DMakeScale(1.0, 2.0, 1.0);
            cellAttributes.transform3D = CATransform3DMakeTranslation(1, 200, 100);


               [self modifyLayoutAttributes:cellAttributes];
        }
        return allAttributesInRect;
    }

//this also did not work

-(void)modifyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes
{
    if ([layoutAttributes.indexPath isEqual:_currentCellPath])
    {

         Assign the new layout attributes
        layoutAttributes.size = CGSizeMake(300, 300);
        layoutAttributes.transform3D = CATransform3DMakeScale(_currentCellScale, _currentCellScale, 1.0);
        layoutAttributes.center = _currentCellCenter;
    }
}

Here is my question:

Does somebody have any Idea how to implement this "Coverflow"-like CollectionView and can help me?

Am I using the Methods of CollectionViewFlowLayout in a wrong way or am I using CATransform3D in a wrong way?

thanks

Answer 1

The GitHub projects WKPagesCollectionView and NFSafariTabs show how this can be achieved.

    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

    // rotation
    CGFloat angleOfRotation = -61.0;
    CATransform3D rotation = CATransform3DMakeRotation((M_PI*angleOfRotation/180.0f), 1.0, 0.0, 0.0);

    // perspective
    CGFloat depth = 300.0;
    CATransform3D translateDown = CATransform3DMakeTranslation(0.0, 0.0, -depth);
    CATransform3D translateUp = CATransform3DMakeTranslation(0.0, 0.0, depth);
    CATransform3D scale = CATransform3DIdentity;
    scale.m34 = -1.0f/1500.0;
    CATransform3D perspective =  CATransform3DConcat(CATransform3DConcat(translateDown, scale), translateUp);

    // final transform
    CATransform3D transform = CATransform3DConcat(rotation, perspective);

Answer 2

This may not completely answer your question, but this question tells you how to perspectively rotate views. After experimenting with the code, I changed m34 to m24, and the -500 to just 500.

The final code looked something like this:

CALayer *layer = myView.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m24 = 1.0 / 500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

Hope this helps!