在移动开发中,瀑布流应该非常普及了.我一直没有完整的写过一个瀑布流,今天搜集了一些资料,看了下系统的文档,大概实现了功能.中间也碰到了一些问题,现在记录下来,一方面方便自己以后回忆,另一反面也希望能帮到大家.
要用UICollectionView实现瀑布流,自定义UICollectionViewLayout和UICollectionViewFlowLayout都可以实现.
UICollectionViewLayout是一个抽象类,是UICollectionViewFlowLayout的父类.用来配置UICollectionView的布局.
UICollectionViewFlowLayout其实是一个系统为我们写好的流水布局.通过自定义UICollectionViewFlowLayout来实现瀑布流,更方便.比如说,系统已经帮我们实现了补充视图和装饰视图.
在这里,我选择的是自定义UICollectionViewLayout来实现瀑布流.根据文档,如果要使用它,需要继承它,并且重写以下几个方法.
-
collectionViewContentSize- 返回collectionView的滚动范围
-
layoutAttributesForElementsInRect:- 返回可视范围内所有cell的布局属性
-
layoutAttributesForItemAtIndexPath:- 返回指定indexPath处的cell的布局属性
-
layoutAttributesForSupplementaryViewOfKind:atIndexPath:- 返回补充视图的布局属性(如果有补充视图)
-
layoutAttributesForDecorationViewOfKind:atIndexPath:- 返回装饰视图的布局属性(如果有装饰视图)
-
shouldInvalidateLayoutForBoundsChange:- 当视图滚动时(可视范围变化时),是否更新视图
在实际应用中,我重写了以下四个方法.调用顺序从上到下
-
prepareLayout该方法在每次布局需要更新(当collectionView第一次显示或者当布局失效)时调用.一般在里面做一些初始化的工作,进行基本的布局. collectionViewContentSizelayoutAttributesForElementsInRect:(CGRect)rectshouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
这个我有一个疑问,因为文档中提示需要重写layoutAttributesForItemAtIndexPath:方法,但是coding中,我发现这个方法从来没有调用过.我猜在UICollectionViewFlowLayout中是系统在layoutAttributesForElementsInRect:方法中调用了layoutAttributesForItemAtIndexPath:方法.而在我自定义的UICollectionViewLayout中,我并没有调用layoutAttributesForItemAtIndexPath:,因此不重写这个方法也可以实现功能.
具体思路如下:
首先一个前提就是各个cell宽度一致.根据总列数来计算cell的宽度.然后根据图片长宽比来检出cell的高度.然后,创建一个数组来保存各列cell的总高度,每次添加cell时,将cell添加到总高度最短的一列.以此类推,就可以计算出各个cell的x,y坐标.然后将各个cell的布局参数缓存起来,在需要时直接调用就行.
具体代码如下:
1.自定义UICollectionViewLayout,并开放接口,设置参数
/** 内边距 */
@property (nonatomic, assign) UIEdgeInsets sectionInsets;
/** 总列数 */
@property (nonatomic, assign) NSInteger numberOfColumns;
/** item之间的行间距 */
@property (nonatomic, assign) CGFloat minimumInteritemSpacing;
/** item之间的列间距 */
@property (nonatomic, assign) CGFloat minimumLineSpacing;
/** 代理属性 */
@property (nonatomic, weak) id<MLWaterflowLayoutDelegate> delegate;
2.定义代理属性,让代理实现获得每个cell的高度
@protocol MLWaterflowLayoutDelegate <NSObject>
/**
计算indexPath位置上的item的高度
@param width item的宽度
@param indexPath item的位置
@return item的高度
*/
- (CGFloat)heightForItemWithWidth:(CGFloat) width AtIndexPath:(NSIndexPath *)indexPath;
@end
3.定义私人成员变量,用于计算
/** 存放所有item的布局属性 */
@property (nonatomic, strong) NSMutableArray *itemAttributesArray;
/** 存放所有列的高度 */
@property (nonatomic, strong) NSMutableArray *columnsHeightArray;
/** item的总数 */
@property (nonatomic, assign) NSInteger numberOfItems;
4.在prepareLayout中计算每个cell的布局,并保存
#pragma mark - 重写父类的布局方法
- (void)prepareLayout {
NSLog(@"%s", __func__);
[self initialColumnsHeightsArray];
[self calculateAttributesForitems];
}
#pragma mark - 自定义方法
/** 初始化self.columnsHeightArray */
- (void)initialColumnsHeightsArray {
//1.避免出错,先清空self.columnsHeightArray
[self.columnsHeightArray removeAllObjects];
//2.根据self.numberOfColumns来初始化self.columnsHeightArray
for (NSInteger i = 0; i < self.numberOfColumns; i ++) {
//为每一个item设置初始高度
[self.columnsHeightArray addObject:@(self.sectionInsets.top)];
}
}
/** 计算所有item的布局属性 */
- (void)calculateAttributesForitems {
for (NSInteger i = 0; i < self.numberOfItems; i ++) {
//根据总列数算出每一个item的宽度
CGFloat itemWidth = ([UIScreen mainScreen].bounds.size.width - self.sectionInsets.left - (self.numberOfColumns - 1) * self.minimumInteritemSpacing - self.sectionInsets.right) / self.numberOfColumns;
//拿到当前高度最小的列的索引
NSInteger shortestIndex = [self getShortestColumnsIndex];
//计算当前item的X坐标
CGFloat itemX = self.sectionInsets.left + (itemWidth + self.minimumInteritemSpacing) * shortestIndex;
//通过代理获得当前item的高度
CGFloat itemHeight = 0;
if ([self.delegate respondsToSelector:@selector(heightForItemWithWidth:AtIndexPath:)]) {
itemHeight = [self.delegate heightForItemWithWidth:itemWidth AtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
}
//计算当前item的Y坐标
CGFloat itemY = [self.columnsHeightArray[shortestIndex] floatValue] + self.minimumLineSpacing;
//将item的布局属性保存到数组
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
attributes.frame = CGRectMake(itemX, itemY, itemWidth, itemHeight);
[self.itemAttributesArray addObject:attributes];
//将高度保存到columnsHeightArray数组中
[self.columnsHeightArray replaceObjectAtIndex:shortestIndex withObject:@(itemY + itemHeight)];
}
}
5.在layoutAttributesForElementsInRect中返回可见视图中的cell的布局属性
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
NSLog(@"%s", __func__);
//创建一个数组来存放显示在屏幕中的item的attributes
NSMutableArray *tempArr = [NSMutableArray array];
//遍历self.itemAttributesArray
for (UICollectionViewLayoutAttributes *attributes in self.itemAttributesArray) {
//判断item是否显示在屏幕中
if (CGRectIntersectsRect(rect, attributes.frame)) {
//如果是,保存到tempArr
[tempArr addObject:attributes];
}
}
return tempArr;
}
6.在collectionViewContentSize中返回UICollectionView的contentSize
- (CGSize)collectionViewContentSize {
NSLog(@"%s", __func__);
return CGSizeMake([UIScreen mainScreen].bounds.size.width, self.sectionInsets.bottom + [self.columnsHeightArray[[self getHighestColumnsIndex]] floatValue]);
}
7.在shouldInvalidateLayoutForBoundsChange中判断在滚动时,是否需要刷新布局属性.如果需要,那么会调用prepareLayout方法,重新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
NSLog(@"%s", __func__);
return NO;
}
