自定义UICollectionViewFlowLayout实现相册功能

1.程序运行效果

2.项目结构

3.代码

//
//  YFViewController.m
//  02-相册
//
//  Created by YF on 16/3/7.
//  Copyright © 2016年 YF. All rights reserved.
//

#import "YFViewController.h"
#import "YFPhotoFlowLayout.h"
#import "YFPhotoCell.h"

@interface YFViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

@property(nonatomic,strong)NSMutableArray *dataArray;

@end

static NSString  *photoCellID = @"photoID";

@implementation YFViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self setupUI];
}

//初始化界面
-(void)setupUI
{
    //1.创建自定义的流水布局
    YFPhotoFlowLayout *photoFlowLayout = [[YFPhotoFlowLayout alloc]init];
    
    //2.创建 视图
    CGRect frame = CGRectMake(0,200, self.view.frame.size.width, 300);
    UICollectionView *contentView = [[UICollectionView alloc]initWithFrame:frame collectionViewLayout:photoFlowLayout];
    
    contentView.delegate = self;
    contentView.dataSource = self;
    [self.view addSubview:contentView];
    
    //3.注册才 cell;
    [contentView registerNib:[UINib nibWithNibName:NSStringFromClass([YFPhotoCell class]) bundle:nil] forCellWithReuseIdentifier:photoCellID];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
   
}


#pragma 代理方法
//多少组
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

//每组多少行
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return  self.dataArray.count;
}

//cell 的内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    
   YFPhotoCell *photocell =  [collectionView dequeueReusableCellWithReuseIdentifier:photoCellID forIndexPath:indexPath];
    
    photocell.image = self.dataArray[indexPath.row];
 
    return photocell;
}



-(NSMutableArray *)dataArray
{
    if (_dataArray == nil) {
        _dataArray = [NSMutableArray array];
        for (int i = 0; i<9; i++) {
            UIImage *image = [UIImage imageNamed:@"zilong"];
            [_dataArray addObject:image];
        }
    }
    return _dataArray;
}
@end

//
//  YFPhotoFlowLayout.m
//  02-相册
//
//  Created by YF on 16/3/7.
//  Copyright © 2016年 YF. All rights reserved.
//

#import "YFPhotoFlowLayout.h"

@implementation YFPhotoFlowLayout

-(instancetype)init
{
    if (self = [super init]) {
        
    }
    return self;
}

//返回每个 item 的布局样式
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray<UICollectionViewLayoutAttributes *> *superAttrubutes = [super layoutAttributesForElementsInRect:rect];
    
    //获取屏幕的中心的 x
    CGFloat screenCenterX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
    
    for (UICollectionViewLayoutAttributes *attribute in superAttrubutes) {
        //计算每个 item 距离 屏幕中心的 间距
        
        CGFloat deltaX = ABS(screenCenterX - attribute.center.x);
        
        //修改每个 item 的属性
        CGFloat scaleDelta = 1.2 - deltaX / ((self.collectionView.frame.size.width + attribute.size.width) /2)*0.5;
        attribute.transform = CGAffineTransformMakeScale(scaleDelta, scaleDelta);
        
    }
    
    return superAttrubutes;
}
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    CGRect visibleRect = CGRectZero;
    visibleRect.origin = proposedContentOffset;
    visibleRect.size = self.collectionView.frame.size;
    
    NSArray<UICollectionViewLayoutAttributes *> *superAttrubutes = [super layoutAttributesForElementsInRect:visibleRect];
    
    //获取屏幕的中心的 x
    CGFloat screenCenterX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
    
    CGFloat minDelta = MAXFLOAT;
    
    for (UICollectionViewLayoutAttributes *attrobute in superAttrubutes) {
        CGFloat deltax = attrobute.center.x - screenCenterX;
        if (ABS(minDelta) > ABS(deltax)) {
            minDelta = deltax;
        }
    }
    
    return CGPointMake(proposedContentOffset.x + minDelta, proposedContentOffset.y);
}
//当可视区域改变的时候,刷新布局
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
//页面即将刷新时候调用
-(void)prepareLayout
{
    [super prepareLayout];
    
    /**
     *  设置item 的大小
     */
    CGFloat itemHeight = self.collectionView.frame.size.height * 0.8;
    CGFloat itemWidth = self.collectionView.frame.size.height * 0.6;
    self.itemSize = CGSizeMake(itemWidth, itemHeight);
    
    //设置滚动方向
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    //设置内边距
    CGFloat margin = (self.collectionView.frame.size.width - itemWidth)/2;
    self.sectionInset = UIEdgeInsetsMake(0, margin, 0, margin);
    
    
}
@end

//
//  YFPhotoCell.m
//  02-相册
//
//  Created by YF on 16/3/7.
//  Copyright © 2016年 YF. All rights reserved.
//

#import "YFPhotoCell.h"

@interface YFPhotoCell()

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end
@implementation YFPhotoCell

-(void)setImage:(UIImage *)image
{
    _image = image;
    self.imageView.image = image;
}
@end