兩個(gè)文件PNWaterfallLayout.h PNWaterfallLayout.m也比較容易理解本鸣，繼承自UICollectionViewLayout類。
自定義layout需要實(shí)現(xiàn)三個(gè)方法:
1、提前計(jì)算好喜德，item的position和collectionView的size逛绵，這個(gè)方法在初始化layout后自動(dòng)調(diào)用，可以在該方法中初始化一些自定義的變量參數(shù)
- (void)prepareLayout;
2频伤、返回collectionView的contentSize （注：事先需要找出最大的y值）
- (CGSize)collectionViewContentSize;
3恳谎、返回某個(gè)特定區(qū)域的布局的屬性的，返回所有元素的布局rect： 所有元素的布局（header+item+footer）
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
PNWaterfallLayout.h文件：
1剂买、定義協(xié)議protocol PNWaterfallLayoutDelegate
/// 求item得高度--傳width是為了顯示圖片成比例不變形
- (CGFloat)collectionView:(UICollectionView *)collection layout:(PNWaterfallLayout *)layout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;
/// 求header得size
- (CGSize)collectionView:(UICollectionView *)collection layout:(PNWaterfallLayout *)layout referenceSizeForHeaderInSection:(NSInteger)section;
/// 求footer得size
- (CGSize)collectionView:(UICollectionView *)collection layout:(PNWaterfallLayout *)layout referenceSizeForFooterInSection:(NSInteger)section;
定義屬性：為了在外部更夠修改賦值
/// itemSize 每個(gè)item的大小
@property(nonatomic, assign) CGSize itemSize;
/// 行間距 行與行之間的間距
@property(nonatomic, assign) CGFloat lineSpace;
/// 列間距 列與列之間的間距
@property(nonatomic, assign) CGFloat InteritemSpace;
#warning 每組四周的insets
@property(nonatomic, assign) UIEdgeInsets sectionInset;
/// 列數(shù)
@property(nonatomic, assign) CGFloat colCount;
/// 代理
@property(nonatomic,weak) id<PNWaterfallLayoutDelegate> delegate;
PNWaterfallLayout.m文件
設(shè)置默認(rèn)值惠爽，為了防止用戶沒有給變量賦值
static const CGFloat inset = 10;
static const CGFloat colCount = 3;
@interface PNWaterfallLayout ()
/// 通過計(jì)算用于存放每一列的最大Y值字典
@property(nonatomic, strong) NSMutableDictionary *columnMaxYDic;
@end
重寫三個(gè)方法
1、- (void)prepareLayout初始化layout時(shí)候自動(dòng)調(diào)用
- (void)prepareLayout
{
[super prepareLayout];
// 默認(rèn)值
// 列數(shù)
self.colCount = self.colCount?self.colCount:colCount;
// 行間距
self.lineSpace = self.lineSpace?self.lineSpace:inset;
// 列間距
self.InteritemSpace = self.InteritemSpace?self.InteritemSpace:inset;
// 組inset
self.sectionInset = UIEdgeInsetsMake(inset, inset, inset, inset);
// 字典初始化
self.columnMaxYDic = [NSMutableDictionary dictionary];
}
2瞬哼、返回collectionView的contentSize 先需要找出列中最大的 y值
- (CGSize)collectionViewContentSize
{
[super collectionViewContentSize];
__block NSNumber *maxCol = @(0);
[self.columnMaxYDic enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
if ([obj floatValue] > [self.columnMaxYDic[maxCol] floatValue]) {
maxCol = key; // 記錄最大y的列索引
}
}];
return CGSizeMake(0, [self.columnMaxYDic[maxCol] floatValue]);
}
3婚肆、返回某個(gè)特定區(qū)域的布局的屬性的，返回所有元素的布局
rect： 所有元素的布局（header+item+footer）
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
/// 初始化每一列的最大Y值 @0
for (int i = 0; i < self.colCount; i ++) {
self.columnMaxYDic[@(i)] = @0;
}
// 獲得所有元素的屬性
NSMutableArray *attrsArray = [NSMutableArray array];
for (NSInteger i = 0; i < [self.collectionView numberOfSections]; i++) {
// 1坐慰、header
UICollectionViewLayoutAttributes *headerAtts = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:[NSIndexPath indexPathForItem:0 inSection:i]];
[attrsArray addObject:headerAtts];
//2较性、 items
NSInteger count = [self.collectionView numberOfItemsInSection:i];
for (NSInteger j = 0; j < count; j++) {
UICollectionViewLayoutAttributes *itemAtts = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:j inSection:i]];
[attrsArray addObject:itemAtts];
}
//3、 footer
UICollectionViewLayoutAttributes *footerAtts = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter atIndexPath:[NSIndexPath indexPathForItem:0 inSection:i]];
[attrsArray addObject:footerAtts];
}
return attrsArray;
}
獲得item attributes-----根據(jù)不同的indexPath給出布局
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
__block NSNumber *minCol = @(0);
// 找出三列中结胀，最小的Y的索引 赞咙，遍歷存放最大Y值得字典
[self.columnMaxYDic enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
if ([obj floatValue] < [self.columnMaxYDic[minCol] floatValue]) {
minCol = key;
}
}];
// 寬度
CGFloat itemWidth = ([UIScreen mainScreen].bounds.size.width - self.sectionInset.left - self.sectionInset.right - (self.colCount-1) * self.lineSpace) / self.colCount;
// 高度
CGFloat itemHeight = 0;
if ([self.delegate respondsToSelector:@selector(collectionView:layout:heightForWidth:atIndexPath:)]) {
itemHeight = [self.delegate collectionView:self.collectionView layout:self heightForWidth:itemWidth atIndexPath:indexPath];
}
// 更新最小Y對(duì)應(yīng)列的高度
CGFloat x = self.sectionInset.left + (itemWidth + self.InteritemSpace)* [minCol intValue];
CGFloat space = 0;
if (indexPath.item < self.colCount) { // 最頂部的item
space = 0;
}else
{
// 非頂部的item
space = self.lineSpace;
}
CGFloat y = [self.columnMaxYDic[minCol] floatValue] + space;
self.columnMaxYDic[minCol] = @(y + itemHeight);
#warning cell item
// 計(jì)算位置
UICollectionViewLayoutAttributes *attrItem = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrItem.frame = CGRectMake(x, y, itemWidth, itemHeight);
return attrItem;
}
獲得header與footer attributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath
{
// 找出最高的列
__block NSNumber *maxCol = @(0);
[self.columnMaxYDic enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
if ([obj floatValue] > [self.columnMaxYDic[maxCol] floatValue]) {
maxCol = key;
}
}];
// headerView
if ([UICollectionElementKindSectionHeader isEqualToString:elementKind]) {
UICollectionViewLayoutAttributes *attri = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader withIndexPath:indexPath];
// 求出header的size
CGSize size = CGSizeZero;
if ([self.delegate respondsToSelector:@selector(collectionView:layout:referenceSizeForHeaderInSection:)]) {
size = [self.delegate collectionView:self.collectionView layout:self referenceSizeForHeaderInSection:indexPath.section];
}
CGFloat x = self.sectionInset.left;
CGFloat y = [self.columnMaxYDic[maxCol] floatValue] + self.sectionInset.top;
// 更新所有列的高度
for (NSNumber *key in self.columnMaxYDic.allKeys) {
self.columnMaxYDic[key] = @(y + size.height);
}
attri.frame = CGRectMake(x, y, size.width, size.height);
return attri;
}
// footerView
UICollectionViewLayoutAttributes *attri = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:indexPath];
// 求出footerView的size
CGSize size = CGSizeZero;
if ([self.delegate respondsToSelector:@selector(collectionView:layout:referenceSizeForFooterInSection:)]) {
size = [self.delegate collectionView:self.collectionView layout:self referenceSizeForFooterInSection:indexPath.section];
}
CGFloat x = self.sectionInset.left;
CGFloat y = [self.columnMaxYDic[maxCol] floatValue];
// 更新所有列的高度
for (NSNumber *key in self.columnMaxYDic.allKeys) {
self.columnMaxYDic[key] = @(y + size.height);
}
attri.frame = CGRectMake(x, y, size.width, size.height);
return attri;
}
@end