集合视图的自定义布局

收集的一些关于集合视图自定义布局相关的资料, 主要根据 Raywenderlich 网站的集合视图自定义布局系列视频进行整理而来, 待续.

这个系列的视频对应有文字描述, 详见这个链接.

下面是一些收集到的关于集合视图布局的相关文章:

https://engineering.shopspring.com/dynamic-cell-sizing-in-uicollectionview-fd95f614ef80

http://nantingyang.com/ios-uicollectionviewcell-custom-heights-autolayout-multiline-labels/

https://janthielemann.de/ios-development/self-sizing-uicollectionviewcells-ios-10-swift-3/

https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/CreatingCustomLayouts/CreatingCustomLayouts.html

https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/Introduction/Introduction.html#//apple_ref/doc/uid/TP40012334-CH1-SW1

https://github.com/Instagram/IGListKit

https://github.com/search?o=desc&q=uicollectionView&s=stars&type=Repositories

https://stackoverflow.com/questions/25895311/uicollectionview-self-sizing-cells-with-auto-layout

简介

集合视图的类是 UICollectionView , 在编程时, 集合视图的布局对应有专门类型的对象, 即 UICollectionViewLayout 对象.

重要内容!!!

集合视图的布局过程是:

UICollectionView 通过 Layout 对象来获取 UICollectionViewLayoutAttributes 对象(layout 对象中会提供 UICollectionViewLayoutAttributes 对象), 将这些 UICollectionViewLayoutAttributes 对象传入 Cell 或者是补充视图, 从而完成布局(因为 Cell 有一个 applyLayoutAttributes 方法接收的就是 UICollectionViewLayoutAttributes 对象作为参数).

这个就是集合视图自定义布局时候需要的核心知识, 所有的自定义布局都是基于返回恰当的 UICollectionViewLayoutAttributes 来完成的.

布局对象通过向 Cell 提供 UICollectionViewLayoutAttributes 对象或其子类对象, 可以完成将许多额外信息传入 cell 或补充视图, 从而动态改变布局.

集合视图的布局对象一般有两种类型, 一种是内置的 UICollectionViewFlowLayout 或其子类, 这类布局类型被称为网格布局.

而另外一种是自定义的 Layout, 一般都是直接继承自 UICollectionViewLayout 类型, 通过实现如下三个方法来向 Cell 提供特定的 UICollectionViewLayoutAttributes 对象, 从而实现许多更为复杂的布局.

自定义 Layout 时主要实现三个方法如下:

• contentSize: 集合视图使用这个方法来获取它的内容尺寸
• prepare: 当有布局事件触发的时候都会调用这个方法, 在这个方法中计算每个 cell 对应的 UICollectionViewLayoutAttributes, 以及 contentSize.
• layoutAttributesForElements(in rect: CGRect) : collectionView 通过这个方法来读取计算出来的 UICollectionViewLayoutAttributes 对象.

自定义布局在 prepare 方法计算的时候, 为了保证高性能, 一般都需要设置一个缓存将计算的所有 UICollectionViewLayoutAttributes 对象缓存下来, 这样之后如果没有布局改变, 就不需要再次计算了.

自定义 UICollectionViewLayout

自定义布局操作就是计算 UICollectionViewLayoutAttributes, 然后缓存起来, 并累加 contentSize.

为什么需要自定义布局, 而不是直接使用 FlowLayout 的主要原因:

FlowLayout 主要是网格, 有行的概念, 而有些情况下并不想通过行来管理这些 Item.

首先在外部布局好集合视图, 将集合视图的布局设置为自定义布局对象, 再设置好集合视图的代理和数据源. 另外, 设置好集合视图使用的可重用 Cell 类.

重要: 对于适应宽高比的图片框而言, 如果将其放入 Cell 内, 为保证宽高比正常, 就需要由外部提供宽高比, 或者是宽高的信息. 一般的做法是给布局也设置一个代理, 代理给出布局对象在计算布局时需要的元素信息, 从而实现计算. 这个做法在许多其他场景下也经常会借鉴.

自定义 UICollectionViewFlowLayout

针对这个主题没有什么可以展开讲的, 只有根据实际工作中遇到的情况灵活处理. 之后可以列出一些实际例子出来以供参考.