放图规则: 寻找最短边
数组保存每一列的高度, 已做为寻找最短边
设置公用属性
1 按钮的size
2. 列数
3. 列间隔
4. 边间距
//Item的size
@property (nonatomic, assign) CGSize itemSize;
//列数
@property (nonatomic, assign) NSUInteger numberOfColumns;
//列间隔
@property (nonatomic, assign) CGFloat insertItemOfSpacing;
//边间距
@property (nonatomic, assign) UIEdgeInsets sectionInsets;
//代理
@property (nonatomic, weak) id<WaterLayoutDelegate>delegate;
设置获取某个Item的代理方法
- (CGFloat)heightOfItemIndexPath:(NSIndexPath *)indexPath;
设置一些存储数组
1. 所有列的高度
2. 所有Item的frame
3. Item数量(NSInteger)
@property (nonatomic, strong) NSMutableArray *columsHeights;
@property (nonatomic, strong) NSMutableArray *itemAttr;
@property (nonatomic, assign) NSInteger numberOfItems;
实现方法
1. 求最短列的序号
#pragma mark 求最短列的列号
- (NSInteger)calcShortheight {
//MAXFLOAT: 代表最大float值
CGFloat shortestHeight = MAXFLOAT;
NSInteger shortestIndex = 0;
//遍历列数
for (int i = 0; i < self.numberOfColumns; i++) {
//获取当前列的高度 -- 数组中只能保存对象
CGFloat height = [self.columsHeights[i] floatValue];
//对比高度
if (shortestHeight > height) {
shortestHeight = height;
shortestIndex = i;
}
}
//返回高度最小的下标
return shortestIndex;
}
2. 求列中高度最高的列号
#pragma mark 求列中高度最高的列号
- (NSInteger)calcLongestHeight {
CGFloat maxHeight = 0;
NSInteger longestIndex = 0;
for (int i = 0; i < self.numberOfColumns; i++) {
CGFloat height = [self.columsHeights[i] floatValue];
if (maxHeight < height) {
maxHeight = height;
longestIndex = i;
}
}
return longestIndex;
}
3. 初始化数据
初始化数组之类的. 同时初始化列高度
for (int i = 0; i < self.numberOfColumns; i++) {
//利用字面量的方式将普通数据类型的变量类型转换能NSNumber对象并存储
[self.columsHeights addObject:@(self.sectionInsets.top)];
}
4. 重写perpareLayout(每个Item会调用)
4.1 调用父类的perpareLayout
[super prepareLayout];
4.2 调用数据初始化方法
[self initAllArray];
4.3 获取collectionView总所有的item
self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
4.4 对item进行布局, 利用for循环遍历Item数组
计算最短列的长度
//获取当前最短列列号
NSInteger shortestIndex = [self calcShortheight];
//计算Item的Y值(最短列高加间距)
CGFloat itemY = [self.columsHeights[shortestIndex] floatValue] + self.insertItemOfSpacing;
//计算Item的X值
//边距+(item宽+间隔)*列序号
CGFloat itemX = self.sectionInsets.left + (self.itemSize.width + self.insertItemOfSpacing) * shortestIndex;
//获取item的高度
CGFloat itemHeight = 0;
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
//使用代理方法计算item的高度
if (self.delegate && [self.delegate respondsToSelector:@selector(heightOfItemIndexPath:)]) {
//利用代理获取Item的高度
itemHeight = [self.delegate heightOfItemIndexPath:indexPath];
重新布局item
//获取当前Item的布局属性
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attr.frame = CGRectMake(itemX, itemY, self.itemSize.width, itemHeight);
[self.itemAttr addObject:attr];
//更新列的高度
self.columsHeights[shortestIndex] = @(itemY + itemHeight);
5. 返回整个布局的contentSize(可滚动区域),
即重写方法collectionViewContentSize
5.1 计算最高列的高度
//求最高列列号
NSInteger longestIndex = [self calcLongestHeight];
//计算contentSize的高度
//最高列的高度+底部间距
CGFloat contentHeight = [self.columsHeights[longestIndex] floatValue] + self.sectionInsets.bottom;
5.2 重新设置可滚动区域
CGSize contentSize = self.collectionView.bounds.size;
contentSize.height = contentHeight;
//返回新的可滚动区域
return contentSize;
6. 返回所有Item的布局属性,重写layoutAttributesForElementsInRect
返回新的item布局数组
return self.itemAttr;
使用
在ViewController中初始化属性, 设置代理, 实现代理方法
- (WaterLayout *)getWaterLayout {
WaterLayout *layout = [[WaterLayout alloc] init];
//设置列数
layout.numberOfColumns = 3;
//设置边距
layout.sectionInsets = UIEdgeInsetsMake(50, 10, 50, 10);
//设置间距
layout.insertItemOfSpacing = 10;
//设置item大小
CGFloat width = [UIScreen mainScreen].bounds.size.width;
layout.itemSize = CGSizeMake((width - 40)/3, 100);
layout.delegate = self;
return layout;
}
#pragma mark 实现瀑布流的协议方法
- (CGFloat)heightOfItemIndexPath:(NSIndexPath *)indexPath{
CGFloat width = [UIScreen mainScreen].bounds.size.width;
//每个Item的宽度
CGFloat subWidth = (width - 40) / 3;
//求每个Item的高度
NSDictionary *dict = self.dataArray[indexPath.row];
CGFloat imageWidth = [dict[@"width"] floatValue];
CGFloat imageHeight = [dict[@"height"] floatValue];
return imageHeight/imageWidth * subWidth;
}
