一碟案、起源
最近一個(gè)朋友需要實(shí)現(xiàn)一個(gè)UI效果愿险，其實(shí)說起來也是很簡(jiǎn)單的東西，就是：
- 需要實(shí)現(xiàn)一個(gè)UICollectionView的瀑布流布局价说。
- 相比較網(wǎng)上不同之處在于辆亏，其不止有一個(gè)Section。
- SectionHeader需要可以能夠?qū)崿F(xiàn)粘滯的效果鳖目。
二扮叨、準(zhǔn)備
現(xiàn)在網(wǎng)上資料豐富，要實(shí)現(xiàn)這個(gè)功能并不復(fù)雜领迈，自定義UICollectionViewLayout我也相信大家很容易就可以實(shí)現(xiàn)彻磁，完全不在話下。github也有大把實(shí)現(xiàn)了單組瀑布流或者是SectionHeader粘滯效果的的Demo狸捅，我也是在別人的肩膀上望遠(yuǎn)衷蜓，寫下這邊博客，權(quán)當(dāng)分享以及自己筆記所用尘喝。
下面簡(jiǎn)單介紹：
** 自定義UICollectionViewLayout有以下幾個(gè)方法需要重點(diǎn)關(guān)照**
- -(CGSize)collectionViewContentSize // 該方法返回的是CollectionView的內(nèi)容尺寸磁浇，UICollectionView繼承自UIScrollView，因此必須“告訴”它自己的ContentSize才能確定滾動(dòng)的范圍朽褪。
- -(NSArray )layoutAttributesForElementsInRect:(CGRect)rect // 返回rect中的所有的元素的布局屬性置吓，其NSArray中保存的對(duì)象都是“UICollectionViewLayoutAttributes”*。
- -(UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPath // 該方法返回對(duì)應(yīng)IndexPath位置的Cell布局屬性（即UICollectionViewLayoutAttributes對(duì)象）缔赠。
- -(UICollectionViewLayoutAttributes*)layoutAttributesForSupplementaryViewOfKind:(NSString*)kind atIndexPath:(NSIndexPath*)indexPath // 該方法返回對(duì)應(yīng)IndexPath位置的SupplementaryView布局屬性衍锚，如果沒有SupplementaryView可不實(shí)現(xiàn)（包括UICollectionElementKindSectionFooter與 UICollectionElementKindSectionHeader）。
- -(UICollectionViewLayoutAttributes*)layoutAttributesForDecorationViewOfKind:(NSString*)decorationViewKind atIndexPath:(NSIndexPath *)indexPath // 返回對(duì)應(yīng)于indexPath的位置的裝飾視圖的布局屬性嗤堰，如果沒有裝飾視圖可不實(shí)現(xiàn)戴质。
- -(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds // 當(dāng)邊界發(fā)生變化時(shí)，是否刷新布局（如果返回YES梁棠，則每次都會(huì)重新計(jì)算布局信息）置森。
首先，程序調(diào)用-(void)prepareLayout符糊，在自定有Layout中凫海，一般在該方法中初始需要的參數(shù)。
之后男娄，-(CGSize) collectionViewContentSize將被調(diào)用行贪，以確定collection應(yīng)該占據(jù)的尺寸漾稀。
接下來-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect被調(diào)用，返回UICollectionViewLayoutAttributes來決定UICollectionView這種元素的展現(xiàn)方式和位置等信息建瘫。
再細(xì)的地方就廢話不多說崭捍，浪費(fèi)大家時(shí)間，還不明白的朋友請(qǐng)參考：
UICollectionViewLayout Class Reference
ObjC中國(guó)-自定義 Collection View 布局
葉孤城：UICollectionView自定義布局教程——Pinterest
喵神-WWDC 2012 Session筆記
三啰脚、Just Do It殷蛇！
代碼部分總是沒什么說的，因?yàn)槿魏卧诔绦騿T面前橄浓，任何文字都是蒼白的粒梦，還是“上代碼”這三個(gè)字來得更鏗鏘有力：Demo地址
主要有以下地方，簡(jiǎn)單介紹：
- 如果需要實(shí)現(xiàn)SectionHeader的粘滯效果荸实，需要設(shè)置layout的needPinSectionHeaders屬性為YES匀们，同時(shí)可以控制其懸浮的位置，設(shè)置distanceFromVisibleTopPosition的數(shù)值即可准给，該屬性只有在needPinSectionHeaders=YES的時(shí)候才有效泄朴，默認(rèn)為0，實(shí)現(xiàn)類似于UITableView的SectionHeader粘滯效果露氮。
- 可以通過delegate或者直接設(shè)值的方式來控制顯示的部分屬性祖灰，比如行距，列距沦辙，每行顯示的列數(shù)夫植，顯示的內(nèi)邊距等等，如果同時(shí)實(shí)現(xiàn)油讯，則優(yōu)先使用delegate中的返回值。這些控制屬性并不是必須實(shí)現(xiàn)的延欠，其有默認(rèn)值陌兑，可以不必傳入。
- 代理中有一個(gè)必須實(shí)現(xiàn)的方法 -(CGFloat)layout:(HPCollectionViewWaterfallLayout*)layout heightForItemAtIndexPath:(NSIndexPath*)indexPath由捎，其返回的是IndexPath對(duì)應(yīng)位置的Cell的高度兔综。
就只說這么多了。
寫在最后
這個(gè)Demo完成匆匆狞玛，還有很多需要改進(jìn)的地方软驰，請(qǐng)大家不吝賜教，下載詳細(xì)代碼請(qǐng)點(diǎn)擊
心肪，有任何問題歡迎留言或者Email交流（Email:huangpan0422@gmail.com）锭亏。
其中SectionHeader粘滯功能參考自SectionHeaders粘滯效果
