创建自定义集合视图布局

Question

I am attempting to create a collection view that looks like the schematic below. The centre item will always have 'focus' and be larger, its quite a bit like the cover flow concept:

http://s13.postimg.org/n6vzil213/layout_schematic.png

I can achieve this with a UICollectionViewFlowLayout, but I want the bottom cell (3) to animate larger and the middle cell (2) to animate smaller as I scroll? I assume I need to do some math with the scroll view delegate methods.

Any idea on how to achieve this?

Answer 1

You can do this with only subclassing UICollectionViewFlowLayout.

Here are the steps:

1. Create a UICollectionViewFlowLayout subclass
2. Override shouldInvalidateLayoutForBoundsChange: and return YES
3. Override layoutAttributesForElementsInRect: and layoutAttributesForItemAtIndexPath:. Call the super implementation to get the standard FlowLayout values.
4. Create a method that both the methods from step #3 call that looks changes the layout attributes of the items based on their distance away from the center of the collection view's center. Use math to set the correct itemSize / transform / 3D transform for the items.

Here's a super rough example that sort of does what you're looking for, without the correct math.

@implementation MMLayout

-(CGSize)itemSize
{
    return CGSizeMake(200.0f, 200.0f);
}

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

    for (UICollectionViewLayoutAttributes *atts in attributes) {
        [self scaleForPositionOfAttributes:atts];
    }

    return attributes;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
{
    UICollectionViewLayoutAttributes *atts = [super layoutAttributesForItemAtIndexPath:indexPath];

    [self scaleForPositionOfAttributes:atts];

    return atts;
}

- (void)scaleForPositionOfAttributes:(UICollectionViewLayoutAttributes *)attributes
{
    CGFloat collectionViewHeight = CGRectGetHeight(self.collectionView.bounds);
    CGFloat collectionViewCenter = collectionViewHeight / 2.0f;

    CGFloat scaleForCenter = ABS(collectionViewCenter - (attributes.frame.origin.y - self.collectionView.contentOffset.y)) < 50.0f ? 1.3f : 0.7f;
    attributes.size = CGSizeMake(200.0f * scaleForCenter, 200.0f * scaleForCenter);
}

@end