Collectionview自定义布局

我们平时经常见到一些很酷的滚动效果，卡片式的堆叠效果、瀑布流、单元格移动等，这些炫酷的效果我们可以通过collectionview自定义布局来实现。

继承UICollectionViewLayout

我们自定义layout，需要继承UICollectionViewLayout，有一些核心方法需要我们来实现，这些核心方法可以帮助我们来完成布局任务。

1. prepareLayout方法，为布局计算做一些准备工作；
2. collectionViewContentSize方法，返回内容区域的size;
3. layoutAttributesForElementsInRect:方法，返回矩形区域内cells或者views的属性；

说明图片：

示例代码

创建自定义布局类
collectionViewLayout.h 文件

interface collectionViewLayout : UICollectionViewLayoutproperty (nonatomic) CGSize itemSize;@property (nonatomic) NSInteger visibleCount;@property (nonatomic) UICollectionViewScrollDirection scrollDirection;@end

collectionViewLayout.m 文件

#import "collectionViewLayout.h"#define INTERSPACEPARAM  0.65@interface collectionViewLayout (){    CGFloat _viewHeight;    CGFloat _itemHeight;}@end

//为自定义布局做准备工作，确定滚动区域大小-(void)prepareLayout {    [super prepareLayout];    if (self.visibleCount < 1) {        self.visibleCount = 5;    }    _viewHeight = CGRectGetWidth(self.collectionView.frame);    _itemHeight = self.itemSize.width;    self.collectionView.contentInset = UIEdgeInsetsMake(0, (_viewHeight - _itemHeight) / 2, 0, (_viewHeight - _itemHeight) / 2);    self.collectionView.showsHorizontalScrollIndicator = NO;    self.collectionView.showsVerticalScrollIndicator = NO;}

//处理现实区域布局属性-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {    NSInteger cellCount = [self.collectionView numberOfItemsInSection:0];    CGFloat centerY = self.collectionView.contentOffset.x + _viewHeight / 2;    NSInteger index = centerY / _itemHeight;    NSInteger count = (self.visibleCount - 1) / 2;    NSInteger minIndex = MAX(0, (index - count));    NSInteger maxIndex = MIN((cellCount - 1), (index + count));    NSMutableArray *array = [NSMutableArray array];    for (NSInteger i = minIndex; i <= maxIndex; i++) {        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];        [array addObject:attributes];    }    return array;}

//此方法可以立即获取某一布局属性- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];    attributes.size = self.itemSize;    CGFloat cY = self.collectionView.contentOffset.x + _viewHeight / 2;    CGFloat attributesY = _itemHeight * indexPath.row + _itemHeight / 2;    attributes.zIndex = -ABS(attributesY - cY);    CGFloat delta = cY - attributesY;    CGFloat ratio =  - delta / (_itemHeight * 2);    CGFloat scale = 1 - ABS(delta) / (_itemHeight * 6.0) * cos(ratio * M_PI_4);    attributes.transform = CGAffineTransformMakeScale(scale, scale);    CGFloat centerY = attributesY;    centerY = cY + sin(ratio * M_PI_2) * _itemHeight * INTERSPACEPARAM;    attributes.center = CGPointMake(centerY, CGRectGetHeight(self.collectionView.frame) / 2);    return attributes;}

//这个方法的返回值，就决定了collectionView停止滚动时的偏移量- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {    CGFloat index = roundf((proposedContentOffset.x + _viewHeight / 2 - _itemHeight / 2) / _itemHeight);    proposedContentOffset.x = _itemHeight * index + _itemHeight / 2 - _viewHeight / 2;    return proposedContentOffset;}

//这个方法的返回值，决定了当collectionview的显示范围发生改变的时候，是否需要刷新布局- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {    return !CGRectEqualToRect(newBounds, self.collectionView.bounds);}

使用自定义布局
ViewController.m

#import "CollectionCell.h"#import "collectionViewLayout.h"@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>@property (strong, nonatomic) IBOutlet UICollectionView *collectionView;@property (strong, nonatomic) NSArray * imageArray;@end

- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    _imageArray = @[@"p4.jpg",@"p0.jpg",@"p1.jpg",@"p2.jpg",@"p3.jpg",@"p4.jpg",@"p0.jpg",@"p1.jpg"];    collectionViewLayout * layout = [[collectionViewLayout alloc] init];    layout.itemSize = CGSizeMake(250, 160);    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;    _collectionView.frame = CGRectMake(0, 100, self.view.frame.size.width, layout.itemSize.height);    _collectionView.backgroundColor = [UIColor grayColor];    [self.collectionView setCollectionViewLayout:layout animated:YES];    _collectionView.delegate = self;    _collectionView.dataSource = self;}-(void)viewDidAppear:(BOOL)animated{    [super viewDidAppear:animated];    //使collectionview默认滑动到第二张图片位置    _collectionView.contentOffset = CGPointMake(250, 0);}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    return _imageArray.count;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {    CollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionCell" forIndexPath:indexPath];    cell.imageView.image = [UIImage imageNamed:_imageArray[indexPath.row]];    return cell;}- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {    NSIndexPath *curIndexPath = [self curIndexPath];    if (indexPath.row == curIndexPath.row) {        return YES;    }    NSLog(@"current row %ld",(long)indexPath.row);    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:YES];    return NO;}//获取当前点击的IndexPath- (NSIndexPath *)curIndexPath {    NSArray *indexPaths = [self.collectionView indexPathsForVisibleItems];    NSIndexPath *curIndexPath = nil;    NSInteger curzIndex = 0;    for (NSIndexPath *path in indexPaths.objectEnumerator) {        UICollectionViewLayoutAttributes *attributes = [self.collectionView layoutAttributesForItemAtIndexPath:path];        if (!curIndexPath) {            curIndexPath = path;            curzIndex = attributes.zIndex;            continue;        }        if (attributes.zIndex > curzIndex) {            curIndexPath = path;            curzIndex = attributes.zIndex;        }    }    return curIndexPath;}

//实现无限循环滚动-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    if (scrollView.contentOffset.x<=250) {        scrollView.contentOffset = CGPointMake(5*250+scrollView.contentOffset.x, 0);    }    if (scrollView.contentOffset.x > (_imageArray.count - 2)*250) {        scrollView.contentOffset = CGPointMake(250+scrollView.contentOffset.x-(_imageArray.count - 2)*250, 0);    }}

效果如下：

本示例还存在一个问题，就是点击非焦点cell时不能使其很好的滚动到中间位置，望大神们指点一下。