iOS 之UICollectionView 之原理介绍

0. 简介

　　UIICollectionView 必须实现UICollectionDataSource、UICollectionViewDelegate、UICollectionViewDelegateFlowLayout这三个协议。

0.1. 相似控件

　　 UICollectionView, UITableView, NSCollectionView

0.2. UICollectionView的优势

高度定制内容
优秀的管理数据的能力
高效处理大量数据

0.3. 构成

0.3.1. 单元格

　　Cells，主要的显示视图。

0.3.2. 补充View

　　Supplementary Views，页眉页脚。

0.3.3. 装饰View

　　Decoration Views，背景效果。

1. 常用协议

1.1. Section的个数

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

1.2. 每个Section里Item的个数

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

1.3. 每个UICollectionViewCell展示的内容

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

　　　　static NSString * CellIdentifier = @"GradientCell";

　　　　UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];

　　　　cell.backgroundColor = [UIColor colorWithRed:(( * indexPath.row) / 255.0) green:(( * indexPath.row)/255.0) blue:(( * indexPath.row)/255.0) alpha:1.0f];

　　　　return cell;

　　}

1.4. 每个UICollectionViewCell的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

    return CGSizeMake(, );

}

1.5. 每个UICollectionView Section的margin

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  {

    return UIEdgeInsetsMake(, , , );

}

1.6. UICollectionViewCell选中时

//UICollectionView被选中时调用的方法

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath  {

    UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];

    cell.backgroundColor = [UIColor whiteColor];

}

1.7. UICollectionView是否可以被选中

-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath  {

    return YES;

}

2. 重用

2.1. 注册Cell类

- (void)registerClass:forCellWithReuseIdentifier:

- (void)registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

- (void)registerNib:forCellWithReuseIdentifier:

- (void)registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

2.2. 从队列取出Cell

-(id)dequeueReusableCellWithReuseIdentifier:forIndexPath:

-(id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

2.3.1. 示例代码

2.3.1.1. 注册

　　在CollectionView类中注册Cell类：

[collectionView registerClass:[MyCellclass] forCellWithReuseIdentifier:@”MY_CELL_ID”]

2.3.1.2. 使用Cell

　　取出后直接使用即可，不需要再进行空值判断和初始化：

-(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;

}

3. 内容显示

　　UICollectionView继承自UIScrollView，UICollectionView通过UICollectionViewLayout和UICollectionViewFlowLayout对cell和其它view进行布局。

　　UICollectionViewCell由三部分组成：

Background View
Selected Background View
Content View

3.1. UICollectionViewLayout

3.1.1. 使用自定义的Layout（UICollectionViewLayout）

　　这是一个抽象基类，需要继承自它，来为collection view 生成layout信息。Layout对象的作用是决定cells、Supplementary views和 Decorationviews在collection view中的布局。需要计算这些view的layout属性。

3.1.2. 使用系统Layout（UICollectionViewLayoutAttributes）

　　主要包含：

位置
大小
透明度
ZIndex
转场

3.2. Flow Layout

3.2.1. 核心概念

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

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

3.2.2. 自定义 Flow Layout

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

Item size
Line spacing
Inter cell spacing
Scrolling direction
Header and forter size
Section inset

　　几乎所有的定制属性都是在UICollectionViewFlowLayout中，delegate实际上是collection view 的delegate.UICollectionViewDelegateFlowLayout只是对UICollectionViewDelegate进行了一些扩展。

3.2.2.1. Item size（每个Item的大小）

3.2.2.1.1. 在全局中配置

@property(CGSize)itemSize

layout.itemSize= CGSizeMake(,);

3.2.2.1.2. 通过delegate对每个item进行配置

collectionView:layout:sizeForItemAtIndexPath:

{

return...;

}

3.2.2.2. Line spacing（每行的间距）

3.2.2.2.1. 在全局中配置

@property(CGFloat) minimumLineSpacing

3.2.2.2.2. 通过delegate对每个Section进行配置

ollectionView:layout:minimumLineSpacingForSectionAtIndex:

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

3.2.2.3.1. 在全局中配置

@property(CGFloat) minimumInteritemSpacing

3.2.2.3.2. 通过delegate对每个section进行配置

collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

3.2.2.4. Scrolling direction（滚动方向）

　　设置scrollDirection属性即可。两个值如下：UICollectionViewScrollDirectionVertical和UICollectionViewScrollDirectionHorizontal。即纵向或横向。

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

　　页眉和页脚，即UICollectionElementKindSectionHeader和UICollectionElementKindSectionFooter，通过数据源方法提供内容：

-collectionView:viewForSupplementaryElementOfKind:atIndexPath:

　　同样需要注册一个类，并从队列中取出view：

- registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

-registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

-dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

　　页眉和页脚，当垂直的时候，需要设置的是Height，当水平的时候，需要设置的是Width。页眉和页脚的size配置方式如下：

3.2.2.5.1. 在全局中配置

@property(CGSize) headerReferenceSize

@property(CGSize) footerReferenceSize

3.2.2.5.2. 通过delegate对每个item进行配置

collectionView:layout:referenceSizeForHeaderInSection:

collectionView:layout:referenceSizeForFooterInSection:

3.2.2.6. Sections Insets

　　通过两个图来看一下什么是Section Insets:

3.2.2.6.1. 在全局中配置

@propertyUIEdgeInsets sectionInset;

3.2.2.6.2. 通过delegate对每个item进行配置

- (UIEdgeInsets)collectionView:layout:insetForSectionAtIndex: