ios開發——UICollectionView初階

標籤：ios開發   uicollectionview   

一、功能強大的集合視圖

UICollectionView是一種新的資料展示視圖，最最基本的集合視圖類似於UITableView，就是多行多列展示資料，之前試著用UITableView實現過多行多列展示圖片，不過效果一般而且bug較多。ios開發——用UITableView展示多行多列圖片   而UICollectionView出現後，這種效果就非常非常容易了，不但如此，之前的各種開源社區裡一些瀑布流也變得非常簡單。不過，正如剛才所說，這都是UICollectionView最最基本的形式，實際上，它真正強大的地方在於完全的自訂。你可以繼承UICollectionViewLayout類來建立自己的Layout，進而僅僅通過相對簡短的代碼來實現相當強大的效果。例如蘋果官方的執行個體代碼中的特效：

很熟悉吧？這正是以前開源社區裡的大神們封裝的各種自訂視圖，現在，通過UICollectionViewLayout我們也能結合上CAAnimation實現這種帶炫酷動畫的視圖了。

二、致謝

本文的誕生來自於最近想寫一個課程表，需要用到UICollectionView，特意去網上看了資料。之前我對集合視圖的認識僅僅限於多行多列的TableView，後來看了@onevcat的部落格後才知道這個視圖的強大之處。本文相當於對他的部落格的學習筆記。

三、一些基本概念

一般來說，一個完整的UICollectionView包括以下三個部分：

cell——相當於表格視圖裡的cell，需要通過dataSource來為其指定資料來源，主要功能就是展示圖片或其他資訊，以及處理互動。

Supplementary Views——附加視圖，類比表格視圖裡的header和footer，可有可無，起展示附加資訊的作用。

Decoration Views——裝飾視圖，指cell的背景裝飾，比如iBooks應用裡的背景書架

四、Data Source

如果是實現一個最基本的UICollectionView,也就是像一樣的一個多行多列的表格，那麼過程就與實現UITableView一樣了，為其制定資料來源並實現相應方法即可：

<span style="font-size:18px;">?-numberOfSectionsInCollection:返回有多少Section，可以理解為多少行?-collectionView:numberOfItemsInSection:返回每個Section中有多少內容，可以理解為多少列-collectionView:cellForItemAtIndexPath:返回每個Item，在該方法中進行複用、構造、初始化等操作。</span>

另外也可以指定Supplementary Views

-collectionView:viewForSupplementaryElementOfKind:atIndexPath:

但是沒有制定Decoration Views的方法，因為這個被移到了UICollectionViewLayout中單獨實現。

和UITableView一樣，只有列數和返回Item的那兩個方法是required，其他的是optional，但是一般來說我們通過實現前三個方法可以保證一個簡單地UICollectionView正常工作。

五、關於複用

在UITableView中，我們可以這樣寫來實現cell的複用

<span style="font-size:18px;">- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{    NSString *cellId = @"cellID";    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];    if (cell == nil) {        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellId];    }    return cell;}</span>

即直接取複用cell，如果不存在就建立一個，然而，這種方法在UICollectionView中是行不通的，因為沒有

- dequeueReusableCellWithIdentifier:這樣的方法，只有一個

- dequeueReusableCellWithReuseIdentifier: forIndexPath:方法，這個方法要求必須提前用ReuseIdentifier註冊cell。因此在使用之前必須通過以下四種方法之一來註冊。

<span style="font-size:18px;">-registerClass:forCellWithReuseIdentifier:-registerClass:forSupplementaryViewOfKind:withReuseIdentifier:-registerNib:forCellWithReuseIdentifier:-registerNib:forSupplementaryViewOfKind:withReuseIdentifier:</span>

六、互動處理——Delegate

和UITableView一樣，可以在Delegate中處理單元格cell的點擊事件、設定高亮與選擇狀態等，還支援長按相應菜單。

稍有不同的是，在UICollectionView中可以單獨處理單元格的這些事件，而不是統一處理。具體來說，在方法中多了IndexPath參數，例如：

<span style="font-size:18px;">-?collectionView:shouldHighlightItemAtIndexPath:-?collectionView:didHighlightItemAtIndexPath: -?collectionView:shouldSelectItemAtIndexPath: </span>

這樣處理起來就更加靈活了。

七、UICollectionViewLayout與UICollectionViewFlowLayout

這裡順帶提一下Layout類，這個是UICollectionView的與UITableView最大的不同之處，也是讓UICollectionView功能那麼強大的精髓之處，因此這個會單獨拿一篇博文來記錄。

UICollectionViewLayout決定了我們的UICollectionView是如何被展示到螢幕上的，它決定著cell、supplementary views和decorator view的位置、大小、透明度、形狀、層級關係等等。再產生UICollectionView時要制定其Layout，這裡比較常見的做法是繼承UICollectionViewLayout類並自訂布局，或者使用Apple提供給我們的最基本的布局——UICollectionViewFlowLayout，也就是我們最常見的Gird View的形式。

在Flow Layout 中，有以下幾個重要屬性：

—itemSize 決定著每個cell的大小

—minimumInteritemSpacingcell與cell間的最小間距。為什麼說是最小呢？就比如非常流行的瀑布流，每個圖片的大小是不一樣的，因此這個屬性決定了它們之間的最小間距界限。

—minimumLineSpacing行與行之間的最小間距

—scrollDirection 滾動方向，與UITableView一樣，UICollectionView也是繼承自UIScrollView，因此通過這個屬性為其制定滾動的方向。

—headerReferenceSize、footerReferenceSizeheader和footer的寬高，這兩個屬性只有一個會起作用，這決定與上一個屬性，滾動方向的設定。水平滾動時寬度起作用，豎直滾動時高度起作用

—sectionInset 縮排，可以理解為cell的邊界的“擴充”部分。

需要注意的是，上述屬性全部都是全域的，也就是說對所有的cell都起作用，如果想單獨設定，Flow Layout提供了對應的方法：

<span style="font-size:18px;">-collectionView:layout:sizeForItemAtIndexPath:-collectionView:layout:minimumInteritemSpacingForSectionAtIndex:-collectionView:layout:minimumLineSpacingForSectionAtIndex:-collectionView:layout:referenceSizeForHeaderInSection:-collectionView:layout:referenceSizeForFooterInSection:-collectionView:layout:insetForSectionAtIndex:</span>

八、總結

要實現一個UICollectionView，必須要做的工作是dataSource和layout的實現，其中dataSource與UITableView類似，layout部分Apple已經提供了一個Flow Layout作簡單的瀑布流展示，而處理使用者互動就需要delegate，在UICollectionView中cell的幾乎所有的屬性和互動都可以通過方法來單獨處理。

ios開發——UICollectionView初階