自定义 UICollectionViewLayout

在2012年的WWDC大会上,苹果发布了UICollectionView,这种控件在布局上给了我们很大的帮助。虽然在delegate和datasource这两个代理上,UICollectionView和UITableView很像,但在布局上,UICollectionView使用的是UICollectionViewLayout,而UITableView直接使用系统提供的样式就行了。本文将使用【瀑布流】来进行UICollectionViewLayout讲解。


环境信息
Mac OS X 10.10.2
xcode 6
iOS 8.1

正文:

我们先来看看常见的、比较炫酷的UICollectionView布局(图片摘自猫神博客):

一、UICollectionViewLayout基础知识

如果要自定义UICollectionViewLayout,需要实现以下几个方法,按初始化layout后,系统执行顺序排列:


// 初始化layout后自动调动,可以在该方法中初始化一些自定义的变量参数
- (void)prepareLayout;

// 设置UICollectionView的内容大小,道理与UIScrollView的contentSize类似
- (CGSize)collectionViewContentSize;

// 初始Layout外观,返回所有的布局属性
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;

// 根据不同的indexPath,给出布局
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

二、瀑布流

1. 首先来看下最终效果

2. 逻辑与原理

逻辑其实很简单,就是给出每一个cell的坐标。想要定位一个控件,需要CGRectMake四个参数,下面就来分析下这四个参数:

  • y : 首先我们看到的这个demo是两列的,所以肯定有两个Y轴起始点,分为左侧和右侧。
  • x : 然后除Y轴不同外,左侧和右侧的X轴也不相同。
  • width : 关于width我们可以通过一行两列,然后每一个cell的间距来得到。
  • height: height是在collectionView中定义的,layout获得不到,所以我们选择用代理,在collectionView中设置。

3. 需要的定义的变量


@property (assign, nonatomic) CGFloat leftY; // 左侧起始Y轴
@property (assign, nonatomic) CGFloat rightY; // 右侧起始Y轴
@property (assign, nonatomic) NSInteger cellCount; // cell个数
@property (assign, nonatomic) CGFloat itemWidth; // cell宽度
@property (assign, nonatomic) CGFloat insert; // 间距

4. 代理的定义


@protocol CustomCollectionViewLayoutDelegate

@required
- (CGSize)collectionView:(UICollectionView *)collectionView collectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout sizeOfItemAtIndexPath:(NSIndexPath *)indexPath;

@end

@property (assign, nonatomic) id layoutDelegate;

5. 方法的实现



- (void)prepareLayout {

[super prepareLayout];
// 初始化参数
_cellCount = [self.collectionView numberOfItemsInSection:0]; // cell个数,直接从collectionView中获得
_insert = 10; // 设置间距
_itemWidth = SCREEN_WIDTH / 2 - 3 * _insert; // cell宽度
}

- (CGSize)collectionViewContentSize {

return CGSizeMake(SCREEN_WIDTH, MAX(_leftY, _rightY));
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

_leftY = _insert; // 左边起始Y轴
_rightY = _insert; // 右边起始Y轴

NSMutableArray *attributes = [[NSMutableArray alloc] init];

for (int i = 0; i < self.cellCount; i ++) {

NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
[attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
}

return attributes;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {

// 获取代理中返回的每一个cell的大小
CGSize itemSize = [self.layoutDelegate collectionView:self.collectionView collectionViewLayout:self sizeOfItemAtIndexPath:indexPath];

// 防止代理中给的size.width大于(或小于)layout中定义的width,所以等比例缩放size
CGFloat itemHeight = floorf(itemSize.height * self.itemWidth / itemSize.width);

UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

// 判断当前的item应该在左侧还是右侧
BOOL isLeft = _leftY < _rightY;

if (isLeft) {

CGFloat x = _insert; // x轴起始位置为0
attributes.frame = CGRectMake(x, _leftY, _itemWidth, itemHeight);
_leftY += itemHeight + _insert; // 设置新的Y起点
}

if (!isLeft) {

CGFloat x = _itemWidth + 2 * _insert;
attributes.frame = CGRectMake(x, _rightY, _itemWidth, itemHeight);
_rightY += itemHeight + _insert;
}

return attributes;
}

三、Demo下载地址

https://github.com/saitjr/WaterFlowLayoutDemo.git