从零开始 UICollectionView (3)–瀑布流

前言

对于许多的项目来说,瀑布流是极其重要的一个UI效果。在这里不深究瀑布流的出现历史,只追求它的实现。我尽可能讲得详细。
其实如果深入的去探索UICollectionView就会发现,它只不过是一个基于UIScrollView的加入重用机制的高度细致的封装控件,所有关于UICollectionView布局的奥秘,都在UICollectionViewLayout的里面。
鉴于这是一个抽象类不能直接使用,通常我们会创建和使用它的子类。

原理:所有的瀑布流都应该基于已知的宽高比例,通过固定的宽(高)来计算另外一个高(宽)。

1.开撸之 UICollectionViewLayout。

1.1 我们首先要写一个继承自UICollectionViewLayout的子类,本Demo中为@interface BJWaterfullLayout : UICollectionViewLayout

由于我们是纵向瀑布流,宽度是固定的,根据宽高比动态生成高度。
所以我们需要写一个代理方法来暴露我们在.m中算好的宽度,来向外界索取数据中的宽高比来生成动态的高度,由于这一步是不可省略的,我们将唯一的这个方法声明为@required

1.2 仔细想想,纵向瀑布流我们需要知道有多少列、列之间的间距、上下行之间的间距、整个section(也就是一个组的所有Cell共同撑起的内容)的内边距也就是UIEdgeInsets
最后我们还得有两个数组,一个数组用来记录每个列的高度,以便于我们寻找最短高度去拼接Item,另一个用来装载所有的Item的UICollectionViewLayoutAttributes对象。
UICollectionViewLayoutAttributes : 装载了每一个对应IndexPath的Item的布局信息。

于是从上面我们得到了所有需要提前准备的东西:

下面是我们必须要重写的几个UICollectionViewLayout的方法,没有它们,我们无法完成整个布局。

1.3 详细代码(columnYArray、attributesArray通过懒加载方式初始化过了、就不贴代码了):

下面是布局layoutAttributesForElementsInRect:和collectionViewContentSize方法:

下面是重头戏layoutAttributesForItemAtIndexPath:方法:

至此,我们的瀑布流的布局类就书写完毕了,我们需要把它和UICollectionView绑定在一起,并且通过UICollectionView的数据源,来提供宽高比从而生成动态高度返回给我们的BJWaterfullLayout的代理使用。
代码如下:

在UICollectionView的懒加载方法中绑定UICollectionView:

下面是BJWaterfullLayoutDelegate中我们强制要求实现的返回动态高度的方法,希望你还记得:

至此,大功告成,我的数据源在Demo文件里面有,你们可以去拿来写Demo用,而具体的基本UICollectionView实现我的从零开始UICollectionView(1)–基本实现里面有,瀑布流效果如下:

瀑布流

这里我们需要聊聊UICollectionViewLayoutAttributes这个类:

这个类在我的理解中,它更像是UICollectionViewCell和UICollectionReusableView的布局属性类,因为它所包含的属性及构造方法,总的来看,都是为布局而诞生的。
它有坐标frame、尺寸size、甚至2D变形transform和3D变形transform3D。这些都能为我们实现一些极其有趣的布局效果。


下节预告:横向动画效果布局及page悬停、增删Item及其动画(基于UICollectionViewLayoutAttributes这个类做的一些有趣的动画和变动)。

1 2 收藏 评论

关于作者:深发

一个乐于探索的技术人。 个人主页 · 我的文章 · 3

相关文章

可能感兴趣的话题



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