iOS开发小白学习体验-UICollectionView（一）

UICollectionView

UICollectionView
UICollectionViewLayout

关于重用

最近在逛一些技术论坛的时候，看到过这么一篇文章，说的是iOS9新加入的一些特性。大概的意思就是说iOS9的API中给UICollectionView新添加了一个可以拖拽cell并预测停止点方法，由于笔者写的仓促没有找到那个demo。

当看完那篇文章之后感觉眼前一亮，就像是《红楼梦》中的刘姥姥进大观园一样，满脸写满了好奇和惊喜。但是又因为最近忙着学习巩固前面的东西，今天终于腾出了时间来学习这个控件。

（请原谅我的啰嗦，我想说一下我的学习过程，不想看的朋友可以直接看下面的知识点）

笔者在学习一个新的控件的时候第一步当然是新建一个工程，然后定义一个UICollectionView的对象。但是在创建对象的时候发现一个和一般的控件不太一样的创建方法:

-initWithFrame: collectionViewLayout:

一般来说以苹果的规范比较特殊的方法都是比较重要的方法(这只是个人总结的一个看法，如果不对请指正)，但是它要传入一个UICollectionViewLayout的对象，不知道是什么东西就先创建一个匿名的.

UICollectionView *collection = [[UICollectionView alloc]initWithFrame:frame collectionViewLayout:[[UICollectionViewLayout alloc]init]];

创建完对象，进入UICollectionView.h文件看看有什么属性需要什么代理。我们会发现他有两个协议，一个是delegate一个是dataSource。看到这里是不是觉得和UITableView比较像？实际上也是比较像的，所以笔者就很自信的直接遵守协议然后实现必须实现的代理方法。

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 5;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *ID = @"MyFirstCell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
if (cell == nil) {
cell = [[UICollectionViewCell alloc]init];
}
cell.backgroundColor = LYHRandomColor;
return cell;
}

但是在运行的时候发现一个问题，我实现了数据源方法但是运行出来什么都没有。然后笔者就在这三个代理方法中打了断点，发现一个很奇怪的事情，就是UICollectionViewCell的这个代理方法无论如何都无法进入。这就让人很费解了，为什么我明明实现了这个代理方法，但是在运行的时候就不进这个代理方法呢？笔者实在是被弄的不会了，就上网找资料了。王巍@onevcat大神的博客

以下摘自大神的博客：

原来是在创建的时候我传入的是UICollectionViewLayout类型的，苹果提供了一个比较常用的layout是UICollectionViewFlowLayout类型的。

UICollectionViewLayout

UICollectionViewLayout是UICollectionView的精髓，这也是UITableView和UICollectionView最大的不同点。

UICollectionViewLayout可以说是UICollectionView的大脑和中枢，它负责将各个cell、Supplementary View 和 Decoration Views 进行组织，为它们设定各自的属性，包括但不限于：

位置

尺寸

透明度

层级关系

形状

等等等等……

Layout决定了UICollectionView是如何显示在界面上的。在展示之前，一般要合成合适的UICollectionViewLayout子类对象，并将其赋予CollectionView的collectionViewLayout属性。

Apple为我们提供了一个最简单的可能也是最常用的默认layout对象，UICollectionViewFlowLayout。Flow Layout 简单的说是一个直线对齐的layout，最常见的Grid View形式即为一种Flow Layout配置。

首先一个重要的属性是itemSize，它定义了每一个item的大小。通过设定itemSize可以全局地改变所有cell的尺寸，如果想要对某个cell制定尺寸，可以使用-collectionView:layout:sizeForItemAtIndexPath:方法。

间隔 可以指定item之间的间隔和每一行之间的间隔，和size类似，有全局属性，也可以对每一个item和每一个section做出设定：

@property (CGSize) minimumInteritemSpacing

@property (CGSize) minimumLineSpacing

-collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

-collectionView:layout:minimumLineSpacingForSectionAtIndex:

滚动方向 由属性scrollDirection确定scroll view的方向，将影响Flow Layout的基本方向和由header及footer确定的section之间的宽度

UICollectionViewScrollDirectionVertical

UICollectionViewScrollDirectionHorizontal

Header和Footer尺寸 同样地分为全局和部分。需要注意根据滚动方向不同，header和footer的高和宽中只有一个会起作用。垂直滚动时section间宽度为该尺寸的高，而水平滚动时为宽度起作用

@property (CGSize) headerReferenceSize

@property (CGSize) footerReferenceSize

-collectionView:layout:referenceSizeForHeaderInSection:

-collectionView:layout:referenceSizeForFooterInSection:

缩进

@property UIEdgeInsets sectionInset;

-collectionView:layout:insetForSectionAtIndex:

总结：

一个UICollectionView的实现包括两个必要部分：UICollectionViewDataSource和UICollectionViewLayout，和一个交互部分：UICollectionViewDelegate。而Apple给出的UICollectionViewFlowLayout已经是一个很强力的layout方案了。

所以我们知道了在用UICollectionView的时候Layout是一个精髓，只有在设置了一个合适的Layout之后才能显示数据源的。再结合之前打的断点我们可以推断出它的执行流程是这样的（这仅仅是个人的猜测）

先执行：

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

再执行：

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

然后再去找相关layout的设置，（不论其他的代理方法）如果没有设置layout那么是不会执行相关cell的代理方法的，只有设置了才执行。

那么我们找到原因了代码修改如下

UICollectionViewFlowLayout *layout= [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = CGSizeMake(80, 80);
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
layout.minimumInteritemSpacing = 20;
layout.minimumLineSpacing = 20;

self.collextion = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:layout];
self.collextion.delegate = self;
self.collextion.dataSource = self;
[self.view addSubview:self.collextion];

再运行，程序崩溃了！这是为什么呢？我们来看看报错的原因

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'could not dequeue a view of kind: UICollectionElementKindCell with identifier MyFirstCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'

我们会发现这是因为在重用的时候出错了，但是为什么呢，并没有什么问题啊，根据TableView的经验不能错才对啊

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *ID = @"MyFirstCell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
if (cell == nil) {
cell = [[UICollectionViewCell alloc]init];
}
cell.backgroundColor = LYHRandomColor;
return cell;
}

重用队列和tableView没有差别啊，难道中间有一些特别的东西？

以下引用了大神的博客

关于重用

为了得到高效的View，对于cell的重用是必须的，避免了不断生成和销毁对象的操作，这与在UITableView中的情况是一致的。但值得注意的时，在UICollectionView中，不仅cell可以重用，Supplementary View和Decoration View也是可以并且应当被重用的。在iOS5中，Apple对UITableView的重用做了简化，以往要写类似这样的代码：

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MY_CELL_ID"];
if (!cell) {    //如果没有可重用的cell，那么生成一个
cell = [[UITableViewCell alloc] init];
}
//配置cell，blablabla
return cell

而如果我们在TableView向数据源请求数据之前使用

-registerNib:forCellReuseIdentifier:

方法为@“MYCELLID”注册过nib的话，就可以省下每次判断并初始化cell的代码，要是在重用队列里没有可用的cell的话，runtime将自动帮我们生成并初始化一个可用的cell。

这个特性很受欢迎，因此在UICollectionView中Apple继承使用了这个特性，并且把其进行了一些扩展。使用以下方法进行注册：

-registerClass:forCellWithReuseIdentifier:

-registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

-registerNib:forCellWithReuseIdentifier:

-registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

相比UITableView有两个主要变化：一是加入了对某个Class的注册，这样即使不用提供nib而是用代码生成的view也可以被接受为cell了；二是不仅只是cell，Supplementary View也可以用注册的方法绑定初始化了。在对collection view的重用ID注册后，就可以像UITableView那样简单的写cell配置了：

- (UICollectionView*)collectionView:(UICollectionView*)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath {
MyCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”];
// Configure the cell's content
cell.imageView.image = ...
return cell;
}

需要吐槽的是，对collection view，取重用队列的方法的名字和UITableView里面不一样了，在Identifier前面多加了Reuse五个字母，语义上要比以前清晰，命名规则也比以前严谨了..不知道Apple会不会为了追求完美而把UITableView中的命名不那么好的方法deprecate掉。

那么我们在创建UICollectionView的时候再加一句话

[self.collextion registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"MyFirstCell"];

所以这时候全部的源代码是这样的：

//
//  ViewController.m
//  UICollectionView
//
//  Created by 厉煜寰 on 15/9/27.
//  Copyright © 2015年 SXT. All rights reserved.
//

#import "ViewController.h"

#define LYHRandomColor [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1]

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>

@property (nonatomic, strong) UICollectionView *collextion;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

UICollectionViewFlowLayout *layout= [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = CGSizeMake(80, 80);
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
layout.minimumInteritemSpacing = 20;
layout.minimumLineSpacing = 20;

self.collextion = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:layout];
self.collextion.delegate = self;
self.collextion.dataSource = self;
[self.collextion registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"MyFirstCell"];
[self.view addSubview:self.collextion];
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 5;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *ID = @"MyFirstCell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
if (cell == nil) {
cell = [[UICollectionViewCell alloc]init];
}
cell.backgroundColor = LYHRandomColor;
return cell;
}
@end

再运行的时候我们就能把CollectionView显示在界面上了。当然这只是万里长征第一步，CollectionView比TableView更加复杂更加强大，在接下的实践中再为大家讲解。