ios基于UICollectionView的 横向瀑布流

在网上找了许久，一直没有发现有提供横向瀑布流效果的。在项目中用到了我就在垂直瀑布流的基础上，进行了修改，做出了横向瀑布流的效果。同时也对一些UICollectionView的属性进行简单的注释，方便以后查阅。

1、首先要写一个继承与NSObject的布局类，记录每一行（列）目前的宽度（高度）。再添加一个新的cell的时候进行判断比较，添加到最短的那一行或一列上。

2、横向的布局类入下，垂直的话就是讲对应的X Y轴数据进行调整即可。
WaterfallFlowLayout为布局类，继承与NSObject。.h文件入下

#import <UIKit/UIKit.h>
// 类的前置声明
@class WaterfallFlowLayout;

@protocol WaterfallFlowLayoutDelegate <NSObject>
// 动态获取 item 宽度
- (CGFloat) WaterfallFlowLayout:(WaterfallFlowLayout *) layout widthForItemAtIndexPath:(NSIndexPath *) indexPath;

@end

@interface WaterfallFlowLayout : UICollectionViewLayout

@property (nonatomic,assign) id <WaterfallFlowLayoutDelegate> delegate;

@property (nonatomic) NSInteger numberOfColumns;
@property (nonatomic) CGFloat minimumLineSpacing;
@property (nonatomic) CGFloat minimumInteritemSpacing;
@property (nonatomic) UIEdgeInsets sectionInset;
@end

WaterfallFlowLayout为布局类，继承与NSObject。.m文件入下

#import "WaterfallFlowLayout.h"

@interface WaterfallFlowLayout ()
{
    // 用于记录每一列布局到的宽度
    NSMutableArray * _widthOfColumns;
    // 用于保存所有item的属性 (frame)
    NSMutableArray * _itemsAttributes;
}

@end


@implementation WaterfallFlowLayout
- (void) setNumberOfColumns:(NSInteger)numberOfColumns {
    if (_numberOfColumns != numberOfColumns) {
        _numberOfColumns = numberOfColumns;
        // 让原有布局失效，需要重新布局
        [self invalidateLayout];
    }
}

- (void)setMinimumLineSpacing:(CGFloat)minimumLineSpacing {
    if (_minimumLineSpacing != minimumLineSpacing) {
        _minimumLineSpacing = minimumLineSpacing;
        [self invalidateLayout];
    }
}
- (void)setMinimumInteritemSpacing:(CGFloat)minimumInteritemSpacing {
    if (_minimumInteritemSpacing != minimumInteritemSpacing) {
        _minimumInteritemSpacing = minimumInteritemSpacing;
        [self invalidateLayout];
    }
}

- (void)setSectionInset:(UIEdgeInsets)sectionInset {
    if (!UIEdgeInsetsEqualToEdgeInsets(_sectionInset, sectionInset)) {
        _sectionInset = sectionInset;
        [self invalidateLayout];
    }
}

//重写方法 1: 准备布局
-(void)prepareLayout {
    [super prepareLayout];
    // 真正的布局在这里完成
    if (_itemsAttributes) {
        [_itemsAttributes removeAllObjects];
    }else {
        _itemsAttributes = [[NSMutableArray alloc] init];
    }
    if (_widthOfColumns) {
        [_widthOfColumns removeAllObjects];
    }else {
        _widthOfColumns = [[NSMutableArray alloc] init];
    }
    for (NSInteger i = 0; i < self.numberOfColumns; i++) {
        // 初始化每一列的宽度(默认为上边距)
//        _heightOfColumns[i] = @(self.sectionInset.top);
        [_widthOfColumns addObject:@(self.sectionInset.left)];
    }
    // item的总数
    NSInteger count = [self.collectionView numberOfItemsInSection:0];

//    CGFloat itemWidth = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (_numberOfColumns-1) * _minimumInteritemSpacing )/_numberOfColumns;

    // 总的高度 (集合视图的宽度)
    CGFloat totalHeight = self.collectionView.frame.size.height;
    // 有效的高度 (出去间隔及边界)
    CGFloat validHeight = totalHeight - self.sectionInset.top - self.self.sectionInset.bottom - (self.numberOfColumns-1) * self.minimumInteritemSpacing;
    // 每一个item的高度
    CGFloat itemHeight = validHeight/self.numberOfColumns;


    // 设置item的默认宽度
    CGFloat itemWidth = itemHeight;
    for (NSInteger i = 0; i<count; i++) {
        // 最短列的下标
        NSInteger index = [self indexOfShortestColumn];
        CGFloat originY = self.sectionInset.top + index * (itemHeight +self.minimumInteritemSpacing);
        CGFloat originX = [_widthOfColumns[index] floatValue];
        // 构造 indexPath
        NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        // 动态的获取宽度
        if ([self.delegate respondsToSelector:@selector(WaterfallFlowLayout:widthForItemAtIndexPath:)]) {
            itemWidth = [self.delegate WaterfallFlowLayout:self widthForItemAtIndexPath:indexPath];
        }
        UICollectionViewLayoutAttributes * attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

        attr.frame = CGRectMake(originX, originY, itemWidth, itemHeight);
        // 保存 item 的属性 到数组中
        [_itemsAttributes addObject:attr];
        // 更新布局到的一列(最短列) 的高度
        _widthOfColumns[index] = @(originX + itemWidth + self.minimumLineSpacing);
    }
    // 刷新显示
    [self.collectionView reloadData];
}



//重写方法 2: 返回指定区域的item的属性(frame)
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSMutableArray * array = [NSMutableArray array];

    for (UICollectionViewLayoutAttributes * attr in _itemsAttributes) {
        // 判断两个矩形是否有交集
        if (CGRectIntersectsRect(attr.frame, rect)) {
            [array addObject:attr];
        }
    }
    return array;
}



//重写方法 3: 返回内容的尺寸
-(CGSize)collectionViewContentSize {
    CGFloat height = self.collectionView.frame.size.height;
    NSInteger index = [self indexOfLongestColumn];
    CGFloat width = [_widthOfColumns[index] floatValue] + self.sectionInset.right - self.minimumLineSpacing;
    return CGSizeMake(width, height);
}


- (NSInteger) indexOfLongestColumn {
    NSInteger index = 0;
    for (NSInteger i = 0; i<_numberOfColumns; i++) {
        if ([_widthOfColumns[i] floatValue] > [_widthOfColumns[index] floatValue]) {
            index = i;
        }
    }

    return index;
}

- (NSInteger) indexOfShortestColumn {
    NSInteger index = 0;
    for (NSInteger i = 0; i<_numberOfColumns; i++) {
        if ([_widthOfColumns[i] floatValue] < [_widthOfColumns[index] floatValue]) {
            index = i;
        }
    }

    return index;
}
@end

3、上边的这个布局类可以直接复制粘贴下来。然后就是创建你的UICollectionView
在collectionView的cell中可以直接创建imageView或者是label添加到cell上，用来显示数据。
collectionView默认section缩进左右是0
调节横向cell间距
layout.minimumLineSpacing = 10;
调节纵向cell间距
layout.minimumInteritemSpacing = 20;
调节瀑布流显示的行数，当然了你的collectionView的高（宽）足够显示几行（列）就会自动显示多上行（列）；
layout.numberOfColumns = 3;

#import "RootViewController.h"
#import "WaterfallFlowLayout.h"

@interface RootViewController () <UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,WaterfallFlowLayoutDelegate>
{
    UICollectionView * _collectionView;
}
@end

@implementation RootViewController
- (void)dealloc {
    [_collectionView release];
    [super dealloc];

}

- (void)viewDidLoad {
    [super viewDidLoad];
    // 创建集合视图
    [self createCollectionView];
}

- (UICollectionViewLayout *)createLayout {
#if 1
    WaterfallFlowLayout * layout = [[WaterfallFlowLayout alloc] init];
    layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
    layout.minimumLineSpacing = 10;
    layout.minimumInteritemSpacing = 20;
    layout.numberOfColumns = 3;
    layout.delegate = self;
    [self performSelector:@selector(changeLayout:) withObject:layout afterDelay:3];

#else
    UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc] init];

    layout.minimumLineSpacing = 10;
    layout.itemSize = CGSizeMake(150, 100);
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

#endif


    return [layout autorelease];
}
- (void)changeLayout:(WaterfallFlowLayout *)layout {
    layout.numberOfColumns = 3;
}


- (void)createCollectionView {
    CGRect frame = CGRectMake(0, 20, VIEW_WIDTH, VIEW_HEIGHT-20);
    _collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:[self createLayout]];

    _collectionView.backgroundColor = [UIColor cyanColor];
    // 设置代理
    _collectionView.delegate = self;
    _collectionView.dataSource = self;

    // 注册cell 类型 及 复用标识
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellId"];


    [self.view addSubview:_collectionView];
}

#pragma mark - UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 102;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellId" forIndexPath:indexPath];

    UILabel * label = nil;
    NSArray * array = cell.contentView.subviews;
    if (array.count) {
        label = array[0];
    }else {
        label = [[UILabel alloc] init];
//        label.frame = cell.bounds;
        label.textAlignment = NSTextAlignmentCenter;
        label.font = [UIFont systemFontOfSize:50];
        [cell.contentView addSubview:label];
        [label release];
    }
    label.frame = cell.bounds;
    label.text = [NSString stringWithFormat:@"%ld",indexPath.item];
    label.textColor = [UIColor whiteColor];
    cell.backgroundColor = RandomColor;

    return cell;
}

- (CGSize) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake( arc4random()%100+200, 110);
}

-(CGFloat) WaterfallFlowLayout:(WaterfallFlowLayout *)layout widthForItemAtIndexPath:(NSIndexPath *)indexPath{
    return arc4random()%150+50;
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"点击了第 %ld 组，第 %ld 行",indexPath.section,indexPath.row);
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}


@end

实现的效果如下