iOS 使用UICollectionViewFlowLayout实现完美瀑布流.分区,增加,删除,刷新优化

最近在开发中需要实现瀑布流效果,便动手实现了下,将使用方法记录下,有不足之处也希望可以和大家沟通交流.

WaterLayout

实现瀑布流的使用的关键类是 UICollectionViewFlowLayout,如果我们不继承直接使用的话,系统已经帮我们实现了一些效果,比如横向或者竖向滑动,然后配置一些属性或者遵循UICollectionViewDelegateFlowLayout,来显示个性化的效果.但是有些布局需要我们去实现,比如瀑布流的效果.UICollectionViewFlowLayout非常强大,我们基本上可以任何我们想要的效果,在这里只说一下瀑布流的实现,其他效果可以根据这个来进行不同的变形和修改.

UICollectionViewFlowLayout描述

实现自定义布局的关键方法

其实上面三个返回布局的方法原理一样,就是根据在UICollectionViewFlowLayout属性配置或者代理方法中返回的属性系统所做的最原始计算,我们需要根据系统所计算的结果来修改成我们想要的结果,如果不适用系统的结果,直接使用自己计算的也是可以的.

下面说一下布局方面具体的使用:

我们的计算布局支持多分去,这里用字典sectionInfos储存多分区的计算信息.

计算原理如下,我们需要获取到存在几个分区,然后布局该分区内的每个item的信息

如果我们从上自下依次布局显示的话,那么应该是:

头视图->分区内每个item的信息->脚视图->然后装饰视图

装饰视图可以根据具体需求来计算,不一定在最后.在该效果中,我用绿色的背景来实现装饰视图,由于覆盖当前的分区,所以需要知道footer的计算结果,因此装饰视图的计算放在了最后,用来知道当前分区的Y轴最大值.

如果只需要实现这种布局,那么每个条目对应的系统可以就不可以不用重写.

在返回contentsize的方法中返回具体的大小

让我们的collectionview实现上面的代理方法,用来实现不同的布局配置,这样我们就可以像系统的布局代理一样,方便调用.下面看一下控制器中的实现,实现不同的代理方法,用来配置不同分区的内容显示

实现上面的方法,那么瀑布流的效果已经可以实现了.

下面说一下如何滑动到具体的分区,或者item位置.

实现上面的方法,我们可以灵活的滑动到任何元素的位置.

在控制器中调用,这里我们写死的第二个分区的第4个条目,方便测试

可以看到这里很精确的滑动到输入的位置.

下面说一下我们优化增加,删除和刷新效果

添加三个数组,用来实现不同的 *** 作,系统有四种不同的 *** 作事件.

下面看一下具体的实现:

这里我们实现了增加,删除和刷新条目的动画

这里要说下面,在增加条目的时候会调用的layoutAttributesForItem,返回的不是我们计算好的attribute,会导致显示动画异常,所以在这我们做额外的 *** 作,如果已经有计算好的布局,那么执行使用,然后在增加的代理方法中实现具体的变化 *** 作.现在我们的增加,删除实现可CGAffineTransform和alpha变化的效果,刷新实现了alpha变化的效果.如果需要实现其他的动画效果,可以根据这个来进行变化.

如有问题可以留言和大家沟通交流~~

在网页中实现瀑布流效果方法：

1.传统多列浮动

各列固定宽度，并且左浮动

一列中的数据块为一组，列中的每个数据块依次排列即可

更多数据加载时，需要分别插入到不同的列上。

2. CSS3 定义

由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现

#container {

-webkit-column-count: 5；

/*-webkit-column-gap: 10px；

-webkit-column-rule: 5px solid #333；

-webkit-column-width: 210px；*/

-moz-column-count: 5；

/*-moz-column-gap: 20px；

-moz-column-rule: 5px solid #333；

-moz-column-width: 210px；*/

column-count: 5；

/*column-gap: 10px；

column-rule: 5px solid #333；

column-width: 210px；*/

}

column-count 为列数column-gap 为每列间隔距离column-rule 为间隔边线大小column-width 为每列宽度当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。

3.绝对定位

可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整。

瀑布流是比较流行且有意思的布局，例如：蘑菇街、凡客达人等网站就是使用瀑布流实现的。

瀑布流的优点就是简化了翻页 *** 作，使网页一目了然，尤其是图片为主的页面特别合适该布局。

好，废话不多说，下面说说实现原理。

就是在包裹的容器div里建几个div作为列，如下：

这几个div宽固定，间隔固定。

写javascript，实现一个添加元素的方法，往那几个div列添加元素即可。

添加元素要实现的功能就是，在添加的时候判断一下哪个列的高度最小，就在那个列里添加元素。

实现一个滚动触底调用添加元素方法的方法即可。

实现效果图：

---