自定义UICollectionViewCell 以及碰到的问题
原创 2016年09月12日 16:37:50 标签：UICollectionView /自定义UIControllViewCel /ios 10024
前言：
今天没事自己写了个UICollectionView也就是九宫格的demo ，遇到几个小问题，虽然都很快解决了，但是这里还是把它记录下来，以后方便查阅。
（UICollectionView 一下用九宫格代称）废话不多说了，直接开始。微笑
创建一个UICollectionView
首先，创建一个UICollectionView ，需要设置的几个代理 UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout。九宫格 跟UITableView类似，这里只是实现最简单的代理方法。
[objc] view plain copy
-
(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，这个下面再讲。
上面我就碰到了了一个小问题，其实也是我自己不细心的原因，但是也是容易出错的地方：
[objc] view plain copy
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
_collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];
上面的UICollectionViewFlowLayout ，这个类是九宫格用来实现自动布局的，注意千万不要写错，我就因为写错，写成了
UICollectionViewLayout （这个类我是直接点击去九宫格的初始化方法里面看到的）导致了九宫格显示不出来，其他地方也没有错，
调了好几遍，最后终于发现是这个类写错了，UICollectionViewFlowLayout 是UICollectionViewLayout 的子类。
好了，一个问题过去了。
准备UICollectionView 的数据
在实现九宫格的代理方法之前，先展示一下 需要的数据
[objc] view plain copy
@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的代理
[objc] view plain copy
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>
[objc] view plain copy
pragma mark UIAlertView
-
(void)alertView:(NSString *)message
{
UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:message delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil nil];[alert show];
}
上面就是九宫格的代理方法（没有列全，只是简单实现了UICollectionView）,上面的方法 看注释。
自定义UICollectionViewCell
重点是设置Cell的方法，我是使用了自定义Cell,这里就会显示出UICollectionView 与 UITableview 的不同.
首先，UICollectionView 与UITableView 都有类似的
[objc] view plain copy
[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
这个是 Cell 的重用机制。UITableView 需要判断Cell是否 为空
[objc] view plain copy
if (cell == nil) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
}
如果cell =nil 里面就可以使用 自定义 UITableViewCell 这里不再说了，但是UICollectionView 不需要判断Cell 是否为nil,可以使用系统
的UICollectionViewCell 也可以使用自定义的UICollectionViewCell，我们一般用的就是自定义的Cell .
[objc] view plain copy
-
(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 可以根据需要
自行设置），
[objc] view plain copy
.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 的方法好像只能写
[objc] view plain copy
(instancetype)initWithFrame:(CGRect)frame
我使用
[objc] view plain copy-
(instancetype)init
{
self = [super init];
if (self) {}
return self;
}
但是没有执行，好了。我们知道使用
[objc] view plain copy (instancetype)initWithFrame:(CGRect)frame
去初始化一个自定义的Cell 。
自定义UICollectionViewCell 注意
这里我又连续碰到了2个问题，当然我上面粘贴出来出来的都是正确的。先说说第一个问题，我是在
[objc] view plain copy
(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;
}
这里面根据我传递过来的图片名字设置图片的，但是图片并没有显示出来。不知道你注意到了这个没有
[objc] view plain copy-
(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 里面的显示的数据。
[objc] view plain copy (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 的位置。
问题出现前：
[objc] view plain copy
_imageView = [[UIImageView alloc]initWithFrame:self.frame];
问题解决：
[objc] view plain copy
_imageView = [[UIImageView alloc]initWithFrame:self.bounds];
问题的原因是，我设置UIImageView 的位置是 self.frame 这个位置是相对于整个UICollectionView 的，再添加自定义Cell 上面的时候，就不对了，那个位置是cell相对于父视图 UICollectionView的，添加到Cell 上面的，UIImageView 的父视图是Cell 而不是UICollectionView，所以设置图片视图UIImageView 的位置的时候应该用相对于Cell 位置的self.bounds .
以上，就是我在实现UICollectionView 的时候碰到的小问题，以及自定义UICollectionViewCell 。啦啦啦啦得意
