瀑布流布局

//
//  ZSWaterLayout.h
//  02-瀑布流
//
//  Created by ZhuiYi on 14/12/27.
//  Copyright (c) 2014年 ZhuiYi. All rights reserved.
//

#import <UIKit/UIKit.h>
@class ZSWaterLayout;

@protocol ZSWaterLayoutDelegate <NSObject>
/**
 *  返回四周的间距(默认为10)
 *
 *  @param waterLayout 布局
 *
 *  @return 四周的间距
 */
- (UIEdgeInsets)insetsInWaterLayout:(ZSWaterLayout *)waterLayout;
/**
 *  Supplementary View的四周间距
 *
 *  @param elementKind Supplementary View 类型
 *  @param indexPath   IndexPath
 *
 *  @return 四周间距
 */
- (UIEdgeInsets)insetsOfSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
/**
 *  返回有多少列(默认为3)
 *
 *  @param waterLayout 布局
 *
 *  @return 有多少列
 */
- (NSInteger)columNumberInwaterLayout:(ZSWaterLayout *)waterLayout;
/**
 *  返回每列的间距(默认为10)
 *
 *  @param waterLayout 布局
 *
 *  @return 每列的间距
 */
- (CGFloat)columInsetInWaterLayout:(ZSWaterLayout *)waterLayout;
/**
 *  返回每行的间距(默认为10)
 *
 *  @param waterLayout 布局
 *
 *  @return 每行的间距
 */
- (CGFloat)rowInsetInWaterLayout:(ZSWaterLayout *)waterLayout;

- (CGFloat)supplementaryViewHeightOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
@required
/**
 *  返回每个cell的高度
 *
 *  @param waterLayout 布局
 *  @param indexPath   cell的位置
 *  @param width       cell的宽度
 *
 *  @return 根据宽度来算出cell的高度
 */
- (CGFloat)waterLayout:(ZSWaterLayout *)waterLayout heightForItemAtIndexPath:(NSIndexPath *)indexPath width:(CGFloat)width;
@end

@interface ZSWaterLayout : UICollectionViewLayout

@property (nonatomic, weak) id<ZSWaterLayoutDelegate> delegate;

@end
#import "CommunityArticleWaterLayout.h"



// 默认每行最多显示多少列
static NSInteger defaultMaxCol = 3;
// 默认每行的间距
static CGFloat  defaultRowInset = 10;
// 默认每列的间距
static CGFloat  defaultColInset = 10;
// 默认的四周的间距
static CGFloat  defaultInset = 10;

@interface ZSWaterLayout ()
// 最大Y值的数组,用于确定cell应该放在哪一列
@property (nonatomic, strong) NSMutableArray *maxYArray;
// 布局的数组
@property (nonatomic, strong) NSMutableArray *attributesArray;
@end

@implementation ZSWaterLayout
#pragma mark - 懒加载
- (NSMutableArray *)maxYArray
{
    if (!_maxYArray)
    {
        _maxYArray = [NSMutableArray array];
    }
    return _maxYArray;
}
- (NSArray *)attributesArray
{
    if (!_attributesArray) {
        _attributesArray = [[NSMutableArray alloc] init];
    }
    return _attributesArray;
}
#pragma mark - 有新的可见范围时就刷新
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
#pragma mark - 这个方法比下面的方法调用少,计算就放在这个方法中
- (void)prepareLayout
{
    [self.maxYArray removeAllObjects];
    [self.attributesArray removeAllObjects];
    for (NSInteger i = 0; i < [self getColumNumber]; i ++)
    {
        self.maxYArray[i] = @0.0;
    }
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < count; i ++)
    {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attributesArray addObject:attrs];
    }
}
#pragma mark - 可见范围内的cell布局
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray *retArray = [NSMutableArray array];
    
    for (UICollectionViewLayoutAttributes *att in _attributesArray) {
        if (CGRectIntersectsRect(att.frame, rect)) {
            [retArray addObject:att];
        }
    }
    
    if ([self.delegate respondsToSelector:@selector(supplementaryViewHeightOfKind:atIndexPath:)]) {
        CGFloat height = [self.delegate supplementaryViewHeightOfKind:UICollectionElementKindSectionHeader atIndexPath:[NSIndexPath indexPathForItem:1 inSection:0]];
        if (([self getInsets].top + height) >= rect.origin.y) {
            [retArray addObject:[self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:[NSIndexPath indexPathForItem:1 inSection:0]]];
        }
    }
    return retArray;
//    return self.attributesArray;
}

#pragma mark - 对应位置的cell的布局
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 四周的间距
    UIEdgeInsets inset = [self getInsets];
    // 每列的间距
    CGFloat colInset = [self getColumInset];
    // 每行的间距
    CGFloat rowInset = [self getRowInset];
    // 总列数
    NSInteger maxCol = [self getColumNumber];
    CGFloat supplementaryHeight = [self getSupplementaryViewHeightOfKind:UICollectionElementKindSectionHeader atIndexPath:indexPath];
    // collection的宽度
    CGFloat collectionWidth = self.collectionView.bounds.size.width;
    // 每个cell的宽高
    CGFloat cellWidth = (collectionWidth - inset.left - inset.right - (maxCol - 1) * colInset) / maxCol;
    CGFloat cellHeight = [self.delegate waterLayout:self heightForItemAtIndexPath:indexPath width:cellWidth];
    // 最小的Y值
    CGFloat minMaxY = [self.maxYArray[0] doubleValue];
    // 最小Y值的列号
    NSInteger minCol = 0;
    for (int i = 0; i < maxCol; i ++) {
        CGFloat maxY = [self.maxYArray[i] doubleValue];
        if (maxY < minMaxY) {
            minMaxY = maxY;
            minCol = i;
        }
    }
    CGFloat cellX = inset.left + (colInset + cellWidth) * minCol;
    UIEdgeInsets supplementaryInsets = [self getSupplementaryViewInsetsOfKind:UICollectionElementKindSectionHeader atIndexPath:indexPath];
    CGFloat cellY = minMaxY == 0 ? (minMaxY + inset.top + supplementaryInsets.top + supplementaryHeight):(minMaxY+rowInset);
    UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attribute.frame = CGRectMake(cellX, cellY, cellWidth, cellHeight);
    // 刷新Y值的高度
    self.maxYArray[minCol] = @(CGRectGetMaxY(attribute.frame));
    return attribute;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:elementKind withIndexPath:indexPath];
    if ([elementKind isEqualToString:UICollectionElementKindSectionFooter]) {
        attribute.frame = CGRectMake(0, 0, 0, 0);
        return attribute;
    }
    
    if ([self getSupplementaryViewHeightOfKind:elementKind atIndexPath:indexPath] == 0) {
        attribute.frame = CGRectMake(0, 0, 0, 0);
    }
    else {
        UIEdgeInsets insets = [self getSupplementaryViewInsetsOfKind:elementKind atIndexPath:indexPath];
        attribute.frame = CGRectMake(insets.left, insets.top, self.collectionView.bounds.size.width - insets.left - insets.right, [self getSupplementaryViewHeightOfKind:elementKind atIndexPath:(NSIndexPath *)indexPath]);
    }
    return attribute;
}
#pragma mark - cellectionView的滚动范围
- (CGSize)collectionViewContentSize
{
    if (self.maxYArray.count)
    {
        // 最大的Y值
        CGFloat maxMaxY = [self.maxYArray[0] doubleValue];
        for (int i = 0; i < [self getColumNumber]; i ++)
        {
            CGFloat maxY = [self.maxYArray[i] doubleValue];
            if (maxY > maxMaxY)
            {
                maxMaxY = maxY;
            }
        }
        return CGSizeMake(self.collectionView.bounds.size.width, maxMaxY+[self getInsets].bottom);
    }
    return CGSizeMake(0, 0);
}
#pragma mark - 根据代理得到列数
- (NSInteger)getColumNumber
{
    if ([self.delegate respondsToSelector:@selector(columNumberInwaterLayout:)])
    {
        return [self.delegate columNumberInwaterLayout:self];
    }
    return defaultMaxCol;
}
#pragma mark - 根据代理得到四周的间距
- (UIEdgeInsets)getInsets
{
    if ([self.delegate respondsToSelector:@selector(insetsInWaterLayout:)])
    {
        return [self.delegate insetsInWaterLayout:self];
    }
    return UIEdgeInsetsMake(defaultInset, defaultInset, defaultInset, defaultInset);
}
- (UIEdgeInsets)getSupplementaryViewInsetsOfKind:(NSString*)elementKind atIndexPath:(NSIndexPath *)indexPath {
    if ([self.delegate respondsToSelector:@selector(insetsOfSupplementaryViewOfKind:atIndexPath:)]) {
        return [self.delegate insetsOfSupplementaryViewOfKind:elementKind atIndexPath:indexPath];
    }
    return UIEdgeInsetsMake(0, 0, 0, 0);
}
#pragma mark - 根据代理得到每列之间的间距
- (CGFloat)getColumInset
{
    if ([self.delegate respondsToSelector:@selector(columInsetInWaterLayout:)])
    {
        return [self.delegate columInsetInWaterLayout:self];
    }
    return defaultColInset;
}
#pragma mark - 根据代理得到每行之间的间距
- (CGFloat)getRowInset
{
    if ([self.delegate respondsToSelector:@selector(rowInsetInWaterLayout:)])
    {
        return [self.delegate rowInsetInWaterLayout:self];
    }
    return defaultRowInset;
}

- (CGFloat) getSupplementaryViewHeightOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {
    if ([self.delegate respondsToSelector:@selector(supplementaryViewHeightOfKind:atIndexPath:)]) {
        return [self.delegate supplementaryViewHeightOfKind:elementKind atIndexPath:indexPath];
    }
    return 0;
}

@end

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容