您的位置：首页 > 产品设计 > UI/UE

iOS6新特征：UICollectionView介绍（二）

2015-07-21 17:45 441 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航