[記錄]如何實作 UICollectioinView 的 Header & Footer ; 使用 UICollectionViewDelegateFlowLayout

Xcode : 6.0.1



順利的將資料圖檔載入至設定的 UICollectioinView 之後, 找了一堆這個物件的參數設定發現, 如果不是使用 User Interface Xib 檔的方式進行物件的設計, 而是使用 code 產生的方式, 不容易發現可以產生 Table Sectioin Header & Footer 的地方。

在 Xib 檔的地方至少還能發現 Attributes Inspector 這個頁面的 Collection View 參數的部分, 還能勾選：

結果是因為要實作某些 method 之後, 才有辦法完成 Table Section Header & Footer 的部分. 

原本在 UICollectionView 的宣告的地方, 是宣告成這個樣子：

@interface UILibraryTabPageView : UICollectionView <UICollectionViewDataSource, UICollectionViewDelegate>

並沒有實作到和  Table Section Header & Footer  有關的地方, 而且在一個針對 UICollectionView 說明還滿詳細的網頁裡頭, 有提到相關的資訊, 卻沒有強調一下啊, 所以沒經驗的時候會容易忽略掉。

該網頁：http://my.oschina.net/sunqichao/blog/182623 

以下節錄部分內容：

//  ------------------------------------------------------------------------------------------------
1.2.2 自定义 Flow Layout 
Flow Layout可以定制的主要功能如下
n Item size
n Line spacing
n Inter cell spacing
n Scrolling direction
n Header and footer size
n Section Inset
下面我们来详细介绍这些可定制的功能。
这里需要对通过全局和delegate定制进行说明一下：
几乎所有的定制属性都是在UICollectionViewFlowLayout中，delegate实际上是collection view的delegate。UICollectionViewDelegateFlowLayout只是对UICollectionViewDelegate进行了一些扩展。 
//  ------------------------------------------------------------------------------------------------

最後面這一段是最重要的提示了。
如果要實作 Header & Footer 就是要先將原本引入定義的 UICollectionViewDelegate 置換成 UICollectionViewDelegateFlowLayout，
所以需要將原本的 UICollectionView 的宣告修改成：

@interface UILibraryTabPageView : UICollectionView <UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>

然後再進行以下 method 的實作，就可以讓 Collection 的 Table Section Header 或是 Footer 正常運作 ：

1、實作 Header：

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;

// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;


2、實作 Footer：


- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;


注意事項：
 1、關於第二個 method “ - collectionView: viewForSupplementaryElementOfKind: atIndexPath: ” 實作時，可以透過 viewForSupplementaryElementOfKind:(NSString *)kind 來進行判斷，用來個別產生 Header 或是 Footer 的物件。

2、在實作 Header 和測試的過程發現，如果在 method  “ - collectionView: layout: referenceSizeForHeaderInSection: ” 的地方，將回傳值的 CGSize 的 Hight 值設定為 0 時，將造成程式運作過程 method  “ - collectionView: viewForSupplementaryElementOfKind: atIndexPath: ”  不會被呼叫。
※  Create UICollectionView 時的 UICollectionViewFlowLayout 的 UICollectionViewScrollDirection scrollDirection 初始設定是被指定成 UICollectionViewScrollDirectionVertical，不曉得有沒有對應的關係就是了，這邊就沒有繼續測試下去了。 ^^”

3、若要使用 User Interface Xib 檔進行 Head & Footer 的設計，可以在 New Object 的畫面選項 Subclass of 的地方填入 UICollectionReusableView，或是需要使用的時候在 Object Library 的地方找到這個物件並進行拖曳。

   










----
這個部分因為不像 UITableView 在標頭檔裡頭就能很快地找到對應的資訊，所以還費了一些功夫找資料。 =..=“