轉(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)識(shí)一下Collection Views，下面這幅圖就是用Collection Views實(shí)現(xiàn)的一個(gè)照片墻顯示。

01.jpg

1.1 CollectionView

1.1.1 CollectionView 元素

</br>

02.jpg

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

1. Cells(單元格)

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

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

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

Cells如下圖，即每一張圖片

03.jpg

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

04.jpg

**Decoration Views如下圖 **

05.jpg

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

06.jpg

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

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

UICollectionViewDataSource的主要功能：

1. Section數(shù)目

2. Section里面有多少item

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

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

1、numberOfSectionsInCollectionView:

下圖中有多少個(gè)sections呢？

答案是2個(gè)。即我們?cè)趎umberOfSectionsInCollectionView:方法中返回2即可。

7.jpg

2、collectionView:numberOfItemsInSection:

下圖中section0中有多少個(gè)items呢？

答案是4個(gè)。即我們?cè)赾ollectionView:numberOfItemsInSection:方法中對(duì)應(yīng)的section 0返回4即可。

3、collectionView:cellForItemAtIndexPath:

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

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

8.jpg

4、Cell和View的重用

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

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

09.jpg

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

10.jpg

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

11.jpg

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

12.jpg

e.最終使用效果如下圖

13.jpg

.

5、iOS6中，Cell重用改善

在iOS6中，我們可以更加方便的使用Cell，系統(tǒng)總是為我們初始化Cell。我們可以直接使用。只需要簡單的按照兩步走即可：

1. 必須使用下面的方法進(jìn)行Cell類的注冊(cè)：

- (void)registerClass:forCellWithReuseIdentifier:

- (void)registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

- (void)registerNib:forCellWithReuseIdentifier:

- (void)registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

2. 從隊(duì)列中取出一個(gè)Cell,具體方法如下：

-(id)dequeueReusableCellWithReuseIdentifier:forIndexPath:

-(id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

下面我們通過實(shí)際的代碼，來演示具體如何進(jìn)行Cell的重用

第一步：在collection view中進(jìn)行設(shè)置（Cell類的注冊(cè)）

// In collectionview setup...

[collectionView registerClass:[MyCellclass]

forCellWithReuseIdentifier:@”MY_CELL_ID”]

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

(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中都有所改進(jìn)，高亮和flow的精確定位都非常好控制。

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

1. 管理cell的高亮

collectionView:shouldHighlightItemAtIndexPath:

collectionView:didHighlightItemAtIndexPath:

collectionView:didUnhighlightItemAtIndexPath:

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

15.jpg

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

16.jpg

2. 管理cell的選擇

collectionView:shouldSelectItemAtIndexPath:

collectionView:didSelectItemAtIndexPath:

collectionView:shouldDeselectItemAtIndexPath:

collectionView:didDeselectItemAtIndexPath:

collectionView:shouldSelectItemAtIndexPath:的效果如下圖

17.jpg

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

18.jpg

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

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

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

如果進(jìn)行了相關(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兩個(gè)協(xié)議

3. 管理UICollectionViewCell

23.jpg

圖中貌似還缺點(diǎn)東西，什么呢？對(duì)了，就是缺少Layout。我們需要Layout對(duì)cell和其它的view進(jìn)行布局。再看下圖，圖中多了UICollectionViewLayout和UICollectionViewFlowLayout。

24.jpg

下面我們對(duì)UICollectionViewLayout進(jìn)行介紹

使用自己的layout（UICollectionViewLayout）

UICollectionViewLayout是一個(gè)抽象基類，你需要繼承自他，來為collection view生成layout信息。Layout對(duì)象的作用是決定cells，Supplementary views和Decorationviews在collection view中的布局位置。

你需要計(jì)算如下view的layout屬性

1. Cells

2. Supplementary views

3. Decoration views

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

1. 位置

2. 大小

3. 透明度

4. ZIndex

5. 轉(zhuǎn)場

如下面的兩個(gè)圖是collection view的layout。

25.jpg

26.jpg

1.2 Flow Layout

1.2.1 核心概念

UICollectionViewFlowLayout是一個(gè)具體的layout對(duì)象，用來把item布局在網(wǎng)格中，并且可選頁眉和頁腳。在collection view中的items，可以從一行或者一列flow至下一行或者下一列（行或者列取決于滾動(dòng)的方向）。每行都會(huì)根據(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ì)介紹這些可定制的功能。

這里需要對(duì)通過全局和delegate定制進(jìn)行說明一下：

幾乎所有的定制屬性都是在UICollectionViewFlowLayout中，delegate實(shí)際上是collection view的delegate。UICollectionViewDelegateFlowLayout只是對(duì)UICollectionViewDelegate進(jìn)行了一些擴(kuò)展。

Item size(每個(gè)item的大小)

1、 可以進(jìn)行全局配置,如下代碼

@property(CGSize)itemSize

layout.itemSize= CGSizeMake(30,20);

2、 也可以通過delegate對(duì)每一個(gè)item進(jìn)行配置，如下代碼

collectionView:layout:sizeForItemAt

IndexPath:

{

return...;

}

效果如下圖所示

27.jpg

Line spacing（每行的間距）

1、 可以進(jìn)行全局配置,如下屬性

@property(CGFloat) minimumLineSpacing

2、 也可以通過delegate對(duì)每一個(gè)section進(jìn)行配置，如下代碼

collectionView:layout:minimumLineSpacingForSectionAtIndex:

請(qǐng)按順序看下面的三個(gè)圖

28.jpg

29.jpg

30.jpg

1、 可以進(jìn)行全局配置,如下屬性

@property(CGFloat) minimumInteritemSpacing

2、 也可以通過delegate對(duì)每一個(gè)section進(jìn)行配置，如下代碼

collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

看看下面的兩個(gè)圖，藍(lán)色是實(shí)際的item間距，綠色的是最小item間距。

50.jpg

51.jpg

Scrolling direction（滾動(dòng)方向）

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

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

• 同樣需要注冊(cè)一個(gè)類并從隊(duì)列中取出view

- registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

-registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

-dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

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

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

@property(CGSize) headerReferenceSize

@property(CGSize) footerReferenceSize

2）也可以通過delegate對(duì)每一個(gè)section進(jìn)行配置，如下代碼

collectionView:layout:referenceSizeForHeaderInSection:

collectionView:layout:referenceSizeForFooterInSection:

頁眉頁腳的屬性如下圖

33.jpg

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

34.jpg

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

35.jpg

Section Inset

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

36.jpg

37.jpg

從上面的兩個(gè)圖中，我們大概知道了，Section Inset就是某個(gè)section中cell的邊界范圍。

SectionInset的配置方式同樣有兩種

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

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