UICollectionView及瀑布流、时间流

学习资料

---

自定义 Collection View 布局
UICollectionView 瀑布流

官方Collection View Programming Guide for iOS文档翻译

---

官方文档的学习非常重要，特别是第六章，以下是中文翻译：
Collection View Programming Guide for iOS---(一)----About iOS Collection Views
Collection View Programming Guide for iOS---(二)----Collection View Basics
Collection View Programming Guide for iOS---(三)---Designing Your Data Source and Delegate
Collection View Programming Guide for iOS---(四)---Using the Flow Layout
Collection View Programming Guide for iOS---(五)---Incorporating Gesture Support
Collection View Programming Guide for iOS---(六)---Creating Custom Layouts
Collection View Programming Guide for iOS---(七)---Custom Layouts: A Worked Example

时间流

---

CollectionView Timeline Layout

个人总结

---

1. 等宽不等高(固定列数)瀑布流原理
   从上至下，创建一个列数的数组存储每列的当前总高度，比如有3列，则数组为columnWidthArray[3]，初始化值都为0。
   遍历设置每个item的LayoutAttributes，查找columnWidthArray中最小值，将item放置于此列下面，并且更新此列高度。
   当循环完毕，从columnWidthArray中可以取到所有列的高度，当然也就获得了最大的高度，此时ContentSize的高度自然也就得到了。
   所以如果item列表是按时间排序，但是因为item布局是每次都放在最小高度列，所以瀑布流的时间是乱序的，这对于强要求时间排序的需求是不能满足的，这也是瀑布流的缺陷。
   当然还有更复杂的瀑布流布局，下面的几个开源瀑布流就支持多种布局。

2. 时间流布局
   顾名思义，时间流当然是按时间排序的，具体可以参考上面时间流的文章。

3. 百度/google图片搜索的布局
   可以看出他们的布局都是等高的，但每列的列数是不等的，图片的宽度也是不等的。图片是等比例缩放。
   可以参考知乎上的这个问题：百度图片的横向瀑布流是怎么实现的？

4. 自定义UICollectionViewFlowLayout/UICollectionViewLayout
   自定义Layout可以创建出任意布局，因为所有item的布局都是开发者自己决定的，item之间甚至可以任意重叠，UICollectionViewFlowLayout默认的section的header/footer其实只是supplementary view的一种实现，用户可以可以创建任意多的supplementary view而且任意布局，除了supplementary view还有decoration view，具体的参考官方文档：
   Collection View Programming Guide for iOS---(六)---Creating Custom Layouts
   Collection View Programming Guide for iOS---(七)---Custom Layouts: A Worked Example
   以及上面的时间流文章。

几个开源瀑布流

---

https://github.com/SeacenLiu/WaterfallLayout/blob/master/WaterfallLayout/WaterfallLayout.swift
https://github.com/codingZero/XRWaterfallLayout
https://github.com/wsl2ls/WSLWaterFlowLayout