自定義流水布局（UICollectionViewFlowLayout的基本使用）

最終顯示的效果圖

思路：

1、UICollection的基本設置，並且創建一個繼承自UICollectionViewFlowLayout的類。(不能是UICollectionViewLayout，否則全部都需要自定義)

2、在UICollectionViewFlowLayout類中完成四步

　　- 1）重寫prepareLayout方法進行基本的布局（cell在最左面的時候是在正中間），不能在init中布局，因為設置collectionView尺寸是在viewDidLoad中，而init在它之前調用，獲得的collectionView的尺寸是空的

　　- 2）重寫shouldInvalidateLayoutForBoundsChange，當collectionView的顯示范圍發生改變的時候，讓其內部重新布局（即讓cell滾動起來）

　　- 3）重寫layoutAttributesForElementsInRect方法，讓cell在左右滑動的時候，尺寸放大或縮小

　　- 4）重寫targetContentOffsetForProposedContentOffset方法，讓最接近中心的cell在停在正中央。

 

代碼如下：

viewContorller中：

#import "ViewController.h"
#import "ZWLineLayout.h"
@interface ViewController () <UICollectionViewDataSource>
@end
@implementation ViewController
static  NSString *ZWCellID = @"cell";
- (void)viewDidLoad {
    [super viewDidLoad];
    //若為UICollectionViewLayout，itemSize和scrollDirection都需要自己寫，下面的類繼承自UICollectionViewLayout
    ZWLineLayout *layout = [[ZWLineLayout alloc] init];
    layout.itemSize = CGSizeMake(160, 160);
    CGRect rect = CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width * 0.6);
    UICollectionView *collection = [[UICollectionView alloc] initWithFrame:rect collectionViewLayout:layout];
    collection.dataSource = self;
    collection.backgroundColor = [UIColor greenColor];
    [self.view addSubview:collection];
    [collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ZWCellID];
}

#pragma mark - 數據源方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ZWCellID forIndexPath:indexPath];
    cell.backgroundColor = [UIColor orangeColor];
    return cell;
}

ZWLineLayout.m中

#import "ZWLineLayout.h"

@implementation ZWLineLayout

/**
 * 用來做布局的初始化操作（不建議在init方法中進行布局的初始化操作）
 */
- (void)prepareLayout
{
    [super prepareLayout];
    //水平滾動
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    //
    CGFloat margin = (self.collectionView.frame.size.width - self.itemSize.width) / 2;
    self.collectionView.contentInset = UIEdgeInsetsMake(0, margin, 0, margin);
}

/**
 * 當collectionView的顯示范圍發生改變的時候，是否需要重新刷新布局
 * 一旦重新刷新布局，就會重新調用下面的方法：
 * 1.prepareLayout
 * 2.layoutAttributesForElementsInRect:方法
 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}


/**
 * 這個方法的返回值是一個數組（數組里面存放着rect范圍內所有元素的布局屬性）
 * 這個方法的返回值決定了rect范圍內所有元素的排布（frame）
 */
//需要在viewController中使用上ZWLineLayout這個類后才能重寫這個方法！！
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //讓父類布局好樣式
    NSArray *arr = [super layoutAttributesForElementsInRect:rect];
    //計算出collectionView的中心的位置
    CGFloat ceterX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
    /**
     * 1.一個cell對應一個UICollectionViewLayoutAttributes對象
     * 2.UICollectionViewLayoutAttributes對象決定了cell的frame
     */
    for (UICollectionViewLayoutAttributes *attributes in arr) {
        //cell的中心點距離collectionView的中心點的距離，注意ABS()表示絕對值
        CGFloat delta = ABS(attributes.center.x - ceterX);
        //設置縮放比例
        CGFloat scale = 1.1 - delta / self.collectionView.frame.size.width;
        //設置cell滾動時候縮放的比例
        attributes.transform = CGAffineTransformMakeScale(scale, scale);
    }
    
    return arr;
}

/**
 * 這個方法的返回值，就決定了collectionView停止滾動時的偏移量
 */
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    // 計算出最終顯示的矩形框
    CGRect rect;
    rect.origin.y = 0;
    rect.origin.x = proposedContentOffset.x;
    rect.size = self.collectionView.frame.size;
    
    //獲得super已經計算好的布局的屬性
    NSArray *arr = [super layoutAttributesForElementsInRect:rect];
    
    //計算collectionView最中心點的x值
    CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
    
    CGFloat minDelta = MAXFLOAT;
    for (UICollectionViewLayoutAttributes *attrs in arr) {
        if (ABS(minDelta) > ABS(attrs.center.x - centerX)) {
            minDelta = attrs.center.x - centerX;
        }
    }
    proposedContentOffset.x += minDelta;
    return proposedContentOffset;
}
@end