UICollectionViewCell的四种创建方法

一.使用故事板创建UICollectionViewCell

1.在故事板中拖一个ICollectionView,并设置它的大小跟屏幕大小一样,再在自带的UICollectionViewCell填充内容,这里创建了一个UILabel.如下图所示:
![这里写图片描述](https://img-blog.youkuaiyun.com/20160722203828848)
2.再与UICollectionView和UICollectionView FlowLayout关联,如下如图:
![这里写图片描述](https://img-blog.youkuaiyun.com/20160722204107162)
3.设置数据源和代理:(将UICollectionView的dataSource和delegate关联),如下图:
![这里写图片描述](https://img-blog.youkuaiyun.com/20160722204422554)

4.设置UICollectionViewCell(重用单元格)ID:

5.代码的实现:

//
//  ViewController.m
//  UICollectionViewDemo1
//
//  Created by mac on 16/7/22.
//  Copyright © 2016年 huang. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //行与行间的距离
    _flowLayout.minimumLineSpacing = 10;
    //列与列间的距离
    _flowLayout.minimumInteritemSpacing = 10;
    //设置item的大小
    _flowLayout.itemSize = CGSizeMake(100, 200);
    _flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    //给集合视图添加背景颜色
    _StoryboarcollectionView.backgroundColor = [UIColor lightGrayColor];
    }

#pragma mark - UICollectionViewDataSource必须实现的方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 10;
}


- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionView_Cell" forIndexPath:indexPath];
    UILabel *textLabel = [cell viewWithTag:1000];
    //
    textLabel.text = @"使用storyboard的UICollectionView";
    cell.backgroundColor = [UIColor redColor];
    [cell addSubview:textLabel];
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.frame.size.width, cell.frame.size.height)];
    view.backgroundColor = [UIColor orangeColor];
    cell.selectedBackgroundView = view;
    return cell;
}
@end

需要注意的地方:
1. ICollectionView一旦在故事板中创建并关联了就不需要再初始化了(不像UITableView)
2. 注意UICollectionViewCell在故事板中绑定ID(重用单元格),不需要在用代码注册.

二.使用xib文件注册创建UICollectionViewCell

1. 创建一个UICollectionViewCell类并自带xib的文件(这样就关联好了,如果不自带xib文件还需手工关联).
2. 可以在xib文件中填充内容,如下图:
   
3. 代码实现:

//
//  ViewController.m
//  UICollectionViewDemo2
//
//  Created by mac on 16/7/22.
//  Copyright © 2016年 huang. All rights reserved.
//

#import "ViewController.h"
#import "CustomCollectionViewCell.h"

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

    //行与行间的距离
    flowLayout.minimumLineSpacing = 10;
    //列与列间的距离
    flowLayout.minimumInteritemSpacing = 10;
    //设置item的大小
    flowLayout.itemSize = CGSizeMake(100, 200);
    //边界值
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    collectionView.dataSource = self;
    //给集合视图添加背景颜色
    collectionView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:collectionView];


 //注册Nib
    [collectionView registerNib:[UINib nibWithNibName:@"CustomCollectionViewCell" bundle:nil]
forCellWithReuseIdentifier:@"CustomCollectionView_Cell"];

}
#pragma mark - UICollectionViewDataSource必选方法
//item的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
}

//返回item
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    CustomCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CustomCollectionView_Cell" forIndexPath:indexPath];
    return cell;
}
@end

4.需要注意的地方:
1) 故事板中的UICollectionViewCell不需要给(重用单元格id),因为代码中自定义,否则会出错.
2)注意需要初始化集合视图

三.纯代码创建UICollectionViewCell(使用注册类)

1.创建另一个继承于UICollectionViewCell的类
2.在该类中覆写initwithFrame方法,也可以在该方法中创建UICollectionViewCell的内容.
实现代码:

//
//  CustomCollectionViewCell.m
//  UICollectionViewDemo3
//
//  Created by mac on 16/7/22.
//  Copyright © 2016年 huang. All rights reserved.
//

#import "CustomCollectionViewCell0.h"
@implementation CustomCollectionViewCell0
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //创建子视图
       [self createSubViews];
    }
    return self;
}
- (void) createSubViews {
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 50, 80, 40)];
    label.backgroundColor = [UIColor orangeColor];
    label.text = @"使用注册类创建CollectionViewCell";
    label.font = [UIFont systemFontOfSize:11];
    [self addSubview:label];
}

//每一组的偏移量
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

    return UIEdgeInsetsMake(0, 50, 0, 0);
}
@end

//
//  ViewController.m
//  UICollectionViewDemo3
//
//  Created by mac on 16/7/22.
//  Copyright © 2016年 huang. All rights reserved.
//

#import "ViewController.h"
#import "CustomCollectionViewCell0.h"

@interface ViewController ()

@end

viewController.m文件
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    //创建UICollectionView
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //行与行间的距离
    flowLayout.minimumLineSpacing = 10;
    //列与列间的距离
    flowLayout.minimumInteritemSpacing = 10;
    //设置item的大小
    flowLayout.itemSize = CGSizeMake(110, 200);
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

    //创建集合视图
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:flowLayout];
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor lightGrayColor];
    [collectionView registerClass:[CustomCollectionViewCell0 class] forCellWithReuseIdentifier:@"customCollectionCell"];
    [self.view addSubview:collectionView];
}

#pragma mark - UICollectionView DataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 20;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    CustomCollectionViewCell0 *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"customCollectionCell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor]; 
    return cell;
}
@end

四.使用自带的UICollectionViewCell创建
跟纯代码类似,唯一不同的是不需要另创建继承UICollectionViewCell的类,注册类时使用自带的UICollectionViewCell创建即可.
代码如下

//
//  ViewController.m
//  UICollectionViewDemo3
//
//  Created by mac on 16/7/22.
//  Copyright © 2016年 huang. All rights reserved.
//

#import "ViewController.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDataSource>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //创建flowLayout
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //行与行间的距离
    flowLayout.minimumLineSpacing = 10;
    //列与列间的距离
    flowLayout.minimumInteritemSpacing = 10;
    //设置item的大小
    flowLayout.itemSize = CGSizeMake(110, 200);
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

    //创建集合视图
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:flowLayout];
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor lightGrayColor];
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"customCollectionCell"];
    [self.view addSubview:collectionView];
}

#pragma mark - UICollectionView DataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 20;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"customCollectionCell" forIndexPath:indexPath];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 100, 40)];
    label.backgroundColor = [UIColor orangeColor];
    label.text = @"使用自带的类创建CollectionViewCell";
    label.font = [UIFont systemFontOfSize:9];
    [cell addSubview:label];
    cell.backgroundColor = [UIColor redColor];
     return cell;
}
@end

运行效果: