模仿UITableView创建自己的瀑布流控制器

1.瀑布流

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

QQ20150916-4.png

2.瀑布流中需要注意的点

  1. cell的添加顺序:瀑布流布局中,每一行的cell摆放的位置并不是按顺序摆放,而是优先添加在上一行中高度最短的列中。如果不是按照最短高度所在的列优先添加,就会导致列遇列之间高度相差越来越大,接下来我们用图片来总结理解为什么要这样做。

QQ20150916-2.png

QQ20150916-3.png

选择了按最短列优先添加需要我们做的是,在每次添加后,需要找到总列数中,高度最短的一列,需要我们写一个比较列数高度最小的比较算法,用一个数组装入不同列的高度,选出高度最短的列号作为下次添加的列号。

  1. cell的创建规则:在瀑布流中,由于数据比较多,不能一次性创建所有的cell,这样会造成内存的浪费。我们可以发现,当cell出现在屏幕上(肉眼可以观察到的位置)时,我们才有必要把这个cell显示出来,就如UITableViewCell一样,需要的时候才创建,不需要的时候放在缓存池里,创建cell的时候优先在缓存池中查找有无可循环利用的cell。

    总结:在创建cell的时候,我们的规则是,优先从缓存池中寻找可循环利用的cell,有的话直接使用cell,没有可循环利用的话再创建。

3.结构设计

要显示一个瀑布流布局,首先我们要有数据,于是我们可以创建数据源的protocol,我们需要知道每个cell的高度和点击cell的事件处理等,我们可以创建瀑布流控件的代理delegate用来监听控制器点击事件。怎么样,是不是感觉这个结构很熟悉呢,这不就是我们天天在用的UITableView本来的结构吗?

我们先来看一下UITableView是怎么展示数据的:

  1. 调用数据源的下面方法得知一共有多少组数据

  1. 调用数据源的下面方法得知每一组有多少行数据

  1. 调用数据源的下面方法得知每一行显示什么内容

好了,这样的结构我们再熟悉不过了,我们接着来模范UITableView来创建属于我们自己的瀑布流控制器

QQ20150915-1.png
  1. 首先我们需要知道我们数据源中需要显示多少个cell、每个index索引显示对应的是哪个cell、每一行需要显示多少列。
  2. 在代理中,我们需要知道用户点击了是哪个cell,每一个index所对应的cell的高度是多少。
  3. 在瀑布流控件中,我们仅仅需要像UITableView一样暴露dataSource、delegate属性,和一些常用的公共方法

4.实现效果

在需要实现瀑布流的程序中,可以直接把我们生成的类作为控件来使用,就能轻松达到瀑布流的效果,如下:

5.完整的实现文件代码

以后需要用到瀑布流的时候,直接拖入文件像UITableView那样调用就可以使用了~怎么样,是不是很方便呢?

6.后记:

需要demo的我再fa最近开始学习swift,由OC转化为swift希望学起来比较快,希望学习的步伐能越来越快,还请各位前辈们多多指导

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部