iOS：集合视图UICollectionView、集合视图控制器UICollectionViewController、集合视图单元格UICollectionViewCell(创建表格的另一种控件)

两种创建表格方式的比较：表格视图、集合视图（二者十分类似）

<1>相同点：

 

表格视图：UITableView(位于storyboard中,通过UIViewController控制器实现协议设置数据源和代理来操作)

表格视图单元格：UITableViewCell(在storyboard或xib中,可以或者不用关联自定义的类(UITableViewCell的子类),但是必须设定重用标示符ruseIdentifier,通过UIViewController控制器实现协议设置数据源和代理来操作)

表格视图控制器：UITableViewController(可以让UIViewController继承它来操作,也可以单独创建它作为控制器来操作,本身已经实现了所有的协议,无需再手动设置数据源和代理)

 

集合视图：UICollectionView(位于storyboard中,通过UIViewController控制器实现协议设置数据源和代理来操作)

集合视图单元格：UICollectionViewCell(在storyboard或xib中,可以或者不用关联自定义的(UICollectionViewCell的子类),但是必须设定重用标示符ruseIdentifier,通过UIViewController控制器实现协议设置数据源和代理来操作)

集合视图控制器：UICollectionViewContoroller(可以让UIViewController继承它来操作,也可以单独创建它作为控制器来操作,本身已经实现所有的协议,无需再手动设置数据源和代理)

 

<2>不同点：

 

a.第二种更灵活，功能更强大，因为第二种不但可以完成第一种的功能，还可以随意的进行布局,例如每一行可以有多个单元格项(即多列)。

b.集合视图单元格当在xib中创建后或者在storyboard中手动代码创建后,加载之前必须要进行注册的操作,不然的话,程序会报错；而表格视图单元格则直接加载,不用注册即可。

 

 不同情况下创建的集合视图单元格的注册方式：

1.//纯代码在storyboard创建UICollectionViewControllerCell时,使用该方法

[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];

2.//在拖拽UICollectionView到storyboard中时,视图中子带着一个UICollectionViewCell,此时不需要注册

3.//xib中创建UICollectionViewControllerCell时,使用该方法

[self.collectionView registerNib:[UINib nibWithNibName:@“<#name#>" bundle:nil]  forCellWithReuseIdentifier:reuseIdentifier];

前面已经介绍过第一种创建表格的方式 ，以下主要介绍第二种方式

《1》在storyboard中创建集合表格视图UICollectionView,它自带一个集合视图单元格UICollectionViewCell,在视图中设置集合视图单元格的布局,视图单元格中的控件需要通过它们的tag获取后，才能使用。

显示结果为：

故事板中集合视图和自带的集合视图单元格，单元格内有图像控件和标签控件：

　　　　　　　　storyboard中的集合视图,自带集合视图单元格

设置集合视图单元格的重用标示符ruseIdentifier

　　

实现代码为：

 #import "ViewController.h"

 @interface ViewController ()<UICollectionViewDataSource>
 @property (weak, nonatomic) IBOutlet UICollectionView *collectionView;

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];

     //设置数据源
     self.collectionView.dataSource = self;
 }

 #pragma mark -collectionView的方法
 //有多少个区
 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
 {
     return ;
 }
 //有多少个单元格项
 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 {
     return ;
 }
 //显示conllectionView的单元格
 -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     //设置重用单元格
     static NSString *reuseIndentifier = @"collectionCell";
     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];
     if(!cell)
     {
         cell = [[UICollectionViewCell alloc]init];
     }

     //设置图像
     UIImageView *imageView = (UIImageView*)[cell viewWithTag:];

     [imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.png",arc4random_uniform()]]];

     //设置标题
     UILabel *label = (UILabel*)[cell viewWithTag:];
     label.text = [NSString stringWithFormat:@"{%ld,%ld}",indexPath.section,indexPath.item];
     label.textColor = [UIColor redColor];

     return cell;
 }
 @end

《2》在storyboard中创建表格视图并设置视图单元格的布局,同时为视图单元格关联自定义的类,将单元格中控件链接到这个类中直接self.使用,不在用tag获取这些控件.

显示结果为：

 

　　试图控制器中的集合视图，自带集合视图单元格，单元格内包含一个图像控件和按钮控件：

　　所有文件　　　　　　　　　　　　　　故事板中的集合视图　　　　　　　　　

设置集合视图单元格的重用标示符ruseIdentifier,并将集合视图单元格关联自定义的类

 

实现代码为：

 #import "ViewController.h"
 #import "myCollectionViewCell.h"

 @interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
 @property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
 @end

 @implementation ViewController

 //按钮点击事件
 - (IBAction)buttonClicked:(UIButton *)sender
 {
     sender.enabled = NO;
     sender.titleLabel.textColor = [UIColor blackColor];
     sender.titleLabel.font = [UIFont systemFontOfSize:];
 }

 - (void)viewDidLoad {
     [super viewDidLoad];

     //设置数据源和代理
     self.collectionView.dataSource = self;
     self.collectionView.delegate = self;
 }

 #pragma mark -collectionView的数据源方法
 //有多少视图单元格项
 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 {
     return ;
 }
 //显示conllectionView的单元格
 -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     //设置重用单元格
     static NSString *reuseIndentifier = @"collectionCell";
     myCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];
     if(!cell)
     {
         cell = [[myCollectionViewCell alloc]init];
     }
     //设置cell的内容

     //设置图像
     [cell.imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.jpg",arc4random_uniform()]]];

     return cell;
 }

 #pragma mark -collectionView的代理方法
 -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
 {
     myCollectionViewCell *cell = (myCollectionViewCell*)[collectionView cellForItemAtIndexPath:indexPath];

     cell.button.titleLabel.textColor = [UIColor blueColor];
     cell.button.titleLabel.font = [UIFont systemFontOfSize:];
     [cell.button setEnabled:YES];
 }
 @end

《3》在xib中创建设置视图单元格UICollectionViewCell，在故事板中只存放一个集合视图UICollectionview,集合视图单元格中的控件通过tag获取,此时最重要的是要对单元格进行注册，不然程序会报错。

显示结果为

在xib中创建的集合视图单元格即布局以及设置重用标示符ruseIdentifier

主要代码为：

 #import "ViewController.h"
 //UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子类
 @interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
 @property (weak, nonatomic) IBOutlet UICollectionView *collectionView;

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     //设置数据源和代理
     self.collectionView.dataSource = self;
     self.collectionView.delegate = self;

     //注册cell,非常重要
     [self.collectionView registerNib:[UINib nibWithNibName:@"collection" bundle:nil] forCellWithReuseIdentifier:@"collectionCell"];
 }

 #pragma mark -collection的数据院方法
 //有多少个集合视图单元格
 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 {
     return ;
 }
 //显示conllectionView的单元格
 -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     //设置重用单元格
     static NSString *reuseIndentifier = @"collectionCell";
     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];
     if(!cell)
     {
         cell = [[UICollectionViewCell alloc]init];
     }
     //设置cell的内容

     //设置图像
     UIImageView *imageView = (UIImageView*)[cell viewWithTag:];

     [imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.jpg",arc4random_uniform()]]];

     return cell;
 }

 #pragma mark -collectionView的代理方法
 //设置每一个item的size和xib中自定义的一样大
 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     return CGSizeMake(, );
 }

 //设置每一个section的表头的size
 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
 {
     return CGSizeMake(, );
 }

 //设置每一个section的表尾的size
 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
 {
     return CGSizeMake(, );
 }

 //设置每一个collection的边距
 -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
 {
     return UIEdgeInsetsMake(, , , );
 }
 @end

《4》在xib中创建设置视图单元格UICollectionViewCell并关联自定义的类，在故事板中删除UIViewController控制器，创建集合视图控制器UICollectionViewController,集合视图单元格中的控件通过tag获取,将加载获取视图单元格的过程封装到自定义的单元格类中，此时重要的是也要对单元格进行注册，不然程序会报错。

显示结果如下：

在xib中创建的集合视图单元格即布局、以及设置重用标示符ruseIdentifier、删除故事板中的视图控制器，创建集合视图控制器，最后将集合视图单元格和集合视图控制器分别关联自己的类

　　　　　　　　所有的文件　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　xib中的集合视图单元格

        

　　故事板中的集合视图控制器　　　　　　　　　　　　但集合视图单元格设置宽度和高度

                    

　　将集合视图单元格与类关联　　　　　　　　　　　　设置重用单元格标示符　　　　　　　　　　将集合视图控制器与类关联

主要代码为：

 #import "myCollectionViewController.h"
 #import "myCollectionViewCell.h"

 @interface myCollectionViewController ()

 @end

 @implementation myCollectionViewController

 static NSString * const reuseIdentifier = @"collectionCell";

 - (void)viewDidLoad {
     [super viewDidLoad];

     //注册cell，很重要
     [self.collectionView registerNib:[UINib nibWithNibName:@"collection" bundle:nil] forCellWithReuseIdentifier:reuseIdentifier];
 }

 #pragma mark <UICollectionViewDataSource>
 //多少个section分区
 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
 {
     return ;
 }

 //每一个section分区有多少单元格项
 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 {
     return ;
 }

 //显示集合视图的单元格
 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 {

     //设置重用单元格
     myCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
     if(!cell)
     {
         cell = [myCollectionViewCell myCell];
     }

     //设置cell的内容
     //设置图像
     [cell.imagView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.jpg",arc4random_uniform()]]];

     return cell;
 }

 #pragma mark <UICollectionViewDelegate>

 //设置每一个item的size和xib中自定义的一样大
 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     return CGSizeMake(, );
 }

 //选中单元格高亮
 - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath
 {
     return YES;
 }

 @end

《5》纯代码创建集合视图和集合视图单元格。建立一个自定义的类继承UICollectionViewCell,对cell进行初始化和设置frame;在视图控制器UIViewController的类中代码创建集合视图UICollectionView,进行布局管理，最后添加到self.view中。

结果显示为：

主要代码为：

　　在单元格自定义类中：

　　

　　

　　在视图控制器UIController类中：

 #import "ViewController.h"
 #import "myCollectionViewCell.h"

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

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];

     //创建集合视图控件并布局
     CGRect rect=  self.view.frame;
     UICollectionViewFlowLayout *flowlyout = [[UICollectionViewFlowLayout alloc]init];

     UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:rect collectionViewLayout:flowlyout];

     [collectionView setBackgroundColor:[UIColor orangeColor]];

     //注册cell，很重要
     [collectionView registerClass:[myCollectionViewCell class] forCellWithReuseIdentifier:@"collectionCell"];

     //设置数据源和代理
     collectionView.dataSource = self;
     collectionView.delegate = self;

     //将集合视图添加到视图中
     [self.view addSubview:collectionView];
 }

 #pragma mark -collectionView的数据源方法
 //有多少个section分区
 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
 {
     return ;
 }
 //一个section有多少个单元格项item
 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 {
     return ;
 }
 //显示conllectionView的单元格
 -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     //设置重用单元格
     static NSString *reuseIndentifier = @"collectionCell";
     myCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];
     if(!cell)
     {
         cell = [[myCollectionViewCell alloc]init];
     }
     //设置cell的内容
     //设置图像
     [cell.imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.jpg",arc4random_uniform()]]];

     return cell;
 }

 #pragma mark -tableView的代理方法
 //设置每一个集合视图单元格的size
 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     return CGSizeMake(, );
 }
 //设置集合视图的表头的size
 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
 {
     return CGSizeMake(, );
 }
 @end