UICollectionView_1

原文鏈接:WWDC 2012 Session筆記——205 Introducing Collection Views

什麼是UICollectionView

UICollectionView是一種新的數據展示方式,簡單來說可以把他理解成多列的UITableView(請一定注意這是UICollectionView的最最簡單的形式)。如果你用過iBooks的話,可能你還對書架佈局有一定印象:一個虛擬書架上放着你下載和購買的各類圖書,整齊排列。其實這就是一個UICollectionView的表現形式,或者iPad的iOS6中的原生時鐘應用中的各個時鐘,也是UICollectionView的最簡單的一個佈局,如圖:


最簡單的UICollectionView就是一個GridView,可以以多列的方式將數據進行展示。標準的UICollectionView包含三個部分,它們都是UIView的子類:

  • Cells 用於展示內容的主體,對於不同的cell可以指定不同尺寸和不同的內容,這個稍後再說
  • Supplementary Views 追加視圖 如果你對UITableView比較熟悉的話,可以理解爲每個Section的Header或者Footer,用來標記每個section的view
  • Decoration Views 裝飾視圖 這是每個section的背景,比如iBooks中的書架就是這個


不管一個UICollectionView的佈局如何變化,這三個部件都是存在的。再次說明,複雜的UICollectionView絕不止上面的幾幅圖,關於較複雜的佈局和相應的特性,我會在本文稍後和下一篇筆記中進行一些深入。


實現一個簡單的UICollectionView

先從最簡單的開始,UITableView是iOS開發中的非常非常非常重要的一個類,相信如果你是開發者的話應該是對這個類非常熟悉了。實現一個UICollectionView和實現一個UITableView基本沒有什麼大區別,它們都同樣是datasource和delegate設計模式的:datasource爲view提供數據源,告訴view要顯示些什麼東西以及如何顯示它們,delegate提供一些樣式的小細節以及用戶交互的相應。因此在本節裏會大量對比collection view和table view來進行說明,如果您還不太熟悉table view的話,也是個對照着複習的好機會。

UICollectionViewDataSource

  • section的數量 -numberOfSectionsInCollection:
  • 某個section裏有多少個item -collectionView:numberOfItemsInSection:
  • 對於某個位置應該顯示什麼樣的cell -collectionView:cellForItemAtIndexPath:

實現以上三個委託方法,基本上就可以保證CollectionView工作正常了。當然,還有提供Supplementary View的方法

  • collectionView:viewForSupplementaryElementOfKind:atIndexPath:

對於Decoration Views,提供方法並不在UICollectionViewDataSource中,而是直接在UICollectionViewLayout類中的(因爲它僅僅是視圖相關,而與數據無關),放到稍後再說。

關於重用

爲了得到高效的View,對於cell的重用是必須的,避免了不斷生成和銷燬對象的操作,這與在UITableView中的情況是一致的。但值得注意的時,在UICollectionView中,不僅cell可以重用,Supplementary View和Decoration View也是可以並且應當被重用的。在iOS5中,Apple對UITableView的重用做了簡化,以往要寫類似這樣的代碼:

而如果我們在TableView向數據源請求數據之前使用-registerNib:forCellReuseIdentifier:方法爲@“MY_CELL_ID”註冊過nib的話,就可以省下每次判斷並初始化cell的代碼,要是在重用隊列裏沒有可用的cell的話,runtime將自動幫我們生成並初始化一個可用的cell。

這個特性很受歡迎,因此在UICollectionView中Apple繼承使用了這個特性,並且把其進行了一些擴展。使用以下方法進行註冊:

  • -registerClass:forCellWithReuseIdentifier:
  • -registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
  • -registerNib:forCellWithReuseIdentifier:
  • -registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

相比UITableView有兩個主要變化:一是加入了對某個Class的註冊,這樣即使不用提供nib而是用代碼生成的view也可以被接受爲cell了;二是不僅只是cell,Supplementary View也可以用註冊的方法綁定初始化了。在對collection view的重用ID註冊後,就可以像UITableView那樣簡單的寫cell配置了:

需要吐槽的是,對collection view,取重用隊列的方法的名字和UITableView裏面不一樣了,在Identifier前面多加了Reuse五個字母,語義上要比以前清晰,命名規則也比以前嚴謹了..不知道Apple會不會爲了追求完美而把UITableView中的命名不那麼好的方法deprecate掉。

UICollectionViewDelegate

數據無關的view的外形啊,用戶交互啊什麼的,由UICollectionViewDelegate來負責:

  • cell的高亮
  • cell的選中狀態
  • 可以支持長按後的菜單

關於用戶交互,UICollectionView也做了改進。每個cell現在有獨立的高亮事件和選中事件的delegate,用戶點擊cell的時候,現在會按照以下流程向delegate進行詢問:

  1. -collectionView:shouldHighlightItemAtIndexPath: 是否應該高亮?
  2. -collectionView:didHighlightItemAtIndexPath: 如果1回答爲是,那麼高亮
  3. -collectionView:shouldSelectItemAtIndexPath: 無論1結果如何,都詢問是否可以被選中?
  4. -collectionView:didUnhighlightItemAtIndexPath: 如果1回答爲是,那麼現在取消高亮
  5. -collectionView:didSelectItemAtIndexPath: 如果3回答爲是,那麼選中cell

狀態控制要比以前靈活一些,對應的高亮和選中狀態分別由highlighted和selected兩個屬性表示。

關於Cell

相對於UITableViewCell來說,UICollectionViewCell沒有這麼多花頭。首先UICollectionViewCell不存在各式各樣的默認的style,這主要是由於展示對象的性質決定的,因爲UICollectionView所用來展示的對象相比UITableView來說要來得靈活,大部分情況下更偏向於圖像而非文字,因此需求將會千奇百怪。因此SDK提供給我們的默認的UICollectionViewCell結構上相對比較簡單,由下至上:

  • 首先是cell本身作爲容器view
  • 然後是一個大小自動適應整個cell的backgroundView,用作cell平時的背景
  • 再其上是selectedBackgroundView,是cell被選中時的背景
  • 最後是一個contentView,自定義內容應被加在這個view上

這次Apple給我們帶來的好康是被選中cell的自動變化,所有的cell中的子view,也包括contentView中的子view,在當cell被選中時,會自動去查找view是否有被選中狀態下的改變。比如在contentView里加了一個normal和selected指定了不同圖片的imageView,那麼選中這個cell的同時這張圖片也會從normal變成selected,而不需要額外的任何代碼。

UICollectionViewLayout

終於到UICollectionView的精髓了…這也是UICollectionView和UITableView最大的不同。UICollectionViewLayout可以說是UICollectionView的大腦和中樞,它負責了將各個cell、Supplementary View和Decoration Views進行組織,爲它們設定各自的屬性,包括但不限於:

  • 位置
  • 尺寸
  • 透明度
  • 層級關係
  • 形狀
  • 等等等等…

Layout決定了UICollectionView是如何顯示在界面上的。在展示之前,一般需要生成合適的UICollectionViewLayout子類對象,並將其賦予CollectionView的collectionViewLayout屬性。關於詳細的自定義UICollectionViewLayout和一些細節,我將寫在之後一篇筆記中。

Apple爲我們提供了一個最簡單可能也是最常用的默認layout對象,UICollectionViewFlowLayout。Flow Layout簡單說是一個直線對齊的layout,最常見的Grid View形式即爲一種Flow Layout配置。上面的照片架界面就是一個典型的Flow Layout。

  • 首先一個重要的屬性是itemSize,它定義了每一個item的大小。通過設定itemSize可以全局地改變所有cell的尺寸,如果想要對某個cell制定尺寸,可以使用-collectionView:layout:sizeForItemAtIndexPath:方法。
  • 間隔 可以指定item之間的間隔和每一行之間的間隔,和size類似,有全局屬性,也可以對每一個item和每一個section做出設定:
    • @property (CGSize) minimumInteritemSpacing
    • @property (CGSize) minimumLineSpacing
    • -collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
    • -collectionView:layout:minimumLineSpacingForSectionAtIndex:
  • 滾動方向 由屬性scrollDirection確定scroll view的方向,將影響Flow Layout的基本方向和由header及footer確定的section之間的寬度
    • UICollectionViewScrollDirectionVertical
    • UICollectionViewScrollDirectionHorizontal
  • Header和Footer尺寸 同樣地分爲全局和部分。需要注意根據滾動方向不同,header和footer的高和寬中只有一個會起作用。垂直滾動時section間寬度爲該尺寸的高,而水平滾動時爲寬度起作用,如圖。
    • @property (CGSize) headerReferenceSize
    • @property (CGSize) footerReferenceSize
    • -collectionView:layout:referenceSizeForHeaderInSection:
    • -collectionView:layout:referenceSizeForFooterInSection:
  • 縮進
    • @property UIEdgeInsets sectionInset;
    • -collectionView:layout:insetForSectionAtIndex:

總結

一個UICollectionView的實現包括兩個必要部分:UICollectionViewDataSource和UICollectionViewLayout,和一個交互部分:UICollectionViewDelegate。而Apple給出的UICollectionViewFlowLayout已經是一個很強力的layout方案了。


幾個自定義的Layout

但是光是UICollectionViewFlowLayout的話,顯然是不夠用的,而且如果單單是這樣的話,就和現有的開源各類Grid View沒有區別了…UICollectionView的強大之處,就在於各種layout的自定義實現,以及它們之間的切換。先看幾個相當exiciting的例子吧~

比如,堆疊佈局:


圓形佈局:


和Cover Flow佈局:


所有這些佈局都採用了同樣的數據源和委託方法,因此完全實現了model和view的解耦。但是如果僅這樣,那開源社區也已經有很多相應的解決方案了。Apple的強大和開源社區不能比擬的地方在於對SDK的全局掌控,CollectionView提供了非常簡單的API可以令開發者只需要一次簡單調用,就可以使用CoreAnimation在不同的layout之間進行動畫切換,這種切換必定將大幅增加用戶體驗,代價只是幾十行代碼就能完成的佈局實現,以及簡單的一句API調用,不得不說現在所有的開源代碼與之相比,都是相形見拙了…不得不佩服和感謝UIKit團隊的努力。

關於上面幾種自定義Layout和實現細節,和其他高級CollectionView應用,將在下一篇筆記中進行詳細說明~


發佈了7 篇原創文章 · 獲贊 4 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章