CustomWaterFallLayout.h
#import <UIKit/UIKit.h>
@class CustomWaterFallLayout;
@protocol CustomWaterFallLayoutDelegate <NSObject>
//此方法是为了从viewController中得到相应位置的item，以便布局
//第一个参数：将当前类对象传递过去，是为了获得当前对象的itemSize属性，进一步得到该item的宽度，根据比例计算高度
//第二个参数：是为了在viewController根据indexPath得到对应位置的item，然后从相应的数据源中取出对应的数据，以便计算。
//返回值就是我们想要得到的单元格的size
- (CGSize)layoutWithCustomLayout: (CustomWaterFallLayout *)layout indexPath: (NSIndexPath *)indexPath;
@end
@interface CustomWaterFallLayout : UICollectionViewLayout
//得到item的大小
@property (nonatomic,assign) CGSize itemSize;
//行间距
@property (nonatomic,assign) float lineSpace;
//列间距
@property (nonatomic,assign) float columnSpace;
//共多少列
@property (nonatomic,assign) int numberColumn;
//内边距
@property (nonatomic,assign) UIEdgeInsets sectionInsets;
@property (nonatomic,assign) id<CustomWaterFallLayoutDelegate> delegate;
@end
CustomWaterFallLayout.m
#import "CustomWaterFallLayout.h"
@interface CustomWaterFallLayout ()
@property (nonatomic,retain) NSMutableArray *attributesArray;//保存所有的单元格属性模型，属性模型里面包含单元格的frame值
@property (nonatomic,retain) NSMutableArray *columnLengthArray;//保存所有列的长度，用来比较以便找出最短列来布局新的单元格。
- (NSInteger)shortColumnIndex;//得到最短列的下标，来确定最短列是那一列，根据列数来计算item的x坐标的位置，根据最短列的列数，从上面的数组中可以取出对应的长度，根据长度，就可以确定当前item的y坐标
- (NSInteger)longColumnIndex;//得到最长列的下标，根据下标从上面的数组中取出最长长度，用来确定collectionView的可滚动区域。
@end
@implementation CustomWaterFallLayout
- (NSMutableArray *)attributesArray
{
if (!_attributesArray) {
_attributesArray = [[NSMutableArray alloc] init];
}
return _attributesArray;
}
- (NSMutableArray *)columnLenthArray
{
if (!_columnLengthArray) {
_columnLengthArray = [[NSMutableArray alloc] init];
}
return _columnLengthArray;
}
- (NSInteger)shortColumnIndex{
int index = 0; //存储最短列下标
float shortLength = MAXFLOAT; //用来存储最短列长度
for (int i = 0; i < self.columnLengthArray.count; i++) {
float length = [[self.columnLengthArray objectAtIndex:i] floatValue];
if (length < shortLength) {
shortLength = length;
index = i;
}
}
return index;
}
- (NSInteger)longColumnIndex
{
int index = 0;//存储最长列下标
float longLength = 0;//用来存储最长列的长度
for (int i = 0; i < self.columnLengthArray.count; i++) {
float length = [self.columnLengthArray[i] floatValue];
if (length > longLength) {
longLength = length;
index = i;
}
}
return index;
}
//所有单元格的布局方法，实际上就是确定所有单元格的frame
-(void)customLayoutItem{
//为所有列赋值初始长度，实际上就是内边距的top
for (int i = 0; i < self.numberColumn; i++) {
// [self.columnLenthArray addObject:[NSNumber numberWithFloat:self.sectionInsets.top]];
self.columnLenthArray[i] = @(self.sectionInsets.top);
}
//为了给所有的item布局，我们得得到item的总个数
NSInteger allItems = [self.collectionView numberOfItemsInSection:0];
// 遍历所有的单元格，为他计算ftame
for (int i = 0; i<allItems; i++) {
//计算item的X值
//得到当前item所在的列
NSInteger shortIndex = self.shortColumnIndex;
//根据列计算X值
float x = self.sectionInsets.left + (self.itemSize.width+self.columnSpace)*shortIndex;
//算item的Y值
//最短列的长度加上行间距
float y = [self.columnLenthArray[shortIndex] floatValue]+ self.lineSpace;
//得到该item的宽高
//需要一个indexPath来确定是要那个item的宽高
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
CGSize size = [self.delegate layoutWithCustomLayout:self indexPath:indexPath];
//声明一个属性模型，来承载对应item的frame
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attributes.frame = CGRectMake(x, y, size.width, size.height);
[self.attributesArray addObject:attributes];
//每次增加一个item，当前列的长度肯定会发生变化，所以我们要更新数组中当前列的长度，以便下次找最短列使用。
self.columnLenthArray[shortIndex] = @(y + size.height);
}
}
//开始布局时所调用的系统方法
- (void)prepareLayout
{
[super prepareLayout];
//在开始布局时使用我们的布局方法
[self customLayoutItem];
}
//为当前区域保存所有的属性模型
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attributesArray;
}
////返回每个item的属性模型
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
return self.attributesArray[indexPath.item];
}
//collectionView的可滚动区域
- (CGSize)collectionViewContentSize
{
CGSize contentSize = self.collectionView.frame.size;
//得到可滚动高度
float height = [[self.columnLengthArray objectAtIndex:self.longColumnIndex] floatValue];
contentSize.height = height;
return contentSize;
}
@end
