iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局

http://my.oschina.net/u/2340880/blog/522806

iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局

一、引言

前几篇博客从UICollectionView的基础应用到设置UICollectionViewFlowLayout更加灵活的进行布局，但都限制在系统为我们准备好的布局框架中，还是有一些局限性，例如，如果我要进行瀑布流似的不定高布局，前面的方法就很难满足我们的需求了，如下：





这种布局无疑在app的应用中更加广泛，商品的展示，书架书目的展示，都会倾向于采用这样的布局方式，当然，通过自定义FlowLayout，我们也很容易实现。

二、进行自定义瀑布流布局

首先，我们新建一个文件继承于UICollectionViewFlowLayout：

?
为了演示的方面，这里我不错更多的封装，添加一个属性，直接让外界将item个数传递进来，我们把重心方法重写布局的方法上：

?
前面说过，UICollectionViewFlowLayout是一个专门用来管理collectionView布局的类，因此，collectionView在进行UI布局前，会通过这个类的对象获取相关的布局信息，FlowLayout类将这些布局信息全部存放在了一个数组中，数组中是UICollectionViewLayoutAttributes类，这个类是对item布局的具体设置，以后咱们在讨论这个类。总之，FlowLayout类将每个item的位置等布局信息放在一个数组中，在collectionView布局时，会调用FlowLayout类layoutAttributesForElementsInRect：方法来获取这个布局配置数组。因此，我们需要重写这个方法，返回我们自定义的配置数组，另外，FlowLayout类在进行布局之前，会调用prepareLayout方法，所以我们可以重写这个方法，在里面对我们的自定义配置数据进行一些设置。

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

* 跟踪效果：当到达要显示的区域时
会计算所有显示item的属性
* 一旦计算完成
所有的属性会被缓存 不会再次计算
* @return 返回布局属性(UICollectionViewLayoutAttributes)数组

简单来说，自定义一个FlowLayout布局类就是两个步骤：

1、设计好我们的布局配置数据 prepareLayout方法中

2、返回我们的配置数组 layoutAttributesForElementsInRect方法中

示例代码如下：

?
自定义完成FlowLayout后，我们在ViewController中进行使用：

?
运行效果就是我们引言中的截图。

三、UICollectionViewLayoutAttributes类中我们可以配置的属性

通过上面的例子，我们可以了解，collectionView的item布局其实是LayoutAttributes类具体配置的，这个类可以配置的布局属性不止是frame这么简单，其中还有许多属性：

?
通过上面的属性，可以布局出各式各样的炫酷效果，正如一句话：没有做不到，只有想不到。