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