创建自定义集合视图布局

Question

我正在尝试创建一个如下图所示的集合视图。中心项目将始终具有“焦点”并且更大，这有点像封面流概念：

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

我可以使用 UICollectionViewFlowLayout 来实现这一点，但我希望底部单元格 (3) 的动画效果更大，而中间单元格 (2) 的动画效果更小？我假设我需要对滚动视图委托方法进行一些数学运算。

知道如何实现这一目标吗？

Answer 1

您可以仅通过子类化 UICollectionViewFlowLayout 来做到这一点。

步骤如下：

1. 创建 UICollectionViewFlowLayout 子类
2. 覆盖 shouldInvalidateLayoutForBoundsChange: 并返回 YES
3. 覆盖 layoutAttributesForElementsInRect: 和 layoutAttributesForItemAtIndexPath:。调用超级实现以获取标准 FlowLayout 值。
4. 创建一个方法，由步骤#3 中的两个方法调用，它会根据项目与集合视图中心的距离来更改项目的布局属性。使用数学为项目设置正确的 itemSize / transform / 3D 变换。

这是一个超级粗略的示例，它可以满足您的需求，但没有正确的数学运算。

@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