学习资料
自定义 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
个人总结
等宽不等高(固定列数)瀑布流原理
从上至下,创建一个列数的数组存储每列的当前总高度,比如有3列,则数组为columnWidthArray[3],初始化值都为0。
遍历设置每个item的LayoutAttributes,查找columnWidthArray中最小值,将item放置于此列下面,并且更新此列高度。
当循环完毕,从columnWidthArray中可以取到所有列的高度,当然也就获得了最大的高度,此时ContentSize的高度自然也就得到了。
所以如果item列表是按时间排序,但是因为item布局是每次都放在最小高度列,所以瀑布流的时间是乱序的,这对于强要求时间排序的需求是不能满足的,这也是瀑布流的缺陷。
当然还有更复杂的瀑布流布局,下面的几个开源瀑布流就支持多种布局。时间流布局
顾名思义,时间流当然是按时间排序的,具体可以参考上面时间流的文章。百度/google图片搜索的布局
可以看出他们的布局都是等高的,但每列的列数是不等的,图片的宽度也是不等的。图片是等比例缩放。
可以参考知乎上的这个问题:百度图片的横向瀑布流是怎么实现的?自定义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