自定义UICollectionViewCell 以及碰到的问题

前言：

今天没事自己写了个UICollectionView也就是九宫格的demo ，遇到几个小问题，虽然都很快解决了，但是这里还是把它记录下来，以后方便查阅。

（UICollectionView 一下用九宫格代称）废话不多说了，直接开始。

创建一个UICollectionView

首先，创建一个UICollectionView  ，需要设置的几个代理 UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout。九宫格
跟UITableView类似，这里只是实现最简单的代理方法。

- (UICollectionView *)collectionView
{
if (_collectionView == nil) {

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];

_collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
[_collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:CellIdentifier];

_collectionView.backgroundColor = [UIColor grayColor];
}

return _collectionView;
}

其中_collectionView 是我创建的九宫格，CollectionViewCell 是我创建的自定义Cell，这个下面再讲。

上面我就碰到了了一个小问题，其实也是我自己不细心的原因，但是也是容易出错的地方：

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];

_collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];

上面的UICollectionViewFlowLayout ，这个类是九宫格用来实现自动布局的，注意千万不要写错，我就因为写错，写成了

UICollectionViewLayout （这个类我是直接点击去九宫格的初始化方法里面看到的）导致了九宫格显示不出来，其他地方也没有错，
调了好几遍，最后终于发现是这个类写错了，UICollectionViewFlowLayout 是UICollectionViewLayout 的子类。
好了，一个问题过去了。

准备UICollectionView 的数据

在实现九宫格的代理方法之前，先展示一下 需要的数据

@property (nonatomic, copy) NSMutableArray *dataSourceArray;
//宏是完全替换
#define CellWidthSpace   20
#define CellWidth       (kScreenWidth - (5 * CellWidthSpace))/4
#define CellLineSpace   10

self.dataSourceArray = [NSMutableArray arrayWithArray:@[@"image1.png",@"image2.png",@"image3.png",<span style="font-family: Arial, Helvetica, sans-serif;">@"image4.png",@"image5.png",@"image4.png",@"image3.png",@"image2.png",@"image1.png"]];</span>

dataSourceArray 是九宫格的数据，CellWidthSpace 是每行Cell之间的间距，CellLineSpace 是每列Cell之间的间距，这个
都是自己定义的。 kScreenWidth 是整个屏幕的宽度，重点是CellWidth， 我要显示4列的九宫格，间距需要5个，所以就是 屏宽度
减去5个空隙 后再除以4.就得到了每个Cell的 的宽度。

实现UICollectionView的代理

#pragma mark UICollectionViewDelegateFlowLayout
//设置每个Cell 的宽高
- (CGSize)collectionView:(UICollectionView *)collectionView  layout:(nonnull UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
return CGSizeMake(CellWidth, CellWidth);<span style="white-space:pre">	</span>
}
//设置Cell 之间的间距 （上，左，下，右）
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(CellLineSpace, CellWidthSpace, CellLineSpace, CellWidthSpace);
}

#pragma mark UICollectionViewDataSource
//设置九宫格Cell 的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.dataSourceArray.count;
}
//设置Cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.imageName = self.dataSourceArray[indexPath.row];
cell.backgroundColor = [UIColor whiteColor];

return cell;
}

#pragma mark UICollectionViewDelegate
//设置点击 Cell的点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
[collectionView deselectItemAtIndexPath:indexPath animated:YES];//取消选中

[self alertView:[NSString stringWithFormat:@"点击的是%ld",indexPath.row]];
}
//这个不是必须的方法 是Cell 将要显示
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
cell.layer.transform = CATransform3DMakeScale(0.3, 0.3, 1);//缩放比例
[UIView animateWithDuration:0.8 animations:^{
cell.layer.transform = CATransform3DMakeScale(1, 1, 1);//还原为1
}];<span style="white-space:pre">	</span>  <span style="font-family: Arial, Helvetica, sans-serif;">}</span>

#pragma mark UIAlertView
- (void)alertView:(NSString *)message
{
UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:message delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];

[alert show];
}

上面就是九宫格的代理方法（没有列全，只是简单实现了UICollectionView）,上面的方法 看注释。

自定义UICollectionViewCell

重点是设置Cell的方法，我是使用了自定义Cell,这里就会显示出UICollectionView 与 UITableview 的不同. 
首先，UICollectionView 与UITableView 都有类似的

[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];

这个是 Cell 的重用机制。UITableView 需要判断Cell是否 为空

if (cell == nil) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
}

如果cell =nil 里面就可以使用 自定义 UITableViewCell 这里不再说了，但是UICollectionView 不需要判断Cell 是否为nil,可以使用系统
的UICollectionViewCell 也可以使用自定义的UICollectionViewCell，我们一般用的就是自定义的Cell .

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.imageName = self.dataSourceArray[indexPath.row];
cell.backgroundColor = [UIColor whiteColor];

return cell;
}

CollectionViewCell 就是我自定义的Cell ,imageName 是自定义Cell 里面添加的图片的名字。

我们先来看一下自定义UICollectionViewCell 的文件，我实现的Cell 很简单就是添加了一个图片（这个自定义Cell 可以根据需要
自行设置），

.h 文件
#import <UIKit/UIKit.h>

@interface CollectionViewCell : UICollectionViewCell

@property (nonatomic, copy) NSString *imageName;

@end

.m 文件

#import "CollectionViewCell.h"

@interface CollectionViewCell ()
@property (nonatomic, strong) UIImageView *imageView;

@end

@implementation CollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}

- (void)setImageName:(NSString *)imageName
{
//注意cell里面的控件 使用的位置 是相对于cell 的位置的 所以使用bounds
_imageName = imageName;
_imageView = [[UIImageView alloc]initWithFrame:self.bounds];
_imageView.image = [UIImage imageNamed:imageName];
[self addSubview:_imageView];
}

@end

这里返回cell 的方法好像只能写

- (instancetype)initWithFrame:(CGRect)frame

我使用

- (instancetype)init
{
self = [super init];
if (self) {

}
return self;
}

但是没有执行，好了。我们知道使用

- (instancetype)initWithFrame:(CGRect)frame

去初始化一个自定义的Cell 。

自定义UICollectionViewCell 注意

这里我又连续碰到了2个问题，当然我上面粘贴出来出来的都是正确的。先说说第一个问题，我是在

- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.imageView = [[UIImageView alloc]initWithFrame:self.bounds];
self.imageView.image = [UIImage imageNamed:self.imageName];
[self addSubview:_imageView];
}
return self;
}

这里面根据我传递过来的图片名字设置图片的，但是图片并没有显示出来。不知道你注意到了这个没有

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.imageName = self.dataSourceArray[indexPath.row];
cell.backgroundColor = [UIColor whiteColor];

return cell;
}

这个自定义UICollectionViewCell 是直接使用重用机制，调用系统的Cell 实例方法，但是我们设置自定义Cell 的图片信息，是在调用
过系统的重用的实例方法
，之后设置的。因为我们没有办法向自定义UITableViewCell 方法一样，实现我们自定义的实例方法。这就
导致了系统在调用我们 自定义UICollectionViewCell 的时候里面的imageName 字符串还是nil ，所以图片显示不出来。这里我使用了
重写setter方法，当然重写setter的时候可以传递过来一个模型的数据，来设置Cell 里面的显示的数据。

- (void)setImageName:(NSString *)imageName
{
//注意cell里面的控件 使用的位置 是相对于cell 的位置的 所以使用bounds
_imageName = imageName;
_imageView = [[UIImageView alloc]initWithFrame:self.bounds];
_imageView.image = [UIImage imageNamed:imageName];
[self addSubview:_imageView];
}

当我去设置 自定义Cell 里面的属性 iamgeName 的时候再去 添加图片。这样图片就能显示出来了。

最后一个问题，我在重写setter方法的时候，设置cell的UIImageView frame的时候 ，出现的。显示为UIImageView 的图片位置
不正确，能显示出来的只有2列，当我点击cell 提示的弹窗，提示信息跟我点击的cell图片不对应，最开始我以为是cell 的间距问题，
调了两次，发现还是调整不大。当我设置Cell 的背景颜色 为一个明显的突出颜色的时候，就看出来问题的原因了。cell 的位置是正确
的，错误的是cell的UIImageView 的位置。
问题出现前：

_imageView = [[UIImageView alloc]initWithFrame:self.frame];

问题解决：

_imageView = [[UIImageView alloc]initWithFrame:self.bounds];

问题的原因是，我设置UIImageView 的位置是
self.frame 这个位置是相对于整个UICollectionView 的，再添加自定义Cell 上面的时候，就不对了，那个位置是cell相对于父视图 UICollectionView的，添加到Cell 上面的，UIImageView 的父视图是Cell 而不是UICollectionView，所以设置图片视图UIImageView 的位置的时候应该用相对于Cell 位置的self.bounds
 .

以上，就是我在实现UICollectionView 的时候碰到的小问题，以及自定义UICollectionViewCell 。啦啦啦啦