iOS6新特徵：UICollectionView介紹（二）

1.2.   Flow Layout

1.2.1.     核心概念

UICollectionViewFlowLayout是一個具體的layout對象，用來把item佈局在網格中，並且可選頁眉和頁腳。在collection view中的items，可以從一行或者一列flow至下一行或者下一列（行或者列取決於滾動的方向）。每行都會根據情況，包含儘可能多的Cells。Cells可以是相同的尺寸，也可以是不同的尺寸。

下面是Flow Layout的一些特性

n 面向線性佈局

n 可配置爲網格

n 一組lines

n 具有頁眉和頁腳

 

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進行了一些擴展。

Item size(每個item的大小)

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

@property (CGSize)itemSize

layout.itemSize = CGSizeMake(30,20);

 

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

collectionView:layout:sizeForItemAt

IndexPath:

{

return ...;

}

 

效果如下圖所示

Line spacing（每行的間距）

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

@property (CGFloat) minimumLineSpacing

 

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

ollectionView:layout:minimumLineSpacingForSectionAtIndex:

 

請按順序看下面的三個圖

Inter cell spacing（每行內部cell item的間距）

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

@property (CGFloat) minimum InteritemSpacing

 

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

collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

 

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

Scrolling direction（滾動方向）

設置scrollDirection屬性即可。兩個值如下

UICollectionViewScrollDirectionVertical

UICollectionViewScrollDirectionHorizontal

主要作用：

n  定義了Flow Layout的基本行爲

n  控制頁眉頁腳的維度

 

UICollectionViewScrollDirectionVertical效果如下圖所示

UICollectionViewScrollDirectionHorizontal效果如下圖所示

Header and footer size（頁眉和頁腳大小）

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

n 也就是supplementary views

n 通過數據源的方法來提供內容，如下

- collectionView:viewForSupplementaryElementOfKind:atIndexPath:

 

n 兩種常量（類型）

UICollectionElementKindSectionHeader

UICollectionElementKindSectionFooter

 

n 同樣需要註冊一個類並從隊列中取出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:

頁眉頁腳的屬性如下圖

當垂直的時候，需要設置Height，如下圖

當水平的時候，需要設置Width，如下圖

Section Inset

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

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

 

Section Inset的配置方式同樣有兩種

1、  通過全局配置，如下屬性

@property UIEdgeInsets sectionInset;

 

2、  也通過delegate對每一個section進行配置，如下函數

- (UIEdgeInsets)collectionView:layout:insetForSectionAtIndex:

 

1.2.3.     Flow Layout總結

n 非常強大

n 許多內置的行爲

n 相對於自己寫layout，可以節省很多時間

n 具有很多子類

 

1.3.   總結

n 數據源驅動視圖

n 內置選擇和高亮跟蹤

n Cells, Supplementary, and Decoration Views

n 單獨的一個類提供layout

 

1.4.   更多

n 細粒度，基於塊的更新

n 動畫和重新佈局

n 滾動視圖的繼承

n 自定義layouts