用CHTCollectionViewWaterfallLayout寫瀑布流

用CHTCollectionViewWaterfallLayout寫瀑布流

實現的瀑布流效果圖：

源碼：

WaterfallCell.h 與 WaterfallCell.m

//
//  WaterfallCell.h
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface WaterfallCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView *showImageView;

@end

//
//  WaterfallCell.m
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "WaterfallCell.h"

@implementation WaterfallCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Scale the imageview to fit inside the contentView with the image centered:
        CGRect imageViewFrame = CGRectMake(0.f, 0.f,
                                           CGRectGetMaxX(self.contentView.bounds),
                                           CGRectGetMaxY(self.contentView.bounds));
        _showImageView                  = [UIImageView new];
        _showImageView.contentMode      = UIViewContentModeScaleAspectFill;
        _showImageView.frame            = imageViewFrame;
        _showImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        _showImageView.clipsToBounds    = YES;
        [self addSubview:_showImageView];
        self.layer.borderWidth = 1.f;
    }
    return self;
}

@end

HeaderView.h 與 HeaderView.m

//
//  HeaderView.h
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HeaderView : UICollectionReusableView

@end

//
//  HeaderView.m
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "HeaderView.h"

@implementation HeaderView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.layer.borderWidth = 1.f;
    }
    return self;
}

@end

FooterView.h 與 FooterView.m

//
//  FooterView.h
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface FooterView : UICollectionReusableView

@end

//
//  FooterView.m
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "FooterView.h"

@implementation FooterView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.layer.borderWidth = 1.f;
    }
    return self;
}

@end

使用時候的代碼：

//
//  RootViewController.m
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "RootViewController.h"
#import "CHTCollectionViewWaterfallLayout.h"

#import "WaterfallCell.h"
#import "HeaderView.h"
#import "FooterView.h"

#define CELL_IDENTIFIER   @"WaterfallCell"
#define HEADER_IDENTIFIER @"WaterfallHeader"
#define FOOTER_IDENTIFIER @"WaterfallFooter"

@interface RootViewController ()<UICollectionViewDataSource, CHTCollectionViewDelegateWaterfallLayout>

@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) NSMutableArray   *dataSource;
@property (nonatomic, strong) NSMutableArray   *dataSourceSize;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 數據源
    _dataSource = [NSMutableArray new];
    for (int i = 0; i <= 16; i++)
    {
        [_dataSource addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d", i]]];
    }

    // 初始化佈局
    CHTCollectionViewWaterfallLayout *layout = [[CHTCollectionViewWaterfallLayout alloc] init];
    
    // 設置佈局
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    layout.headerHeight = 100;           // headerView高度
    layout.footerHeight = 100;           // footerView高度
    layout.columnCount  = 4;             // 幾列顯示
    layout.minimumColumnSpacing    = 5;  // cell之間的水平間距
    layout.minimumInteritemSpacing = 5;  // cell之間的垂直間距
    
    // 初始化collectionView
    _collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds
                                         collectionViewLayout:layout];
    _collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    _collectionView.dataSource       = self;
    _collectionView.delegate         = self;
    _collectionView.backgroundColor  = [UIColor whiteColor];
    
    // 註冊cell以及HeaderView，FooterView
    [_collectionView registerClass:[WaterfallCell class]
        forCellWithReuseIdentifier:CELL_IDENTIFIER];
    [_collectionView registerClass:[HeaderView class]
        forSupplementaryViewOfKind:CHTCollectionElementKindSectionHeader
               withReuseIdentifier:HEADER_IDENTIFIER];
    [_collectionView registerClass:[FooterView class]
        forSupplementaryViewOfKind:CHTCollectionElementKindSectionFooter
               withReuseIdentifier:FOOTER_IDENTIFIER];
    
    // 添加到視圖當中
    [self.view addSubview:_collectionView];
}

#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"您點擊了 %@", _dataSource[indexPath.row]);
}

#pragma mark - UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    // 數據源
    return [_dataSource count];
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    // 1個區
    return 1;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 註冊collectionViewCell
    WaterfallCell *cell = \
        (WaterfallCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CELL_IDENTIFIER
                                                                   forIndexPath:indexPath];
    
    UIImage *image           = _dataSource[indexPath.row];
    cell.showImageView.image = image;
    
    return cell;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
           viewForSupplementaryElementOfKind:(NSString *)kind
                                 atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableView = nil;
    
    if ([kind isEqualToString:CHTCollectionElementKindSectionHeader])
    {
        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                          withReuseIdentifier:HEADER_IDENTIFIER
                                                                 forIndexPath:indexPath];
    } else if ([kind isEqualToString:CHTCollectionElementKindSectionFooter])
    {
        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                          withReuseIdentifier:FOOTER_IDENTIFIER
                                                                 forIndexPath:indexPath];
    }
    
    return reusableView;
}

#pragma mark - CHTCollectionViewDelegateWaterfallLayout
- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 用以返回尺寸
    UIImage *image = _dataSource[indexPath.row];
    return image.size;
}

@end

這個代碼再怎麼簡單也會很複雜-_-!!

如下是使用的細節須要注意的地方：

設置的對應關係-

cell中的圖片可不是隨便設置的-

要注意返回每一個cell的size值-