iOS之CollectionView瀑布流布局
2016-09-27 本文已影响1268人
CrazySteven
有一个多月没有更新博客了，不是不想，而是不知道该写什么。今天遇到一个说关于瀑布流布局的问题，以前也没遇到过，就写写这个吧，顺便用用新的Xcode 8（开发这个行业面很大，做的项目少，很多问题没有遇到过，但不见得解决不了，日积月累就好了）。
CollectionView是iOS 6引入的控件，今天的重点并不是介绍它，而是使用它进行布局。效果图如下：
两列效果图.png
三列效果图.png
看了效果图，再来说说具体的实现步骤：
1.添加CollectionView控件
[self.view addSubview:self.myCollectionView];
2.加载数据（在[self addData]方法中进行数据的处理）
self.myCVLayout.dataArr = [self addData];
3.对CollectionView进行配置（懒加载）[1]
_myCollectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:self.myCVLayout];
_myCollectionView.backgroundColor = [UIColor orangeColor];
[_myCollectionView registerNib:[UINib nibWithNibName:@"MyCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:CVCell];
_myCollectionView.dataSource = self;
4.对约束layout进行配置（懒加载）
_myCVLayout = [[CollectionLayout alloc]initOptionWithColumnNum:2 rowSpacing:10.0f columnSpacing:10.0f sectionInset:UIEdgeInsetsMake(20, 10, 10, 10)];
5.配置CollectionView的dataSource方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.myCVLayout.dataArr.count;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
MyCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CVCell forIndexPath:indexPath];
cell.image.image = [UIImage imageNamed:self.myCVLayout.dataArr[indexPath.row]];
return cell;
}
6.创建一个UICollectionViewLayout的类，并结合第3步CollectionView的配置进行配置
if (self = [super init]) {
_columnNum = columnNum;
_rowSpacing = rowSpacing;
_columnSpacing = columnSpacing;
_sectionInset = sectionInset;
_everyColumnHDict = [NSMutableDictionary dictionary];
_attributeArr = [NSMutableArray array];
}
7.计算图片显示的高度
NSString * imageName = _dataArr[i];
UIImage * image = [UIImage imageNamed:imageName];
CGFloat imageH = image.size.height / image.size.width * width;
return imageH;
8.重写prepareLayout方法[2]
for (int i = 0; i < _columnNum; i++) {
[_everyColumnHDict setObject:@(_sectionInset.top) forKey:[NSString stringWithFormat:@"%d",i]];
}
for (int i = 0; i < _dataArr.count; i++) {
[_attributeArr addObject:[self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]]];
}
9.重写layoutAttributesForItemAtIndexPath方法
//创建一个约束
UICollectionViewLayoutAttributes * attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//计算宽度(等宽)
CGFloat itemW = (self.collectionView.bounds.size.width - _sectionInset.left - _sectionInset.right - (_columnNum - 1) * _rowSpacing) / _columnNum;
//根据宽度算高度
CGFloat itemH = [self calculateImageHeightWithCount:indexPath.row withWidth:itemW];
//确定了宽度和高度
CGRect frame = CGRectMake(0, 0, itemW, itemH);
//x代表第几列，y是origin的y
NSInteger x = 0;
CGFloat y = 0.0f;
//遍历字典即查看每一列的高度，确定最短的一列（x为第几列，y是高度）
for (id temKey in _everyColumnHDict) {
CGFloat temHeight = [_everyColumnHDict[temKey] floatValue];
if (y == 0) {
y = temHeight;
x = [temKey integerValue];
continue;
}
if(y > temHeight ) {
y = temHeight;
x = [temKey integerValue];
}
}
//设置frame的origin
frame.origin = CGPointMake(_sectionInset.left + x * (itemW + _rowSpacing), y);
//将这一列最新的高度保存下来，字典会自动覆盖原来的数据
NSString * key = [NSString stringWithFormat:@"%ld",x];
NSNumber * height = @(_columnSpacing + y + itemH);
[_everyColumnHDict setObject:height forKey:key];
//设置并返回约束
attribute.frame = frame;
return attribute;
10.重写collectionViewContentSize方法(设置可滚动的范围)
CGFloat height = 0.0f;
for (id key in _everyColumnHDict) {
CGFloat temHeight = [_everyColumnHDict[key] floatValue];
height = height > temHeight ? height : temHeight;
}
//遍历字典，找出最高的那一列，返回高度
return CGSizeMake(self.collectionView.frame.size.width, height + _sectionInset.bottom);
11.重写layoutAttributesForElementsInRect方法
return _attributeArr;
注释写的非常清楚了，列数、边距之类的自己改下第4步的参数即可。有不明白的也可以看Demo,欢迎大家Star.
