通过上篇强大的UICollectionView介绍了UICollectionView的基本方法，下面我们来利用UICollectionViewLayout实现瀑布流；
自定义UICollectionViewLayout
YANCollectionViewLayout.h
@class YANCollectionViewLayout;
@protocol YANCollectionViewLayoutDelegate <NSObject>
@required
- (CGFloat)collectionViewLayout:(YANCollectionViewLayout *)layout heightForItemAtIndext:(NSInteger)index itemWidth:(CGFloat)itemWidth;
@optional
/**
* 设置列数
*
*/
- (CGFloat)columnCountInCollectionFlowLayout:(YANCollectionViewLayout *)layout;
/**
* 设置列间距
*
*/
- (CGFloat)columnMarginInCollectionFlowLayout:(YANCollectionViewLayout *)layout;
/**
* 设置行间距
*
*/
- (CGFloat)rowMarginInCollectionFlowLayout:(YANCollectionViewLayout *)layout;
/**
* 设置边缘间距
*/
- (UIEdgeInsets)edgeInsetsInCollectionFlowLayout:(YANCollectionViewLayout *)layout;
@end
@interface YANCollectionViewLayout : UICollectionViewLayout
@property(nonatomic,weak)id<YANCollectionViewLayoutDelegate> delegate_;
@end
YANCollectionViewLayout.m
/**
* 默认的列数
*/
static const NSInteger defaultColumnCount = 3;
/**
* 默认的列间距
*/
static const CGFloat defaultColumnMargin = 10;
/**
* 默认的行间距
*/
static const CGFloat defaultRowMargin = 10;
/**
* 默认的边缘间距
*/
static const UIEdgeInsets defaultEdgeInsets = {10,10,10,10};
@interface YANCollectionViewLayout ()
/**
* 存放cell的布局属性
*/
@property(nonatomic, strong)NSMutableArray *cellArray;
/**
* 存放列的高度
*/
@property(nonatomic, strong)NSMutableArray *columnHeights;
/**
* cell内容的高度
*/
@property(nonatomic, assign)CGFloat contentHeight;
- (CGFloat)rowMargin;
- (CGFloat)columnMargin;
- (CGFloat)columnCount;
- (UIEdgeInsets)edgeInsets;
@end
@implementation YANCollectionViewLayout
- (CGFloat)rowMargin{ // 没有设置就使用默认值
if ([self.delegate_ respondsToSelector:@selector(rowMarginInCollectionFlowLayout:)]) {
return [self.delegate_ rowMarginInCollectionFlowLayout:self];
}else{
return defaultRowMargin;
}
}
- (CGFloat)columnMargin{
if ([self.delegate_ respondsToSelector:@selector(columnMarginInCollectionFlowLayout:)]) {
return [self.delegate_ columnMarginInCollectionFlowLayout:self];
}else{
return defaultColumnMargin;
}
}
- (CGFloat)columnCount{
if ([self.delegate_ respondsToSelector:@selector(columnCountInCollectionFlowLayout:)]) {
return [self.delegate_ columnCountInCollectionFlowLayout:self];
}else{
return defaultColumnCount;
}
}
- (UIEdgeInsets)edgeInsets{
if ([self.delegate_ respondsToSelector:@selector(edgeInsetsInCollectionFlowLayout:)]) {
return [self.delegate_ edgeInsetsInCollectionFlowLayout:self];
}else{
return defaultEdgeInsets;
}
}
- (NSMutableArray *)cellArray{
if (!_cellArray) {
_cellArray = [NSMutableArray array];
}
return _cellArray;
}
- (NSMutableArray *)columnHeights{
if (!_columnHeights) {
_columnHeights = [NSMutableArray array];
}
return _columnHeights;
}
- (void)prepareLayout{
[super prepareLayout];
self.contentHeight = 0;
[self.columnHeights removeAllObjects];
for (NSInteger i = 0; i < self.columnCount; i ++) {
[self.columnHeights addObject:@(self.edgeInsets.top)];
}
[self.cellArray removeAllObjects];
NSInteger count = [self.collectionView numberOfItemsInSection:0]; // 第一组有多少个cell
for (NSInteger i = 0; i < count; i ++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *atts = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.cellArray addObject:atts];
}
}
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
return self.cellArray;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGFloat collectionViewW = self.collectionView.frame.size.width;
CGFloat w = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right - (self.columnCount - 1)* self.columnMargin)/self.columnCount;
CGFloat h = [self.delegate_ collectionViewLayout:self heightForItemAtIndext:indexPath.item itemWidth:w];
NSInteger destColumn = 0;
CGFloat minColumnHight = [self.columnHeights[0] doubleValue];
for (NSInteger i = 1; i < self.columnCount; i ++) {
CGFloat columnHeigt = [self.columnHeights[i] doubleValue];
if (minColumnHight > columnHeigt) {
minColumnHight = columnHeigt;
destColumn = i;
}
}
CGFloat x = self.edgeInsets.left + destColumn *(w + self.columnMargin);
CGFloat y = minColumnHight;
if (y != self.edgeInsets.top) {
y += self.rowMargin;
}
attrs.frame = CGRectMake(x, y, w, h);
// 记录每一列的高度
self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
if (self.contentHeight < columnHeight) {
self.contentHeight = columnHeight;
}
return attrs;
}
- (CGSize)collectionViewContentSize{
//collectionView的滚动大小
return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);
}
@end
viewController.m
static NSString *ID = @"cell";
- (void)viewDidLoad {
[super viewDidLoad];
YANCollectionViewLayout *layout = [[YANCollectionViewLayout alloc] init];
layout.delegate_ = self;
UICollectionView *collection = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
collection.dataSource = self;
collection.delegate = self;
collection.contentInset = UIEdgeInsetsMake(20, 0, 0, 0);
collection.backgroundColor = [UIColor grayColor];
[self.view addSubview:collection];
self.collectionView = collection;
[collection registerClass:[YANCollectionCell class] forCellWithReuseIdentifier:ID];
}
#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.shopInfo.count;
}
#pragma mark - UICollectionViewDelegate
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
YANCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
cell.backgroundColor = [UIColor grayColor];
cell.shop = self.shopInfo[indexPath.item];
return cell;
}
#pragma mark - YANCollectionViewLayoutDelegate
- (CGFloat)collectionViewLayout:(YANCollectionViewLayout *)layout heightForItemAtIndext:(NSInteger)index itemWidth:(CGFloat)itemWidth{
YANShop *shop = self.shopInfo[index];
return itemWidth * shop.h / shop.w;
}
- (CGFloat)rowMarginInCollectionFlowLayout:(YANCollectionViewLayout *)layout{
return 15;
}
- (CGFloat)columnCountInCollectionFlowLayout:(YANCollectionViewLayout *)layout{
return 4;
}
- (CGFloat)columnMarginInCollectionFlowLayout:(YANCollectionViewLayout *)layout{
return 15;
}
- (UIEdgeInsets)edgeInsetsInCollectionFlowLayout:(YANCollectionViewLayout *)layout{
return UIEdgeInsetsMake(10, 10, 10, 10);
}
效果图
