iOS 之UICollectionView 之原理介绍
0. 简介
参考：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:
