自定义UICollectionViewFlowLayout实现相册功能

来源:互联网 发布:js九九乘法表原理 编辑:程序博客网 时间:2024/05/29 13:31

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;@endstatic 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


0 0
原创粉丝点击