iOS-CollectionView 瀑布流视图

要做瀑布流，首先要清楚几点：

主要是对 UICollectionViewLayout 子类的编写。

第一步、自定义初始化（主要是参数的初始化，行数numberOfLine，行间距rowGap，列间距lineGap，边距sideGap）

第二步、prepareLayout（1.初始化每列高度的字典，2初始化属性数组。）

第三步、layoutAttributesForElementsInRect（返回属性数组。）

第四步、collectionViewContentSize （返回整个 collectionView 的尺寸。）

以下为源代码：

UICollectionViewLayout 子类 WaterLayout

//
//  WaterLayout.h
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//

#import <UIKit/UIKit.h>

//计算高度
typedef CGFloat(^HeightBlock)(NSIndexPath *indexPath, CGFloat width);

@interface WaterLayout : UICollectionViewLayout
@property(nonatomic, assign) NSInteger lineNumber; //每行个数
@property(nonatomic, assign) CGFloat rowGap;    //行距（上下的距离）
@property(nonatomic, assign) CGFloat lineGap;   //列距（中间的距离）
@property(nonatomic, assign) UIEdgeInsets sideGap;  //边距

@property(nonatomic, copy) HeightBlock block;   //计算cell 高度

-(instancetype)initWithLineNumber:(NSInteger)lineNumber rowGap:(CGFloat)rowGap lineGap:(CGFloat)lineGap sideGap:(UIEdgeInsets)sideGap;

@end

//
//  WaterLayout.m
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//

#import "WaterLayout.h"

@interface WaterLayout()
//1.存储每列高度的一个字典
@property(nonatomic, strong) NSMutableDictionary *dictOfLineHeight;
//2.存储所有cell frame 的一个数组
@property(nonatomic, strong) NSMutableArray *arrayOfCellFrame;
@end

@implementation WaterLayout

-(instancetype)initWithLineNumber:(NSInteger)lineNumber rowGap:(CGFloat)rowGap lineGap:(CGFloat)lineGap sideGap:(UIEdgeInsets)sideGap{
self = [super init];
if (self) {
self.lineNumber = lineNumber;
self.rowGap = rowGap;
self.lineGap = lineGap;
self.sideGap = sideGap;
self.dictOfLineHeight = [NSMutableDictionary dictionary];
self.arrayOfCellFrame = [NSMutableArray array];
}
return self;
}

//自动布局前的准备工作
- (void)prepareLayout{
//1.要把存储高度的字典补充值
for (NSInteger i = 0; i < _lineNumber; i++) {
[self.dictOfLineHeight setObject:@(self.sideGap.top) forKey:[NSString stringWithFormat:@"%ld",i]];
}
//2.把cell 的尺寸存进数组
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (NSInteger i=0; i<count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
[_arrayOfCellFrame addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
}
}
//返回所以cell frame 信息的数组
- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{
return _arrayOfCellFrame;
}
//计算每个cell 的 frame 值
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//经过了逻辑处理，计算出了cell 的frame
CGRect frame;
CGFloat cellW = (self.collectionView.bounds.size.width - _sideGap.left - _sideGap.right - self.lineGap*(self.lineNumber - 1))/self.lineNumber;
CGFloat cellH;
if (self.block) {
cellH = self.block(indexPath,cellW);
}
__block NSString *keyOfMinHeight = @"0";
[_dictOfLineHeight enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
if ([_dictOfLineHeight[keyOfMinHeight] floatValue] > [obj floatValue]) {
keyOfMinHeight = key;
}
}];
NSInteger minHeiLineNumber = [keyOfMinHeight integerValue];
CGFloat pointX = (self.sideGap.left + minHeiLineNumber * (self.lineGap + cellW));
CGFloat pointY = [_dictOfLineHeight[keyOfMinHeight] floatValue];
frame = CGRectMake(pointX, pointY, cellW, cellH);
//更新高度
_dictOfLineHeight[keyOfMinHeight] = @([_dictOfLineHeight[keyOfMinHeight] floatValue] + cellH + self.rowGap);

attr.frame = frame;
return attr;
}
//返回 集合视图的宽高
- (CGSize)collectionViewContentSize{
__block NSString *keyOfMaxHeight = @"0";
[_dictOfLineHeight enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
if ([_dictOfLineHeight[keyOfMaxHeight] floatValue] < [obj floatValue]) {
keyOfMaxHeight = key;
}
}];
return CGSizeMake(self.collectionView.bounds.size.width, [_dictOfLineHeight[keyOfMaxHeight] floatValue]);
}

@end

MyCollectionViewCell 用 xib 定义的，里面放有一张添加好约束的图片。

//
//  MyCollectionViewCell.h
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface MyCollectionViewCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property(nonatomic, strong) NSString* imageName;
@end

//
//  MyCollectionViewCell.m
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//

#import "MyCollectionViewCell.h"

@implementation MyCollectionViewCell

- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}

-(void)setImageName:(NSString *)imageName{
_imageView.image = [UIImage imageNamed:imageName];
}
@end

DetailsViewController 展示瀑布流视图

//
//  DetailsViewController.m
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//

#import "DetailsViewController.h"
#import "MyCollectionViewCell.h"
#import "WaterLayout.h"

#define CELLID @"DetailsViewController"

@interface DetailsViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
@property(nonatomic, strong)NSMutableArray * dataSource;
@property(nonatomic, strong)UICollectionView * collectionView;

@end

@implementation DetailsViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self initData];
[self initUI];
}
-(void)initData{
_dataSource = [NSMutableArray array];
for (int i = 0; i < 20; i++) {
NSString *imageName = [NSString stringWithFormat:@"%d",i+1];
[_dataSource addObject:imageName];
}
}
-(void)initUI{
self.view.backgroundColor = [UIColor yellowColor];
[self.view addSubview:self.collectionView];
}

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

#pragma mark getter and setter
-(UICollectionView *)collectionView{
if (!_collectionView) {

//瀑布流布局
WaterLayout *layout = [[WaterLayout alloc] initWithLineNumber:3 rowGap:10 lineGap:10 sideGap:UIEdgeInsetsMake(10, 10, 10, 10)];
//block 回调，计算并返回每个 cell 图片的高度
layout.block = ^CGFloat(NSIndexPath *indexPath, CGFloat width){
UIImage *image = [UIImage imageNamed:_dataSource[indexPath.item]];
return (image.size.height/image.size.width)*width;
};
_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

_collectionView.delegate = self;
_collectionView.dataSource = self;
_collectionView.backgroundColor = [UIColor yellowColor];
[_collectionView registerNib:[UINib nibWithNibName:@"MyCollectionViewCell" bundle:[NSBundle mainBundle]] forCellWithReuseIdentifier:CELLID];
}
return _collectionView;
}

#pragma mark delegate
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return _dataSource.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
MyCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CELLID forIndexPath:indexPath];
cell.imageName = _dataSource[indexPath.row];
return cell;
}
@end