UICollectionView--Flow Layout[转载]

本文转自iOS大神破船在devdiv论坛的帖子，原贴地址iOS6新特征：UICollectionView介绍.

1.1 Flow Layout

---

1.1.1 核心概念

UICollectionViewFlowLayout是一个具体的layout对象，用来把item布局在网格中，并且可选页眉和页脚。在collection view中的items，可以从一行或者一列flow至下一行或者下一列（行或者列取决于滚动的方向）。每行都会根据情况，包含尽可能多的Cells。Cells可以是相同的尺寸，也可以是不同的尺寸。
下面是Flow Layout的一些特性：

• 面向线性布局
• 可配置为网格
• 一组lines
• 具有页眉和页脚

1.1.2 自定义Flow Layout

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

• Item size
• Line spacing
• Inter cell spacing
• Scrolling direction
• Header and footer size
• 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:sizeForItemAtIndexPath:
{
        return ...;
}

效果如下图所示

item size

Line spacing（每行的间距）

1. 可以进行全局配置,如下属性

@property (CGFloat) minimumLineSpacing

2. 也可以通过delegate对每一个section进行配置，如下代码:

collectionView:layout:minimumLineSpacingForSectionAtIndex:

请按顺序看下面的三个图

最小行间距1

最小行间距2

最小行间距3

Inter cell spacing（每行内部cell item的间距）

1. 可以进行全局配置,如下属性

@property (CGFloat) minimum InteritemSpacing

2. 也可以通过delegate对每一个section进行配置，如下代码

collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

看看下面的两个图，蓝色是实际的item间距，绿色的是最小item间距。

Inter cell spacing1

Inter cell spacing2

Scrolling direction（滚动方向）

设置scrollDirection属性即可。两个值如下:

UICollectionViewScrollDirectionVertical
UICollectionViewScrollDirectionHorizontal

主要作用：

• 定义了Flow Layout的基本行为
• 控制页眉页脚的维度

UICollectionViewScrollDirectionVertical效果如下图所示

UICollectionViewScrollDirectionVertical效果

UICollectionViewScrollDirectionHorizontal效果如下图所示

UICollectionViewScrollDirectionHorizontal效果

Header and footer size（页眉和页脚大小）

下面是页眉和页脚的一些解释。

• 也就是supplementary views
• 通过数据源的方法来提供内容，如下

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:

页眉页脚的属性如下图

页眉页脚的属性

当垂直的时候，需要设置Height，如下图

垂直时,需要设置Height

当水平的时候，需要设置Width，如下图

水平的，需要设置Width

Section Inset

我们先通过两个图来看看Sections Insets是怎么回事

Section Inset1

Section Inset2

从上面的两个图中，我们大概知道了，Section Inset就是某个section中cell的边界范围。

Section Inset的配置方式同样有两种

1)通过全局配置，如下属性:

 @property UIEdgeInsets sectionInset;

2)也通过delegate对每一个section进行配置，如下函数:

collectionView:layout:insetForSectionAtIndex:

1.1.3 Flow Layout总结

• 非常强大
• 许多内置的行为
• 相对于自己写layout，可以节省很多时间
• 具有很多子类

1.2 总结

---

• 数据源驱动视图
• 内置选择和高亮跟踪
• Cells, Supplementary, and Decoration Views
• 单独的一个类提供layout

1.3 更多

---

• 细粒度，基于块的更新
• 动画和重新布局
• 滚动视图的继承
• 自定义layouts