自定义UICollectinviewFlowLayout，即实现瀑布流

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

如图所示，通过实现不规则的网格分布，来显示出不同的效果。因为集合视图必须要指定布局还可以显示，所以自定义布局就可以实现瀑布流的效果。

//创建布局对象
WaterFlowLayout *flowLayout = [[WaterFlowLayout alloc] init]; flowLayout.delegate = self;
flowLayout.numberOfColumn = ; //创建集合视图
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];

因为系统自带的布局有四个方法，分别实现了item大小，分区间隔，最小行间距，item之间的间隙大小

@protocol UICollectionViewDelegateFlowLayout <UICollectionViewDelegate>
@optional
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

所以，自定义FlowLayout,并定义协议，以便定义这些方法。

@protocol WaterFlowLayoutDelegate <NSObject>//关键方法，此方法的作用是返回每一个item的size大小
//数据中原始图片大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(WaterFlowLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
//分区间隔
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(WaterFlowLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
//得到 item之间的间隙大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(WaterFlowLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
//最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(WaterFlowLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;@end@interface WaterFlowLayout : UICollectionViewLayout//瀑布流一共多少列
@property (nonatomic, assign) NSUInteger numberOfColumn;@property (nonatomic, assign) id<WaterFlowLayoutDelegate>delegate;

看图可知，最小高的的item，将作为下一列item的起点。

@interface WaterFlowLayout ()//存放每一列的高度
@property (nonatomic, retain) NSMutableArray *columnHeightsArray;//存放每一个item的属性包含 frame以及下标
@property (nonatomic, retain) NSMutableArray *attributesArray;@end@implementation WaterFlowLayout//获取最小高度的方法
- (CGFloat)minHeight
{
CGFloat min = ;
for (NSNumber *height in _columnHeightsArray) {
CGFloat h = [height floatValue];
if (min > h) {
min = h;
}
}
return min;
}//获取最大值
- (CGFloat)maxHeight
{
CGFloat max = ;
for (NSNumber *height in _columnHeightsArray) {
CGFloat h = [height floatValue];
if (max < h) {
max = h;
}
}
return max;
}//找到最小高的下标
- (NSUInteger)indexOfMinHeight
{
NSUInteger index = ;
for (int i = ; i < [_columnHeightsArray count]; i ++) {
CGFloat height = [_columnHeightsArray[i] floatValue];
if (height == [self minHeight]) {
index = i;
return index;
}
}
return index;
}//重写父类的布局方法
- (void)prepareLayout
{
[super prepareLayout]; _attributesArray = [[NSMutableArray alloc] init]; _columnHeightsArray = [[NSMutableArray alloc] initWithCapacity:self.numberOfColumn]; //给列高数组里面的对象赋初值
for (int i = ; i < self.numberOfColumn; i ++) {
[_columnHeightsArray addObject:@0.0];
} CGFloat totalWidth = self.collectionView.frame.size.width; //创建每个item frame中的x、y
CGFloat x = ;
CGFloat y = ; NSUInteger itemCount = [self.collectionView numberOfItemsInSection:]; for (int i = ; i < itemCount; i ++) {
//得到集合视图中列间隙的个数
NSUInteger numberOfSpace = self.numberOfColumn - ; //代理对象执行代理方法，得到 item之间的间隙大小
CGFloat spaceWidth = [_delegate collectionView:self.collectionView layout:self minimumInteritemSpacingForSectionAtIndex:]; //求每列的宽度，也就是每个item的width
CGFloat width = (totalWidth - spaceWidth * numberOfSpace) / self.numberOfColumn; //获取每一个itemSize的大小
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:]; //数据中原始图片大小
CGSize imageSize = [_delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath]; //通过约分公式得到固定宽之后的高度是多少
CGFloat height = width * imageSize.height / imageSize.width; UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; //记录每一个item的大小和位置
attribute.frame = CGRectMake(x, y, width, height); //数组保存每个item的位置信息
[_attributesArray addObject:attribute]; NSLog(@"item = %d",i);
NSLog(@"x = %.2f y = %.2f width = %.2f height = %.2f",x,y,width,height); //求列高最小的那一列的下标
NSUInteger minHeightIndex = [self indexOfMinHeight]; //求出最小列的高度
CGFloat minHeight = [_columnHeightsArray[minHeightIndex] floatValue]; //求出行高
CGFloat lineHeight = [_delegate collectionView:self.collectionView layout:self minimumLineSpacingForSectionAtIndex:]; //上一次总的列高加上行高加上新加上的item的height，才是现在这一列的总高度
//minHeight为最小列现在的高度
//lineHeight为行间距
//height为新加的item的高
_columnHeightsArray[minHeightIndex] = [NSNumber numberWithFloat:minHeight + lineHeight + height]; //重新算最小列高的下标
minHeightIndex = [self indexOfMinHeight]; //算下一次新加的item的x和y值
x = (spaceWidth + width) * minHeightIndex; y = [self minHeight];
}
}//重写这个方法，可以返回集合视图的总高度
- (CGSize)collectionViewContentSize
{
return CGSizeMake(self.collectionView.frame.size.width, [self maxHeight]);
}- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return _attributesArray;
}