简单瀑布流的实现
最近在开发公司的项目里,有一条需求是需要瀑布流的方法实现,之前指写过简单的collectionView 。没有写过变化的集合视图。于是研究了一下简单的瀑布流实现方法
实现瀑布流主要是重写了UICollectionViewLayout的几个方法
1.-(void)prepareLayout
2.- (CGSize)collectionViewContentSize
3.- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
4.- (UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath
第一个方法是做一些初始化的操作,这个方法必须先调用一下父类的实现
第二个方法 返回UICollectionView 的可滚动范围
第三个方法返回 可视范围 UICollectionViewLayoutAttributes 属性的数组
第四个方法是返回indexPath位置UICollectionViewLayoutAttributes属性
我们首先要明白的是瀑布流的排列,瀑布流是把长短不一的控件排列在手机屏幕上,我们排完第一列的时候就会依次往下面排,怎么拍呢。答案是排在第一列最短的那个控件下面,以此类推,然后以此排下去。明白这一点,我们直接上代码
typedef CGFloat(^HeightBlock) (NSIndexPath *indexPath , CGFloat width);
@interface WYCollectionLayout : UICollectionViewLayout
/**
列数
*/
@property(nonatomic,assign) NSInteger lineNumber;
/**
行间距
*/
@property(nonatomic,assign) CGFloat rowSpacing;
/**
列间距
*/
@property(nonatomic,assign) CGFloat lineSpacing;
/**
内边距
*/
@property(nonatomic,assign) UIEdgeInsets sectionInset;
/**
对象方法
@param block 在block中最后要返回一个item的高度
*/
-(void)computeIndexCellHeightWithWidthBlock:(CGFloat(^)(NSIndexPath *indexPath , CGFloat width))block;
@interface WYCollectionLayout()
/**
存放每列高度的字典
*/
@property(nonatomic,strong)NSMutableDictionary *dicOfheight;
/**
存放所有item的attribute属性
*/
@property(nonatomic,strong)NSMutableArray *array;
/**
计算每个item高度的block,必须实现
*/
@property(nonatomic,copy)HeightBlock block;
@end
@implementation WYCollectionLayout
(instancetype)init {
self = [super init];
if (self) {//对默认属性进行设置 //默认行数 2行 //默认行间距 10.0f //默认列间距 10.0f //默认内边距 top:10 left:10 bottom:10 right:10 self.lineNumber = 2; self.rowSpacing = 10.0f; self.lineSpacing = 10.0f; self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10); _dicOfheight = [NSMutableDictionary dictionary]; _array = [NSMutableArray array];
}
return self;
}
/**
* 准备好布局时调用
*/
- (void)prepareLayout {
[super prepareLayout];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
//初始化好每列的高度
for (NSInteger i = 0; i < self.lineNumber ; i++) {
[_dicOfheight setObject:@(self.sectionInset.top) forKey:[NSString stringWithFormat:@"%ld",i]];
}
//得到每个item的属性值进行存储
for (NSInteger i = 0 ; i < count; i ++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
[_array addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
}
}
/**
* 设置可滚动区域范围
*
* @return 可滚动区域的size
*/
- (CGSize)collectionViewContentSize {
__block NSString *maxHeightline = @"0";
[_dicOfheight enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSNumber *obj, BOOL *stop) {
if ([_dicOfheight[maxHeightline] floatValue] < [obj floatValue] ) {
maxHeightline = key;
}
}];
return CGSizeMake(self.collectionView.bounds.size.width, [_dicOfheight[maxHeightline] floatValue] + self.sectionInset.bottom);
}
/**
*return 返回视图框内item的属性,可以直接返回所有item属性
*/
- (NSArray)layoutAttributesForElementsInRect:(CGRect)rect {
return _array;
}
/**
* 计算indexPath下item的属性的方法
*
* @return item的属性
*/
- (UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath {
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//计算item宽
CGFloat itemW = (self.collectionView.bounds.size.width - (self.sectionInset.left + self.sectionInset.right) - (self.lineNumber - 1) * self.lineSpacing) / self.lineNumber;
CGFloat itemH;
//计算item高
if (self.block != nil) {
itemH = self.block(indexPath, itemW);
}else {
NSAssert(itemH != 0,@"Please implement computeIndexCellHeightWithWidthBlock Method");
}
//计算item的frame
CGRect frame;
frame.size = CGSizeMake(itemW, itemH);
//循环遍历找出高度最短行
__block NSString *lineMinHeight = @"0";
[_dicOfheight enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSNumber *obj, BOOL *stop) {
if ([_dicOfheight[lineMinHeight] floatValue] > [obj floatValue]) {
lineMinHeight = key;
}
}];
int line = [lineMinHeight intValue];
//找出最短行后,计算item位置
frame.origin = CGPointMake(self.sectionInset.left + line * (itemW + self.lineSpacing), [_dicOfheight[lineMinHeight] floatValue]);
_dicOfheight[lineMinHeight] = @(frame.size.height + self.rowSpacing + [_dicOfheight[lineMinHeight] floatValue]);
attr.frame = frame;
return attr;
}
/**
* 设置计算高度block方法
*
* @param block 计算item高度的block
*/
- (void)computeIndexCellHeightWithWidthBlock:(CGFloat (^)(NSIndexPath *, CGFloat))block {
if (self.block != block) {
self.block = block;
}
}