CollectionView自定义布局

平时我们经常看见的相册，卡片式的堆叠效果，瀑布流，单元格移动等，这些都需要用到自定义布局，当然他们是可以滑动的。首先我们想到的是 UIScrollView 那内容如果特别多的话就会影响到性能问题，如果自己写循环利用的话就会特别麻烦，所以们就会用到 UICollectionView，系统自带的只有流布局，如果想要特别好看的效果，我们就必须使用自定义布局。

我们先来看下效果：

线性布局

要写线性布局，我们需要先分析下思路，水平滚动我们可以使用 self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
然后我们怎么让cell的大小随着滑动变化呢？

核心就是用cell的中心点减去collectionView最中心点，然后再根据间距的多少来缩放cell

自定义布局需要继承自 UICollectionViewFlowLayout ,然后我们需要实现四个方法

• 用来做布局的初始化操作

- (void)prepareLayout

• 返回的数组里面存放着rect范围内所有元素的布局属性
• 这个方法的返回值决定了rect范围内所有元素的排布（frame）
• 一个cell对应一个UICollectionViewLayoutAttributes对象

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

• 这个方法的返回值，就决定了collectionView停止滚动时的偏移量

-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity

• 当collectionView的显示范围发生改变的时候，是否需要重新刷新布局
• 一旦重新刷新布局，就会重新调用 layoutAttributesForElementsInRect:方法

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

- (void)prepareLayout
{
    [super prepareLayout];
    // 水平滚动
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 设置内边距
    CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
    self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}


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

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {

    //取出父类算出的布局属性
    NSArray *attsArray = [super layoutAttributesForElementsInRect:rect];

    //collectionView中心点的值
    CGFloat centerX = self.collectionView.frame.size.width / 2 + self.collectionView.contentOffset.x;

    //一个个取出来进行更改
    for (UICollectionViewLayoutAttributes *atts in attsArray) {
        // cell的中心点x 和 collectionView最中心点的x值 的间距
        CGFloat space = ABS(atts.center.x - centerX);
        CGFloat scale = 1 - space/self.collectionView.frame.size.width;
        atts.transform = CGAffineTransformMakeScale(scale, scale);
    
    }
    return attsArray;
}


-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {

    // 计算出最终显示的矩形框
    CGRect rect;
    rect.origin.y = 0;
    rect.origin.x = proposedContentOffset.x;//最终要停下来的X
    rect.size = self.collectionView.frame.size;

    //获得计算好的属性
    NSArray *attsArray = [super layoutAttributesForElementsInRect:rect];
    //计算collection中心点X
    CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width / 2;

    CGFloat minSpace = MAXFLOAT;
    for (UICollectionViewLayoutAttributes *attrs in attsArray) {
    
        if (ABS(minSpace) > ABS(attrs.center.x - centerX)) {
            minSpace = attrs.center.x - centerX;
        }
    }
    // 修改原有的偏移量
    proposedContentOffset.x += minSpace;
    return proposedContentOffset;

}

圆形布局

不是线性，我们就不能继承 UICollectionViewFlowLayout了，我们需要继承 UICollectionViewLayout

核心就是用圆，collectionView 的中心就是圆心，然后每一个cell的中心跟圆心的距离就是半径，根据一共有多少cell 算出每一个cell间的角度，根据角度我们就可以算出cell的centerX 跟 centerY，有了cell的中点就可以确定位置了

-(void)prepareLayout {

    [super prepareLayout];

    [self.attrsArray removeAllObjects];
    //因为是一次性就显示在view上，所以可以一次性初始化
    //collection一共有多少item
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i=0; i<count; i++) {
        //自己写布局属性
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
        [self.attrsArray addObject:attrs];
    }
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.attrsArray;
}

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

    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    CGFloat radius = 120;

    //圆心
    CGFloat circleX = self.collectionView.frame.size.width / 2;
    CGFloat circleY = self.collectionView.frame.size.height / 2;

    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.size = CGSizeMake(60, 60);
    //如果还剩下一个cell
    if (count == 1) {
        attrs.center = CGPointMake(circleX, circleY);
        attrs.size = CGSizeMake(150, 150);
    }else {
        CGFloat angle = (2 * M_PI / count) * indexPath.item;//每一个cell的角度
        CGFloat centerX = circleX + radius * sin(angle);
        CGFloat centerY = circleY + radius * cos(angle);
        attrs.center = CGPointMake(centerX, centerY);
    }

    return attrs;
}

自定义布局是个很强大的东东，想算成什么样就有什么样的效果

最后效果代码在Github上的地址