用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;

@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值-

 

博客地址：https://blog.csdn.net/qq_39085422/article/details/78612132 我只掌握了RecyclerView基础用法，所以参考别人博客的代码实现。
作为一名热爱学习的Android开发工程si，刷微博的时候居然还想着技术呢，觉得自己也是够够了........哈哈哈
最近在系统学习自定义View这一块的知识，前面几篇基本都是理论知识，这篇博客着重从实战来加强对自定义View的理解与运用。实现的两种效果，分别代表自定义View与自定义ViewGroup。