写在前面
弄了下个人站...防止内容再次被锁定...所有东西都在这里面
welcome~
个人博客
最近刚写的一个简单的瀑布流.
整体思路可能不是很完善.
不过也算是实现效果了.
高手勿喷
瀑布流.gif
思路: 自定义
UICollectionViewLayout实际上就是需要返回每个item的fram就可以了.
先说简单的,width值 = (CollectionView的整体宽度 - 左右边距 - 每列的间距 )/列数
height = 按照原图比例缩放就行
x 需要定位 在哪一列上 = 左边距 + (列间距 + width) * 最小列的列号
y 永远是在列高最小的那列下添加 = 最小列高 + 行间距
最小列高的计算需要 将每一列的列高算出来 比较下,最小列高的值是不断被替代.初始化应当就是上边距的值.
由于需要计算出最小列高于是我定义一个字典.
{ key0:columnHeight0,
key1: columnHeight0
...
}
字典元素的个数由 column来决定. 每列存放的是当前列的列高.
通过比较columnHeight中最小的来获得最小 key ,每次更新这个最小key对应的columnHeight就行了
- 下面看代码:
公开变量以及代理.
公开的变量是可以进行调用时设置,一般就为这些,delegate用来实现动态的高度设置
//
// WaterFallLayout.h
// 作业3
//
// Created by gongwenkai on 2016/12/7.
// Copyright © 2016年 gongwenkai. All rights reserved.
//
#import <UIKit>
@protocol WaterFallLayoutDelegate<NSObject>
///设置图片高度
//width为cell实际宽度
- (CGFloat) collectionViewHeightAtIndexPath:(NSIndexPath *)indexPath withItemWidth:(CGFloat)width;
@end
@interface WaterFallLayout : UICollectionViewLayout
@property(nonatomic,assign)int column; //设置列数
@property(nonatomic,assign)int rowMargin; //设置行间距
@property(nonatomic,assign)int columnMargin;//设置列间距
@property(nonatomic,assign)UIEdgeInsets edge;//设置边距
@property(nonatomic,strong)id<WaterFallLayoutDelegate>delegate;
@end
由于我们的自定义布局继承UICollectionViewLayout.
每次布局都会调用
//准备布局做一些准备工作,例如初始化
- (void)prepareLayout;
//这个方法在prepareLayout后调用.每次拖动都会调用,有点类似scrollview的那个.
//这里需要返回一个UICollectionViewLayoutAttributes数组里面就能存放fram信息
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect ;
先做准备工作:初始化字典
- (void)prepareLayout {
[super prepareLayout];
// NSLog(@"prepareLayout");
//初始化字典
for (int i = 0; i < _column; i++) {
[self.maxYDict setObject:[NSNumber numberWithFloat:self.edge.top] forKey:[NSString stringWithFormat:@"%d",i]];
}
self.minKey = @"0";
NSMutableArray *array = [NSMutableArray array];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i<count xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> height) {
minY = height;
self.minKey = [NSString stringWithFormat:@"%d",i];
columnHeight = minY + heightAtt;
} else {
columnHeight = height;
[self.maxYDict setObject:[NSNumber numberWithFloat:columnHeight] forKey:[NSString stringWithFormat:@"%d",i]];
}
}
//设置X,Y坐标
CGFloat x = self.edge.left + [self.minKey floatValue] * (width + self.columnMargin);
CGFloat y = [[self.maxYDict objectForKey:self.minKey] floatValue] ;
//更新最小列的高度
[self.maxYDict setObject:[NSNumber numberWithFloat:y+heightAtt] forKey:self.minKey];
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.frame = CGRectMake(x, y, width, heightAtt);
return attrs;
}
计算完了就可以让layoutAttributesForElementsInRect设置回布局了
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
// NSLog(@"layoutAttributesForElementsInRect");
return self.attrsArray;
}
最后我们需要重写一下内容的范围,高为最大的列高
/*
重写 设置collectionViewContentSize
*/
- (CGSize)collectionViewContentSize {
//最高列关键字
int columnHeight = 0;
//默认取第一个元素
float maxY = [[self.maxYDict objectForKey:@"0"] floatValue];
//找到字典中最大的数
for (int i = 0; i < self.maxYDict.allKeys.count; i++) {
float height = [[self.maxYDict objectForKey:[NSString stringWithFormat:@"%d",i]] floatValue];
if (maxY < height) {
//保持maxY最小
maxY = height;
//记录key
columnHeight = i;
}
}
//读取最高列
CGFloat maxHeight = [[self.maxYDict objectForKey:[NSString stringWithFormat:@"%d",columnHeight]] floatValue];
return CGSizeMake(0, maxHeight + self.edge.bottom);
}
大功告成。
