一.使用故事板创建UICollectionViewCell
1.在故事板中拖一个ICollectionView,并设置它的大小跟屏幕大小一样,再在自带的UICollectionViewCell填充内容,这里创建了一个UILabel.如下图所示:

2.再与UICollectionView和UICollectionView FlowLayout关联,如下如图:

3.设置数据源和代理:(将UICollectionView的dataSource和delegate关联),如下图:

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
- 创建一个UICollectionViewCell类并自带xib的文件(这样就关联好了,如果不自带xib文件还需手工关联).
- 可以在xib文件中填充内容,如下图:
- 代码实现:
//
// 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
运行效果: