本文转自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的大小)
- 可以进行全局配置,如下代码
@property (CGSize)itemSize
layout.itemSize = CGSizeMake(30,20);
- 也可以通过delegate对每一个item进行配置，如下代码
collectionView:layout:sizeForItemAtIndexPath:
{
return ...;
}
效果如下图所示
item size
Line spacing（每行的间距）
- 可以进行全局配置,如下属性
@property (CGFloat) minimumLineSpacing
- 也可以通过delegate对每一个section进行配置，如下代码:
collectionView:layout:minimumLineSpacingForSectionAtIndex:
请按顺序看下面的三个图
最小行间距1
最小行间距2
最小行间距3
Inter cell spacing（每行内部cell item的间距）
- 可以进行全局配置,如下属性
@property (CGFloat) minimum InteritemSpacing
- 也可以通过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
网友评论