iOS 之UICollectionView 之原理介绍

0. 简介

　　参考：支持重排的iOS9 UICollectionView

　　参考：http://www.cnblogs.com/langtianya/p/3902801.html

　　参考：http://www.cnblogs.com/ios8/p/iOS-UICollectionView.html

　　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:((10 * indexPath.row) / 255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1.0f];

　　　　return cell;

　　}

1.4. 每个UICollectionViewCell的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {  
    return CGSizeMake(96, 100);  
} 

1.5. 每个UICollectionView Section的margin

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  {  
    return UIEdgeInsetsMake(5, 5, 5, 5);  
}  

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(30,20);

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: