這次回學(xué)校做畢業(yè)設(shè)計(jì)準(zhǔn)備畢業(yè)了,突然覺得時間過的好快啊,忙完了之后今天終于有時間寫點(diǎn)東西了.然后就寫了這個自定義collectionViewFlowlayout.有篇博客寫的很好,地址先給大家看看效果圖吧.github下載地址

錄屏2.gif

首先先定義一個Model,里面有3個屬性,分別是圖片的url,圖片的寬,圖片的高.

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface Model : NSObject
@property(nonatomic,copy)NSString * img;
@property(nonatomic,assign)CGFloat w;
@property(nonatomic,assign)CGFloat h;
@end
#import "Model.h"
@implementation Model
@end

我在網(wǎng)上找了個plist文件,里面就有寬,高和url.如圖:

屏幕快照 2016-06-01 下午4.05.41.png

然后自定義一個flowlayout.

XMHFlowLayout.h

#import <UIKit/UIKit.h>
@class XMHFlowLayout;
@protocol XMHFlowLayoutDelegate <NSObject>
/**
 *  這個代理方法用于在viewcontroller中通過Width來計(jì)算高度
 *
 *  @param Flow      flowlayout
 *  @param width     圖片的寬
 *  @param indexPath indexPath
 *
 *  @return 圖片的高
 */
-(CGFloat)Flow:(XMHFlowLayout *)Flow heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath*)indexPath;

@end

@interface XMHFlowLayout : UICollectionViewFlowLayout
@property(nonatomic,assign)UIEdgeInsets sectionInset;
@property(nonatomic,assign)CGFloat rowMagrin;//行間距
@property(nonatomic,assign)CGFloat colMagrin;//列間距
@property(nonatomic,assign)CGFloat colCount;//多少列
@property(nonatomic,weak)id<XMHFlowLayoutDelegate>degelate;
@end

XMHFlowLayout.m

#import "XMHFlowLayout.h"

@interface XMHFlowLayout ()
@property(nonatomic,retain)NSMutableDictionary * maxYdic;
@property (nonatomic, strong) NSIndexPath *pinchedItem;
@property (nonatomic) CGSize pinchedItemSize;
@end

@implementation XMHFlowLayout
-(NSMutableDictionary *)maxYdic
{
    if (!_maxYdic) {
        self.maxYdic = [[NSMutableDictionary alloc] init];
    }
    return _maxYdic;
}
-(instancetype)init
{
    if (self=[super init]) {
        self.colMagrin = 10;
        self.rowMagrin = 10;
        self.sectionInset = UIEdgeInsetsMake(40, 10, 10, 10);
        self.colCount = 2;
    }
    return self;
}
-(void)prepareLayout
{
    [super prepareLayout];
}

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
-(CGSize)collectionViewContentSize
{
    __block NSString * maxCol = @"0";
    //找出最長的列
    [self.maxYdic enumerateKeysAndObjectsUsingBlock:^(NSString * column, NSNumber *maxY, BOOL *stop) {
        if ([maxY floatValue]>[self.maxYdic[maxCol] floatValue]) {
            maxCol = column;
        }
    }];
    return CGSizeMake(0, [self.maxYdic[maxCol] floatValue]);
}
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    __block NSString * minCol = @"0";
    //找出最短的列
    [self.maxYdic enumerateKeysAndObjectsUsingBlock:^(NSString * column, NSNumber *maxY, BOOL *stop) {
        if ([maxY floatValue]<[self.maxYdic[minCol] floatValue]) {
            minCol = column;
        }
    }];
    //    計(jì)算寬度
    CGFloat width = (self.collectionView.frame.size.width-self.sectionInset.left-self.sectionInset.right-(self.colCount - 1)*self.colMagrin)/self.colCount;
    //    計(jì)算高度
    CGFloat hight = [self.degelate Flow:self heightForWidth:width atIndexPath:indexPath ];
    
    CGFloat x = self.sectionInset.left + (width + self.colMagrin)* [minCol intValue];
    CGFloat y =[self.maxYdic[minCol] floatValue]+self.rowMagrin;
    //   將之前的字典里每列對應(yīng)得y的值加上高度,跟新每列最大的y值
    self.maxYdic[minCol] = @(y+hight);
    
    //    計(jì)算位置
    UICollectionViewLayoutAttributes * attri =[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attri.frame = CGRectMake(x, y, width, hight);
    return attri;
}
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    for(int i = 0;i<self.colCount;i++)
    {
        NSString * col = [NSString stringWithFormat:@"%d",i];
        self.maxYdic[col] = @0;
    }
    NSMutableArray * array = [NSMutableArray array];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i < count; i++) {
        UICollectionViewLayoutAttributes * attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
        [array addObject:attrs];
    }
    return  array;
}
@end

這里要仔細(xì)說說這里的原理.在Viewcontroller里面實(shí)現(xiàn)代理方法,代理方法實(shí)現(xiàn)如下:

-(CGFloat)Flow:(XMHFlowLayout *)Flow heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath*)indexPath{
    Model *model = self.dataArr[indexPath.row];
    return  model.h/model.w*width;
}

因?yàn)闆]列圖片的寬度都是固定的,而高度也就是根據(jù)圖片的寬高比得到的.
我們在這個代理方法和XMHFlowLayout.m中的-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath方法中打上斷電試試.
會看見代理方法和這個方法之間不斷的來回跳,因?yàn)檫@個方法中就用到了代理方法嘛,因?yàn)閿?shù)據(jù)源中有50個元素,所以就會這樣跳50次.這里我設(shè)置的是2列,那么字典里面有2個元素,分別代表第一列的高度和第二列的高度,每次獲取到新的圖片的高度后往比較低的那一列里面加,計(jì)算完成之后,那么這個collectionView的size的height就是最大的列的高度.

Viewcontroller.m

#import "ViewController.h"
#import "PhotoView.h"
#import "CollectionCell.h"
#import "XMHFlowLayout.h"
#import "Model.h"
#import "MJExtension.h"
#define SCREEN_HEIGHT     ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_WIDTH      ([[UIScreen mainScreen] bounds].size.width)
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,XMHFlowLayoutDelegate,didRemovePictureDelegate>
@property (strong, nonatomic) IBOutlet UICollectionView *collection;
@property(nonatomic,strong)NSMutableArray * dataArr;
@property (nonatomic, assign)CGRect transformedFrame;
@property (nonatomic, strong)UIImageView *lookImg;
@property (nonatomic , strong)PhotoView* photoView;
@property (nonnull, strong)XMHFlowLayout *layOut;
@end

@implementation ViewController

-(NSMutableArray *)dataArr{
    if (!_dataArr) {
        _dataArr = [NSMutableArray array];
    }
    return _dataArr;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    self.navigationController.navigationBar.hidden = YES;
    _collection.delegate = self;
    _collection.dataSource = self;
    _layOut = [[XMHFlowLayout alloc] init];
    _layOut.degelate =self;
    [_collection setCollectionViewLayout:_layOut];
    
    //初始化數(shù)據(jù)
    NSArray * arr = [Model objectArrayWithFilename:@"1.plist"];
    [self.dataArr addObjectsFromArray:arr];

}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return _dataArr.count;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identifier = @"cell";
    CollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    [cell setModel:_dataArr[indexPath.row]];
    NSLog(@"%@",NSStringFromCGRect(cell.frame));
    return cell;
}

-(CGFloat)Flow:(XMHFlowLayout *)Flow heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath*)indexPath{
    Model *model = self.dataArr[indexPath.row];
    return  model.h/model.w*width;
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    
    if (_lookImg) {
        return;
    }
    Model *model = _dataArr[indexPath.row];
    CollectionCell *cell = (CollectionCell *)[collectionView cellForItemAtIndexPath:indexPath];
    _transformedFrame = [cell convertRect:cell.image.frame toView:[UIApplication sharedApplication].keyWindow];
    _lookImg = [[UIImageView alloc]initWithFrame:_transformedFrame];
    _lookImg.image = cell.image.image;
    [[UIApplication sharedApplication].keyWindow addSubview:_lookImg];
    [UIView animateWithDuration:0.1 animations:^{
        _lookImg.frame = CGRectMake(10, 40, SCREEN_WIDTH - 20, model.h / model.w * (SCREEN_WIDTH - 20));
        self.view.alpha = 0;
        
    } completion:^(BOOL finished) {
        _photoView = [[PhotoView alloc]initWithFrame:[UIApplication sharedApplication].keyWindow.frame];
        [_photoView initWithPicArray:_dataArr picNo:indexPath.row];
        _photoView.removeDelegate = self;
        [[UIApplication sharedApplication].keyWindow addSubview:_photoView];
        
    }];
}

-(void)didremovePicture:(NSMutableArray *)shopArr{
    [[UIApplication sharedApplication]setStatusBarHidden:NO];
    NSInteger i =   _photoView.scrollView.contentOffset.x / SCREEN_WIDTH;
    CollectionCell *cell = (CollectionCell *)[_collection cellForItemAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
    _transformedFrame = [cell.superview convertRect:cell.frame toView:[UIApplication sharedApplication].keyWindow];
    _lookImg.image = cell.image.image;
    [UIView animateWithDuration:0.1 animations:^{
        self.view.alpha = 1;
        _lookImg.frame = _transformedFrame;
    } completion:^(BOOL finished) {
        [_lookImg removeFromSuperview];
        _lookImg = nil;
        _dataArr = [NSMutableArray arrayWithArray:shopArr];
        [_collection reloadData];
    }];
}
-(BOOL)prefersStatusBarHidden
{
    return YES;
}

-(void)deletePicture:(NSMutableArray *)dataArr
{
    _dataArr = dataArr;
    [_collection reloadData];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

PhotoView.h

#import <UIKit/UIKit.h>
#import "Model.h"

@protocol didRemovePictureDelegate <NSObject>

-(void)didremovePicture:(NSMutableArray *)dataArr;
-(void)deletePicture:(NSMutableArray *)dataArr;
@end

@interface PhotoView : UIView

@property (nonatomic, strong)UIScrollView *scrollView;
@property (nonatomic, assign)id<didRemovePictureDelegate>removeDelegate;

/**
 *  初始化方法
 *
 *  @param array  照片數(shù)組
 *  @param number 第幾張照片
 */
-(void)initWithPicArray:(NSMutableArray *)array
                  picNo:(NSInteger)number;

@end

PhotoView.m

#import "PhotoView.h"
#import "UIImageView+WebCache.h"
#define SCREEN_HEIGHT     ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_WIDTH      ([[UIScreen mainScreen] bounds].size.width)
@interface PhotoView   ()<UIScrollViewDelegate>
@property (nonatomic, strong)NSMutableArray *dataArr;
@property (nonatomic, strong)NSMutableArray *scrollArr;
@end

@implementation PhotoView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _scrollView = [[UIScrollView alloc]init];
        self.backgroundColor = [UIColor whiteColor];
        [[UIApplication sharedApplication]setStatusBarHidden:YES];
    }
    return self;
}

-(void)initWithPicArray:(NSMutableArray *)array picNo:(NSInteger)number
{
    _dataArr = [NSMutableArray arrayWithArray:array];
    _scrollArr = [NSMutableArray array];
    _scrollView = [[UIScrollView alloc]initWithFrame:self.frame];
    _scrollView.pagingEnabled = YES;
    _scrollView.contentSize = CGSizeMake(array.count * SCREEN_WIDTH, 1);
    _scrollView.contentOffset = CGPointMake(SCREEN_WIDTH * number, 0);
    [self addSubview:_scrollView];
    for (NSInteger i = 0; i < _dataArr.count; i++) {
        Model *model = _dataArr[i];
        UIScrollView *scroller = [[UIScrollView alloc]initWithFrame:CGRectMake(SCREEN_WIDTH * i, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
        scroller.delegate = self;
        scroller.minimumZoomScale = 1.0;
        scroller.maximumZoomScale = 2.0;
        [_scrollArr addObject:scroller];
        [_scrollView addSubview:scroller];
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(10, 40, SCREEN_WIDTH - 20, model.h / model.w * (SCREEN_WIDTH - 20))];
        imageView.layer.masksToBounds = YES;
        imageView.layer.cornerRadius = 3;
         imageView.tag = 1;
        [imageView sd_setImageWithURL:[NSURL URLWithString:[_dataArr[i] img]]];
        [scroller addSubview:imageView];
        UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        backBtn.frame = CGRectMake(10, 10, 32, 32);
        [backBtn setImage:[UIImage imageNamed:@"back"] forState:UIControlStateNormal];
        [backBtn addTarget:self action:@selector(removeFromsuper) forControlEvents:UIControlEventTouchUpInside];
        [scroller addSubview:backBtn];
        
        UIButton *deleteBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        deleteBtn.frame = CGRectMake(60, 10, 32, 32);
        [deleteBtn setImage:[UIImage imageNamed:@"delete"] forState:UIControlStateNormal];
        [deleteBtn addTarget:self action:@selector(deletePhoto) forControlEvents:UIControlEventTouchUpInside];
        [scroller addSubview:deleteBtn];
        
        UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapToZoom:)];
        doubleTap.numberOfTapsRequired = 2;
        doubleTap.numberOfTouchesRequired = 1;
        [scroller addGestureRecognizer:doubleTap];
        
    }
}

//雙擊放大或者縮小
-(void)tapToZoom:(UITapGestureRecognizer *)tap
{
    UIScrollView *zoomable = (UIScrollView*)tap.view;
    if (zoomable.zoomScale > 1.0) {
        [zoomable setZoomScale:1 animated:YES];
    } else {
        [zoomable setZoomScale:2 animated:YES];
    }
}
#pragma mark 縮放停止
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
    NSLog(@"縮放停止    %.2f", scale);
}

#pragma mark 縮放所對應(yīng)的視圖
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    if (scrollView != _scrollView) {
        UIImageView *imageView = [scrollView viewWithTag:1];
        return imageView;
        
    }
    return nil;
}

-(void)removeFromsuper
{
    [_scrollView removeFromSuperview];
    [self removeFromSuperview];
    if ([self.removeDelegate respondsToSelector:@selector(didremovePicture:)]) {
        [self.removeDelegate didremovePicture:_dataArr];
    }
}

-(void)deletePhoto
{
    NSInteger i =   _scrollView.contentOffset.x / SCREEN_WIDTH;
    
    UIScrollView *scroll = _scrollArr[i];
    [UIView animateWithDuration:0.5 animations:^{
        CGRect frame = scroll.frame;
        frame.origin.y -= SCREEN_HEIGHT;
        scroll.frame = frame;
    } completion:^(BOOL finished) {
         [scroll removeFromSuperview];
    }];
    [_scrollArr removeObjectAtIndex:i];
    [_dataArr removeObjectAtIndex:i];
    [self.removeDelegate deletePicture:_dataArr];
    if (i == _dataArr.count) {
        //最后的一頁
    } else {
        //右邊的依次往左移動一頁
        for (NSInteger j = i ; j < _dataArr.count; j ++) {
            [UIView animateWithDuration:0.5 animations:^{
                UIScrollView *scroll =
![Upload 錄屏2.gif failed. Please try again.]
![錄屏2.gif](http://upload-images.jianshu.io/upload_images/1220329-24b2dbeee586a509.gif?imageMogr2/auto-orient/strip) _scrollArr[j];
                CGRect frame=scroll.frame;
                frame.origin.x -= SCREEN_WIDTH;
                scroll.frame=frame;
            }];
        }
    }
    if (_dataArr.count == 0) {
        [_scrollView removeFromSuperview];
        [self.removeDelegate didremovePicture:_dataArr];
        [self removeFromSuperview];
    }
    _scrollView.contentSize = CGSizeMake((_dataArr.count ) * SCREEN_WIDTH, 1);
}

@end

好了,就差不多這么些了.馬上就要畢業(yè)了,我很開心能有一個自己很喜歡的工作,也祝大家能將興趣變成自己的工作,伴隨著自己的生活每天過的開開心心.??