Collection Views介紹
1.1. Collection View
1.1.1. Collection View元素
1.1.2. 數據模型與交互
1.1.3. 內容的顯示
1.2. Flow Layout
1.2.1. 核心概念
1.2.2. 自定義Flow Layout
1.2.3. Flow Layout總結
1.3. 總結
1.4. 更多
注：1樓是 Collection View ：傳送門
2樓是 Flow Layout及其它：傳送門
3樓提供一個示例程序 ：傳送門
Collection Views介紹
關鍵字： UICollectionView
UICollectionViewDataSource
UICollectionViewDelegate
UICollectionViewCell
UICollectionViewLayout
UICollectionViewFlowLayout
UICollectionViewLayoutAttributes
1.1. Collection View
全家福：
UICollectionView, UITableView, NSCollectionView
n 不直接等效於NSCollectionView
n 也不替代UITableView----親兄弟
爲什麼要使用Collection Views呢？
n 可以高度定製內容的展現
n 管理數據最佳的做法
n 即使是處理大量數據，也非常的高效
我們先來感性的認識一下Collection Views，下面這幅圖就是用Collection Views實現的一個照片牆顯示。
1.1.1. Collection View的元素
從上圖中，我們可以看出Collection View的整體構成元素，共有三個要素，分別如下
n Cells(單元格)
n Supplementary Views（補充的view，相當於TableView的頁眉和頁腳）
n Decoration Views（裝飾View，用於裝飾整個Collection View的）
我們可以分解一下這個照片牆，來描述上面的三個元素都對應什麼內容
Cells如下圖，即每一張圖片
Supplementary Views如下圖右邊白色的文字部分
Decoration Views如下圖
最終，三個元素，就構成了照片牆，下面是元素構成圖
1.1.2. 數據模型與交互
數據模型(數據提供者UICollectionViewDataSource)
UICollectionViewDataSource是一個代理，主要用於向Collection View提供數據。
UICollectionViewDataSource的主要功能：
n Section數目
n Section裏面有多少item
n 提供Cell和supplementary view設置
下面我們依次講解這些功能。
1、numberOfSectionsInCollectionView:
下圖中有多少個sections呢？
答案是2個。即我們在numberOfSectionsInCollectionView:方法中返回2即可。
2、collectionView:numberOfItemsInSection:
下圖中section 0中有多少個items呢？
答案是4個。即我們在collectionView:numberOfItemsInSection:方法中對應的section 0返回4即可。
3、collectionView:cellForItemAtIndexPath:
下圖中section 0 item 0位置處應該顯示什麼內容呢？
答案是使用方法collectionView:cellForItemAtIndexPath:返回一個cell，類似下圖中的一個view。
4、Cell和View的重用
下面通過5個步驟，來演示Cell和View的重用
1）如下圖，左邊是Collection View，右邊是Cell和View的重用隊列，剛開始，左邊的數據顯示內容，右邊的重用隊列還沒有數據。
2）再看下圖，當用戶顯示出了Collection View下面的內容後，Collection View中之前的一些Cell和View就已經不再被顯示了，這是，系統是如何處理呢？
3）看這裏，系統會把不用的Cell和View添加到重用隊列中，以備後面使用。
4）如何再次被使用呢，請看下圖，當用戶繼續往下看內容的時候，系統就會提供隊列中存在的Cell和View供使用。
5）最終使用效果如下圖
5、iOS6中，Cell重用改善
在iOS6中，我們可以更加方便的使用Cell，系統總是爲我們初始化Cell。我們可以直接使用。只需要簡單的按照兩步走即可：
1） 必須使用下面的方法進行Cell類的註冊：
- (void)registerClass:forCellWithReuseIdentifier:
- (void)registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
- (void)registerNib:forCellWithReuseIdentifier:
- (void)registerNib:forSupplementaryViewOfKind:withReuseIdentifier:
2） 從隊列中取出一個Cell,具體方法如下：
- (id)dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
下面我們通過實際的代碼，來演示具體如何進行Cell的重用
第一步：在collection view中進行設置（Cell類的註冊）
// In collection view setup...
[collectionView registerClass:[MyCell class]
forCellWithReuseIdentifier:@”MY_CELL_ID”]
第二步：在下面的函數中，從隊列中取出一個cell即可。並且再也不用對cell進行空值判斷，以做額外的初始化操作。Cell的一切初始化工作都由系統爲我們做好了。我們只需要對cell進行一些賦值等操作即可。
- (UICollectionView*)collectionView:(UICollectionView*)cv
cellForItemAtIndexPath:(NSIndexPath*)indexPath
{
MyCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”];
if (!cell) {
// Well, nothing really. Never again
}
// Configure the cell's content
cell.imageView.image = ...
return cell;
}
交互(UICollectionViewDelegate)
UICollectionViewDelegate的主要功能：
n 控制cell的高亮
n 控制cell的選擇
n 在cell上支持菜單操作，如下圖
選擇和高亮在iOS中都有所改進，高亮和flow的精確定位都非常好控制。
下面列出了常用的相關方法，開發者可以參考sdk的幫助文檔，進行詳細瞭解。
1） 管理cell的高亮
collectionView:shouldHighlightItemAtIndexPath:
collectionView:didHighlightItemAtIndexPath:
collectionView:didUnhighlightItemAtIndexPath:
這個方法collectionView:shouldHighlightItemAtIndexPath:的效果如下圖所示：注意右邊selected和highlighted的值。
這個方法collectionView: didHighlightItemAtIndexPath:的效果如下圖所示：注意右邊selected和highlighted的值。
2） 管理cell的選擇
collectionView:shouldSelectItemAtIndexPath:
collectionView:didSelectItemAtIndexPath:
collectionView:shouldDeselectItemAtIndexPath:
collectionView:didDeselectItemAtIndexPath:
collectionView:shouldSelectItemAtIndexPath:的效果如下圖
下面兩個方法
collectionView:didUnhighlightItemAtIndexPath:
collectionView:didSelectItemAtIndexPath:的效果如下圖所示：
1.1.3. 內容的顯示
UICollectionViewCell Styles
iOS6中沒有預定義cell的Style
Collection View跟蹤cell的選擇和高亮
通過設置cell的highlight和selection屬性(包含子視圖)
如果進行了相關配置，這可以切換background view和selected background view
我們來按順序看下面四幅圖。開發者可以自行領悟規律。
下圖是UICollectionView相關的類圖，從圖中我們可以看到
l UICollectionView繼承自UIScrollView，
l 尊循UICollectionViewDelegate和UICollectionViewDataSource兩個協議
l 管理UICollectionViewCell
圖中貌似還缺點東西，什麼呢？對了，就是缺少Layout。我們需要Layout對cell和其它的view進行佈局。再看下圖，圖中多了UICollectionViewLayout和UICollectionViewFlowLayout。
下面我們對UICollectionViewLayout進行介紹
使用自己的layout（UICollectionViewLayout）
UICollectionViewLayout是一個抽象基類，你需要繼承自他，來爲collection view生成layout信息。Layout對象的作用是決定cells，Supplementary views和Decoration views在collection view中的佈局位置。
你需要計算如下view的layout屬性
n Cells
n Supplementary views
n Decoration views
系統也爲我們定義了layout屬性，即UICollectionViewLayoutAttributes，它主要包括如下內容：
n 位置
n 大小
n 透明度
n ZIndex
n 轉場
如下面的兩個圖是collection view的layout。
