轉(zhuǎn)載地址
Demo

UICollectionView詳解

section 氛魁、item

全家福：
UICollectionView, UITableView, NSCollectionView

1. 不直接等效于NSCollectionView
2. 也不替代UITableView----親兄弟
3. 為什么要使用Collection Views呢力图？

• 可以高度定制內(nèi)容的展現(xiàn)
• 管理數(shù)據(jù)最佳的做法
• 即使是處理大量數(shù)據(jù)疮方，也非常的高效

我們先來感性的認(rèn)識一下Collection Views蚓曼，下面這幅圖就是用Collection Views實現(xiàn)的一個照片墻顯示几蜻。

01.jpg

1.1 CollectionView

1.1.1 CollectionView 元素

</br>

02.jpg

從上圖中千康，我們可以看出Collection View的整體構(gòu)成元素嫩痰，共有三個要素钞艇，分別如下：

1. Cells(單元格)

2. Supplementary Views（補充的view啄寡，相當(dāng)于TableView的頁眉和頁腳

3. Decoration Views（裝飾View，用于裝飾整個CollectionView的）

我們可以分解一下這個照片墻哩照，來描述上面的三個元素都對應(yīng)什么內(nèi)容

Cells如下圖挺物，即每一張圖片

03.jpg

SupplementaryViews如下圖右邊白色的文字部分

04.jpg

**Decoration Views如下圖 **

05.jpg

最終，三個元素飘弧，就構(gòu)成了照片墻识藤，下面是元素構(gòu)成圖

06.jpg

1.1.2 數(shù)據(jù)模型與交互

數(shù)據(jù)模型(數(shù)據(jù)提供者UICollectionViewDataSource)
UICollectionViewDataSource是一個代理砚著，主要用于向Collection View提供數(shù)據(jù)。

UICollectionViewDataSource的主要功能：

1. Section數(shù)目

2. Section里面有多少item

3. 提供Cell和supplementary view設(shè)置

下面我們依次講解這些功能痴昧。

1稽穆、numberOfSectionsInCollectionView:

下圖中有多少個sections呢？

答案是2個赶撰。即我們在numberOfSectionsInCollectionView:方法中返回2即可舌镶。

7.jpg

2、collectionView:numberOfItemsInSection:

下圖中section0中有多少個items呢豪娜？

答案是4個乎折。即我們在collectionView:numberOfItemsInSection:方法中對應(yīng)的section 0返回4即可。

3侵歇、collectionView:cellForItemAtIndexPath:

下圖中section0 item 0位置處應(yīng)該顯示什么內(nèi)容呢骂澄？

答案是使用方法collectionView:cellForItemAtIndexPath:返回一個cell，類似下圖中的一個view惕虑。

8.jpg

4坟冲、Cell和View的重用

下面通過5個步驟，來演示Cell和View的重用

a. 如下圖溃蔫，左邊是Collection View健提，右邊是Cell和View的重用隊列，剛開始伟叛，左邊的數(shù)據(jù)顯示內(nèi)容私痹，右邊的重用隊列還沒有數(shù)據(jù)。

09.jpg

b. 再看下圖统刮，當(dāng)用戶顯示出了Collection View下面的內(nèi)容后紊遵，Collection View中之前的一些Cell和View就已經(jīng)不再被顯示了，這是侥蒙，系統(tǒng)是如何處理呢暗膜？

10.jpg

c. 看這里，系統(tǒng)會把不用的Cell和View添加到重用隊列中鞭衩，以備后面使用学搜。

11.jpg

d. 如何再次被使用呢，請看下圖论衍，當(dāng)用戶繼續(xù)往下看內(nèi)容的時候瑞佩，系統(tǒng)就會提供隊列中存在的Cell和View供使用。

12.jpg

e.最終使用效果如下圖

13.jpg

.

5坯台、iOS6中炬丸，Cell重用改善

在iOS6中，我們可以更加方便的使用Cell捂人，系統(tǒng)總是為我們初始化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中進行設(shè)置（Cell類的注冊）

// In collectionview setup...

[collectionView registerClass:[MyCellclass]

forCellWithReuseIdentifier:@”MY_CELL_ID”]

第二步：在下面的函數(shù)中酸纲，從隊列中取出一個cell即可捣鲸。并且再也不用對cell進行空值判斷，以做額外的初始化操作闽坡。Cell的一切初始化工作都由系統(tǒng)為我們做好了栽惶。我們只需要對cell進行一些賦值等操作即可。

(UICollectionView*)collectionView:(UICollectionView*)cv

cellForItemAtIndexPath:(NSIndexPath*)indexPath

{

MyCell *cell =[cv dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”];

if (!cell) {

// Well, nothingreally. Never again

}

// Configure thecell's content

cell.imageView.image= ...

return cell;

}

交互(UICollectionViewDelegate)

UICollectionViewDelegate的主要功能：

1. 控制cell的高亮

2. 控制cell的選擇

3. 在cell上支持菜單操作疾嗅，如下圖

14.jpg

選擇和高亮在iOS中都有所改進外厂，高亮和flow的精確定位都非常好控制。

下面列出了常用的相關(guān)方法代承，開發(fā)者可以參考sdk的幫助文檔汁蝶，進行詳細(xì)了解。

1. 管理cell的高亮

collectionView:shouldHighlightItemAtIndexPath:

collectionView:didHighlightItemAtIndexPath:

collectionView:didUnhighlightItemAtIndexPath:

這個方法collectionView:shouldHighlightItemAtIndexPath:的效果如下圖所示：注意右邊selected和highlighted的值论悴。

15.jpg

這個方法collectionView:didHighlightItemAtIndexPath:的效果如下圖所示：注意右邊selected和highlighted的值掖棉。

16.jpg

2. 管理cell的選擇

collectionView:shouldSelectItemAtIndexPath:

collectionView:didSelectItemAtIndexPath:

collectionView:shouldDeselectItemAtIndexPath:

collectionView:didDeselectItemAtIndexPath:

collectionView:shouldSelectItemAtIndexPath:的效果如下圖

17.jpg

下面兩個方法
collectionView:didUnhighlightItemAtIndexPath:
collectionView:didSelectItemAtIndexPath:
的效果如下圖所示：

18.jpg

1.1.3 內(nèi)容的顯示UICollectionViewCell Styles

iOS6中沒有預(yù)定義cell的Style

Collection View跟蹤cell的選擇和高亮
通過設(shè)置cell的highlight和selection屬性(包含子視圖)

如果進行了相關(guān)配置，這可以切換background view和selected background view

我們來按順序看下面四幅圖膀估。開發(fā)者可以自行領(lǐng)悟規(guī)律幔亥。

19.jpg

20.jpg

21.jpg

22.jpg

下圖是UICollectionView相關(guān)的類圖，從圖中我們可以看到

1. UICollectionView繼承自UIScrollView察纯，

2. 尊循UICollectionViewDelegate和UICollectionViewDataSource兩個協(xié)議

3. 管理UICollectionViewCell

23.jpg

圖中貌似還缺點東西帕棉，什么呢？對了饼记，就是缺少Layout香伴。我們需要Layout對cell和其它的view進行布局。再看下圖握恳，圖中多了UICollectionViewLayout和UICollectionViewFlowLayout瞒窒。

24.jpg

下面我們對UICollectionViewLayout進行介紹

使用自己的layout（UICollectionViewLayout）

UICollectionViewLayout是一個抽象基類，你需要繼承自他乡洼，來為collection view生成layout信息。Layout對象的作用是決定cells匕坯，Supplementary views和Decorationviews在collection view中的布局位置束昵。

你需要計算如下view的layout屬性

1. Cells

2. Supplementary views

3. Decoration views

系統(tǒng)也為我們定義了layout屬性，即UICollectionViewLayoutAttributes葛峻，它主要包括如下內(nèi)容：

1. 位置

2. 大小

3. 透明度

4. ZIndex

5. 轉(zhuǎn)場

如下面的兩個圖是collection view的layout锹雏。

25.jpg

26.jpg

1.2 Flow Layout

1.2.1 核心概念

UICollectionViewFlowLayout是一個具體的layout對象，用來把item布局在網(wǎng)格中术奖，并且可選頁眉和頁腳礁遵。在collection view中的items轻绞，可以從一行或者一列flow至下一行或者下一列（行或者列取決于滾動的方向）。每行都會根據(jù)情況佣耐，包含盡可能多的Cells政勃。Cells可以是相同的尺寸，也可以是不同的尺寸兼砖。
下面是Flow Layout的一些特性：

• 面向線性布局
• 可配置為網(wǎng)格
• 一組lines
• 具有頁眉和頁腳

1.2.2 自定義 Flow Layout

Flow Layout可以定制的主要功能如下

1. Item size

2. Line spacing

3. Inter cell spacing

4. Scrolling direction

5. Header and footer size

6. Section Inset

下面我們來詳細(xì)介紹這些可定制的功能奸远。

這里需要對通過全局和delegate定制進行說明一下：

幾乎所有的定制屬性都是在UICollectionViewFlowLayout中，delegate實際上是collection view的delegate讽挟。UICollectionViewDelegateFlowLayout只是對UICollectionViewDelegate進行了一些擴展懒叛。

Item size(每個item的大小)

1、 可以進行全局配置,如下代碼

@property(CGSize)itemSize

layout.itemSize= CGSizeMake(30,20);

2耽梅、 也可以通過delegate對每一個item進行配置薛窥，如下代碼

collectionView:layout:sizeForItemAt

IndexPath:

{

return...;

}

效果如下圖所示

27.jpg

Line spacing（每行的間距）

1、 可以進行全局配置,如下屬性

@property(CGFloat) minimumLineSpacing

2眼姐、 也可以通過delegate對每一個section進行配置拆檬，如下代碼

collectionView:layout:minimumLineSpacingForSectionAtIndex:

請按順序看下面的三個圖

28.jpg

29.jpg

30.jpg

1、 可以進行全局配置,如下屬性

@property(CGFloat) minimumInteritemSpacing

2妥凳、 也可以通過delegate對每一個section進行配置竟贯，如下代碼

collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

看看下面的兩個圖，藍色是實際的item間距逝钥，綠色的是最小item間距屑那。

50.jpg

51.jpg

Scrolling direction（滾動方向）

設(shè)置scrollDirection屬性即可。兩個值如下

UICollectionViewScrollDirectionVertical

UICollectionViewScrollDirectionHorizontal

主要作用：

• 定義了Flow Layout的基本行為

• 控制頁眉頁腳的維度

UICollectionViewScrollDirectionVertical效果如下圖所示

31.jpg

UICollectionViewScrollDirectionHorizontal效果如下圖所示

32.jpg

Header and footer size（頁眉和頁腳大兴铱睢）

下面是頁眉和頁腳的一些解釋持际。

• 也就是supplementary views

• 通過數(shù)據(jù)源的方法來提供內(nèi)容，如下
  -collectionView:viewForSupplementaryElementOfKind:atIndexPath:

• 兩種常量（類型）
  UICollectionElementKindSectionHeader
UICollectionElementKindSectionFooter

• 同樣需要注冊一個類并從隊列中取出view

- registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

-registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

-dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

頁眉和頁腳的size配置方式：

1）可以全局配置哗咆，如下屬性

@property(CGSize) headerReferenceSize

@property(CGSize) footerReferenceSize

2）也可以通過delegate對每一個section進行配置蜘欲，如下代碼

collectionView:layout:referenceSizeForHeaderInSection:

collectionView:layout:referenceSizeForFooterInSection:

頁眉頁腳的屬性如下圖

33.jpg

當(dāng)垂直的時候，需要設(shè)置Height晌柬，如下圖

34.jpg

當(dāng)水平的時候姥份，需要設(shè)置Width，如下圖

35.jpg

Section Inset

我們先通過兩個圖來看看Sections Insets是怎么回事

36.jpg

37.jpg

從上面的兩個圖中年碘，我們大概知道了澈歉，Section Inset就是某個section中cell的邊界范圍。

SectionInset的配置方式同樣有兩種

1屿衅、 通過全局配置埃难，如下屬性
@propertyUIEdgeInsets sectionInset;

2、 也通過delegate對每一個section進行配置，如下函數(shù)
- (UIEdgeInsets)collectionView:layout:insetForSectionAtIndex: