一、效果展示
二、思路分析
1> 布局的基本流程
当设置好collectionView的布局方式之后(UICollectionViewFlowLayout),当系统开始布局的时候,会调用 prepareLayout 来布局
- (void)prepareLayout;
与此同时,collectionViewCell 的每个控件的布局属性都会调用 以下方法来设置(可以重写方法来修改每个cell 的数值)
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
2> 每列 的高度计算方式
1.计算所有的cell 的高度,然后平均下来,得到itemSize 然后计算每列的高度-----> 该方法不够精确,而且极端情况下会相差太大
2.每次计算cell 的时候,找出高度最低的那一列,优先添加到该列,然后依次计算------> 该方法误差较小
Tip: 在collectionView中,contentSize 就是一个摆设,不能根据这个来计算 collectionView 的大小,系统会自动的根据 itemSize 来计算
三、核心代码实现
// // WaterFall.h // 瀑布流 // // Created by gxiangzi on 15/9/16. // Copyright © 2015年 hqu. All rights reserved. // #import <UIKit/UIKit.h> @interface WaterFall : UICollectionViewFlowLayout // 计算列数 @property (assign, nonatomic) NSInteger columCount; // 所有的模型数组 @property (strong, nonatomic) NSArray * dataList; @end
// // WaterFall.m // 瀑布流 // // Created by gxiangzi on 15/9/16. // Copyright © 2015年 hqu. All rights reserved. // /** // 获得高度的办法 1. 计算总的高度,然后计算每个高度,最后设置itemsize 来计算 2. 找出最高的列,然后根据最高的列来计算 注意:collectionView 的contentView 是一个摆设,没有实际效果,需要根据 itemSize 来计算 */ #import "WaterFall.h" #import "Shop.h" @interface WaterFall () @property (nonatomic,strong) NSMutableArray * itemsAttribute; @end @implementation WaterFall -(void)prepareLayout { [super prepareLayout]; // self.sectionFootersPinToVisibleBounds = YES; // 计算每列的宽度 CGFloat contentWidth = self.collectionView.bounds.size.width - self.sectionInset.left - self.sectionInset.right; CGFloat colWidth = (contentWidth - (self.columCount - ) * self.minimumInteritemSpacing) / self.columCount; self.minimumInteritemSpacing = ; self.minimumLineSpacing = ; [self attribute:colWidth]; } - (void) attribute:(CGFloat) colWidth { NSInteger colCount[self.columCount]; CGFloat colHeight[self.columCount]; ; i<self.columCount; ++i) { colHeight[i] = ; colCount[i] = ; } // 定义总item高 CGFloat totoalItemHeight = ; // 定义一个可变数组,来存储 素有的属性值 NSMutableArray * arrayM = [NSMutableArray arrayWithCapacity:self.dataList.count]; // 计数 NSInteger index = ; // 遍历数组,计算相关的属性 for (Shop * shop in self.dataList) { // 1> 建立布局属性 NSIndexPath * indexPath = [NSIndexPath indexPathForRow:index inSection:]; index ++; UICollectionViewLayoutAttributes * attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; // 2.计算当前的列数 // 计算是第几列 NSInteger col = [self shortestCol:colHeight]; // 计算每一列的个数 colCount[col]++; // 3.计算frame CGFloat w = shop.w; CGFloat h = shop.h * colWidth / w; CGFloat x = self.sectionInset.left + (colWidth + self.minimumInteritemSpacing) * col; CGFloat y = colHeight[col] + self.minimumLineSpacing; // 累加,计算同一列下一个元素的高度 colHeight[col] += (h + self.minimumLineSpacing); attr.frame = CGRectMake(x, y, colWidth, h); // 4.计算总的高度 totoalItemHeight += h; // 5.添加到 itemsAttribute [arrayM addObject:attr]; } // 计算出最高的那一列 NSInteger highestCol = [self highestColL:colHeight]; // 设置 itemSize,使用总高度的平均值 self.itemSize = CGSizeMake(colWidth, (colHeight[highestCol]- colCount[highestCol] * self.minimumInteritemSpacing) / colCount[highestCol]); // 添加页脚属性 UICollectionViewLayoutAttributes * footer = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:[NSIndexPath indexPathForRow: inSection:]]; footer.frame = CGRectMake(, colHeight[highestCol], self.collectionView.bounds.size.width, ); [arrayM addObject:footer]; self.itemsAttribute = arrayM; } /// 返回所有 cell 的属性数组 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect { return self.itemsAttribute; } /// 获得最少的那一列 /// /// @param colHeight 列高数组 /// /// @return 最少的列号 - (NSInteger) shortestCol:(CGFloat *)colHeight { CGFloat min = MAXFLOAT; CGFloat col = ; ; i<self.columCount; ++i) { if (colHeight[i] < min) { min = colHeight[i]; col = i; } } return col; } /// 获得最高的那一列 /// /// @param colHeight 列高数组 /// /// @return 最高的列号 - (NSInteger) highestColL:(CGFloat *)colHeight { CGFloat max = ; CGFloat col = ; ; i<self.columCount; ++i) { if(colHeight[i] > max) { max = colHeight[i]; col = i; } } return col; } #pragma mark - 懒加载 属性数组 - (NSMutableArray *)itemsAttribute { if (_itemsAttribute == nil) { _itemsAttribute = [NSMutableArray array]; } return _itemsAttribute; } @end