Cover Flow布局

Cover Flow布局

Cover Flow布局的实现，可参见教程：

• iOS UICollectionView: The Complete Guide
• mpospese/IntroducingCollectionViews

本文内容也是来源于此

实现过程

Cover Flow布局也是一种Flow布局，所以布局的类可直接继承自UICollectionViewFlowLayout

基本设置

1.设置scrollDirection为UICollectionViewScrollDirectionHorizontal，表示水平滚动
需要注意的是，垂直滚动和水平滚动，其行间距和item间距的不同：

2.设置minimumInteritemSpacing为一个合理的值，这样item就可以在一行显示，而不是多行显示

3.设置minimumLineSpacing为负值，这样item就叠加显示

自定义布局

自定义布局中最主要的是还是根据item的中心点距collection view中心的距离，进行3D变换

1.当某个item的中心距离visibleRect的中心点小于ACTIVE_DISTANCE(一个定义的常量)时，就需要进行3D变换，这是中间item的效果

a.只进行translate的效果

b.再添加上rotate后的效果

c.再添加上scale后的效果

2.对于距离visibleRect的中心点太大的item，主要添加2个变换

a.添加translate后的效果

b.再添加rotate后的效果

其主要代码如下：

- (void)setCellAttributes:(UICollectionViewLayoutAttributes *)attributes forVisibleRect:(CGRect)visibleRect
{
    // 对给定的布局attributes应用cover flow效果

    // 跳过supplementary views.
    if (attributes.representedElementKind) return;

    // 计算距离可见区域中心的距离
    CGFloat distanceFromVisibleRectToItem = CGRectGetMidX(visibleRect) - attributes.center.x;
    CGFloat normalizedDistance = distanceFromVisibleRectToItem / ACTIVE_DISTANCE;
    BOOL isLeft = distanceFromVisibleRectToItem > 0;
    CATransform3D transform = CATransform3DIdentity;


    if (fabsf(distanceFromVisibleRectToItem) < ACTIVE_DISTANCE)
    {

        transform = CATransform3DTranslate(CATransform3DIdentity, (isLeft? - FLOW_OFFSET : FLOW_OFFSET)*ABS(distanceFromVisibleRectToItem/TRANSLATE_DISTANCE), 0, (1 - fabsf(normalizedDistance)) * 40000 + (isLeft? 200 : 0));

        // 设置透视
        transform.m34 = -1/(4.6777 * self.itemSize.width);

        CGFloat zoom = 1 + ZOOM_FACTOR*(1 - ABS(normalizedDistance));
        transform = CATransform3DRotate(transform, (isLeft? 1 : -1) * fabsf(normalizedDistance) * 45 * M_PI / 180, 0, 1, 0);
        transform = CATransform3DScale(transform, zoom, zoom, 1);
        attributes.zIndex = 1;

    }
    else
    {
        transform.m34 = -1/(4.6777 * self.itemSize.width);
        transform = CATransform3DTranslate(transform, isLeft? -FLOW_OFFSET : FLOW_OFFSET, 0, 0);
        transform = CATransform3DRotate(transform, (isLeft? 1 : -1) * 45 * M_PI / 180, 0, 1, 0);
        attributes.zIndex = 0;

    }

    attributes.transform3D = transform;
}

还有一点就是，在滚动停止的时候，让某个item居中。
实现- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity方法即可

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    // 返回想要collection view停止的位置

    // 首先计算想要collection view停止的位置
    CGFloat offsetAdjustment = MAXFLOAT;
    CGFloat horizontalCenter = proposedContentOffset.x + (CGRectGetWidth(self.collectionView.bounds) / 2.0);
    // 使用center找到可视区域
    CGRect proposedRect = CGRectMake(proposedContentOffset.x, 0.0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);

    // 获取可视区域中cell的attribute
    NSArray* array = [self layoutAttributesForElementsInRect:proposedRect];

    // 遍历找到距离中心最近的cell
    for (UICollectionViewLayoutAttributes* layoutAttributes in array)
    {
        // 跳过supplementary views
        if (layoutAttributes.representedElementCategory != UICollectionElementCategoryCell)
            continue;

        // 找到最小值
        CGFloat itemHorizontalCenter = layoutAttributes.center.x;
        if (fabsf(itemHorizontalCenter - horizontalCenter) < fabsf(offsetAdjustment))
        {
            offsetAdjustment = itemHorizontalCenter - horizontalCenter;
        }
    }

    return CGPointMake(proposedContentOffset.x + offsetAdjustment, proposedContentOffset.y);
}

一些问题

1.item显示的时候锯齿化严重
在实例教程中，是通过设置光栅化来解决的，需要自定义布局属性类

2.collection view中的第一个item和最后一个item不能滚动到中间
可设置collection view的section inset来解决

3.响应点击事件
上面提到的教程中，也给出了方法