iOS：集合视图UICollectionView、集合视图控制器UICollectionViewController、集合视图单元格UICo...-低调大师

iOS：集合视图UICollectionView、集合视图控制器UICollectionViewController、集合视图单元格UICo...

2017-08-09 537

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

<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

实现代码为：

 1 #import "ViewController.h"
 2 
 3 @interface ViewController ()<UICollectionViewDataSource>
 4 @property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
 5 
 6 @end
 7 
 8 @implementation ViewController
 9 
10 - (void)viewDidLoad {
11     [super viewDidLoad];
12     
13     //设置数据源
14     self.collectionView.dataSource = self;
15 }
16 
17 #pragma mark -collectionView的方法
18 //有多少个区
19 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
20 {
21     return 1;
22 }
23 //有多少个单元格项
24 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
25 {
26     return 30;
27 }
28 //显示conllectionView的单元格
29 -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
30 {
31     //设置重用单元格
32     static NSString *reuseIndentifier = @"collectionCell";
33     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];
34     if(!cell)
35     {
36         cell = [[UICollectionViewCell alloc]init];
37     }
38     
39     //设置图像
40     UIImageView *imageView = (UIImageView*)[cell viewWithTag:1];
41     
42     [imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.png",arc4random_uniform(3)]]];
43     
44     //设置标题
45     UILabel *label = (UILabel*)[cell viewWithTag:2];
46     label.text = [NSString stringWithFormat:@"{%ld,%ld}",indexPath.section,indexPath.item];
47     label.textColor = [UIColor redColor];
48     
49     return cell;
50 }
51 @end

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

显示结果为：

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

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

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

实现代码为：

 1 #import "ViewController.h"
 2 #import "myCollectionViewCell.h"
 3 
 4 @interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
 5 @property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
 6 @end
 7 
 8 @implementation ViewController
 9 
10 //按钮点击事件
11 - (IBAction)buttonClicked:(UIButton *)sender
12 {
13     sender.enabled = NO;
14     sender.titleLabel.textColor = [UIColor blackColor];
15     sender.titleLabel.font = [UIFont systemFontOfSize:20];
16 }
17 
18 - (void)viewDidLoad {
19     [super viewDidLoad];
20    
21     //设置数据源和代理
22     self.collectionView.dataSource = self;
23     self.collectionView.delegate = self;
24 }
25 
26 #pragma mark -collectionView的数据源方法
27 //有多少视图单元格项
28 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
29 {
30     return 30;
31 }
32 //显示conllectionView的单元格
33 -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
34 {
35     //设置重用单元格
36     static NSString *reuseIndentifier = @"collectionCell";
37     myCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];
38     if(!cell)
39     {
40         cell = [[myCollectionViewCell alloc]init];
41     }
42     //设置cell的内容
43     
44     //设置图像
45     [cell.imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.jpg",arc4random_uniform(3)]]];
46     
47     return cell;
48 }
49 
50 #pragma mark -collectionView的代理方法
51 -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
52 {
53     myCollectionViewCell *cell = (myCollectionViewCell*)[collectionView cellForItemAtIndexPath:indexPath];
54     
55     cell.button.titleLabel.textColor = [UIColor blueColor];
56     cell.button.titleLabel.font = [UIFont systemFontOfSize:15];
57     [cell.button setEnabled:YES];
58 }
59 @end

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

显示结果为

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

主要代码为：

 1 #import "ViewController.h"
 2 //UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子类
 3 @interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
 4 @property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
 5 
 6 @end
 7 
 8 @implementation ViewController
 9 
10 - (void)viewDidLoad {
11     [super viewDidLoad];
12     //设置数据源和代理
13     self.collectionView.dataSource = self;
14     self.collectionView.delegate = self;
15     
16     //注册cell,非常重要
17     [self.collectionView registerNib:[UINib nibWithNibName:@"collection" bundle:nil] forCellWithReuseIdentifier:@"collectionCell"];
18 }
19 
20 #pragma mark -collection的数据院方法
21 //有多少个集合视图单元格
22 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
23 {
24     return 10;
25 }
26 //显示conllectionView的单元格
27 -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
28 {
29     //设置重用单元格
30     static NSString *reuseIndentifier = @"collectionCell";
31     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];
32     if(!cell)
33     {
34         cell = [[UICollectionViewCell alloc]init];
35     }
36     //设置cell的内容
37     
38     //设置图像
39     UIImageView *imageView = (UIImageView*)[cell viewWithTag:1];
40     
41     [imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.jpg",arc4random_uniform(3)]]];
42     
43     return cell;
44 }
45 
46 #pragma mark -collectionView的代理方法
47 //设置每一个item的size和xib中自定义的一样大
48 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
49 {
50     return CGSizeMake(300, 300);
51 }
52 
53 //设置每一个section的表头的size
54 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
55 {
56     return CGSizeMake(20, 20);
57 }
58 
59 //设置每一个section的表尾的size
60 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
61 {
62     return CGSizeMake(20, 20);
63 }
64 
65 //设置每一个collection的边距
66 -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
67 {
68     return UIEdgeInsetsMake(5, 5, 5, 5);
69 }
70 @end

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

显示结果如下：

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

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

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

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

主要代码为：

 1 #import "myCollectionViewController.h"
 2 #import "myCollectionViewCell.h"
 3 
 4 @interface myCollectionViewController ()
 5 
 6 @end
 7 
 8 @implementation myCollectionViewController
 9 
10 static NSString * const reuseIdentifier = @"collectionCell";
11 
12 - (void)viewDidLoad {
13     [super viewDidLoad];
14     
15     //注册cell，很重要
16     [self.collectionView registerNib:[UINib nibWithNibName:@"collection" bundle:nil] forCellWithReuseIdentifier:reuseIdentifier];
17 }
18 
19 #pragma mark <UICollectionViewDataSource>
20 //多少个section分区
21 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
22 {
23     return 1;
24 }
25 
26 //每一个section分区有多少单元格项
27 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
28 {
29     return 10;
30 }
31 
32 //显示集合视图的单元格
33 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
34 {
35     
36     //设置重用单元格
37     myCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
38     if(!cell)
39     {
40         cell = [myCollectionViewCell myCell];
41     }
42     
43     //设置cell的内容
44     //设置图像
45     [cell.imagView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.jpg",arc4random_uniform(3)]]];
46     
47     return cell;
48 }
49 
50 #pragma mark <UICollectionViewDelegate>
51 
52 //设置每一个item的size和xib中自定义的一样大
53 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
54 {
55     return CGSizeMake(300, 300);
56 }
57 
58 //选中单元格高亮
59 - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath
60 {
61     return YES;
62 }
63 
64 @end

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

结果显示为：

主要代码为：

　　在单元格自定义类中：

　　在视图控制器UIController类中：

 1 #import "ViewController.h"
 2 #import "myCollectionViewCell.h"
 3 
 4 @interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
 5 @end
 6 
 7 @implementation ViewController
 8 
 9 - (void)viewDidLoad {
10     [super viewDidLoad];
11     
12     //创建集合视图控件并布局
13     CGRect rect=  self.view.frame;
14     UICollectionViewFlowLayout *flowlyout = [[UICollectionViewFlowLayout alloc]init];
15     
16     UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:rect collectionViewLayout:flowlyout];
17     
18     [collectionView setBackgroundColor:[UIColor orangeColor]];
19     
20     //注册cell，很重要
21     [collectionView registerClass:[myCollectionViewCell class] forCellWithReuseIdentifier:@"collectionCell"];
22     
23     //设置数据源和代理
24     collectionView.dataSource = self;
25     collectionView.delegate = self;
26     
27     
28     //将集合视图添加到视图中
29     [self.view addSubview:collectionView];
30 }
31 
32 #pragma mark -collectionView的数据源方法
33 //有多少个section分区
34 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
35 {
36     return 1;
37 }
38 //一个section有多少个单元格项item
39 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
40 {
41     return 10;
42 }
43 //显示conllectionView的单元格
44 -(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
45 {
46     //设置重用单元格
47     static NSString *reuseIndentifier = @"collectionCell";
48     myCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];
49     if(!cell)
50     {
51         cell = [[myCollectionViewCell alloc]init];
52     }
53     //设置cell的内容
54     //设置图像
55     [cell.imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"美女%d.jpg",arc4random_uniform(3)]]];
56     
57     return cell;
58 }
59 
60 #pragma mark -tableView的代理方法
61 //设置每一个集合视图单元格的size
62 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
63 {
64     return CGSizeMake(300, 300);
65 }
66 //设置集合视图的表头的size
67 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
68 {
69     return CGSizeMake(20, 20);
70 }
71 @end

程序猿神奇的手，每时每刻，这双手都在改变着世界的交互方式！

本文转自当天真遇到现实博客园博客，原文链接：http://www.cnblogs.com/XYQ-208910/p/4799089.html，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/362711

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

iOS:视图切换的第二种方式：UINavigationController导航栏控制器

UINavigationController：一个以栈的形式管理多视图的容器，负责子控制器之间的跳转。由于以栈的方式管理视图，各个视图的切换就是压栈和出栈操作，所以出栈后的视图会立即销毁。介绍： <1> UINavigationController也是容器的一种，负责子控制器之间的跳转 <2> UINavigationController以栈的形式保存子控制器，这里的栈其实是个NSArray对象，只有位于栈顶的子控制器的view才是可见的 <3> 常用属性： –UIViewController*topViewController处于栈顶的子控制器 –NSArray*viewControllers栈，存放着所有的子控制器 <4> UINavigationController的view包括了两大部分：上面是UINavigationBar导航栏，里面放着导航栏标题和navigationItem导航条。下面是topViewController的view，topViewController的navigationItem属性决定了UINavig...

2017-08-10

754

删除、插入、移动单元格的具体实例如下：代码如下： 1 #import "ViewController.h" 2 #define NUM 20 3 typedef enum 4 { 5 deleteCell, 6 addCell, 7 moveCell, 8 }cellState; 9 @interface ViewController ()<UITableViewDataSource,UITableViewDelegate> 10 @property (weak, nonatomic) IBOutlet UITableView *tableView; 11 @property (strong,nonatomic)NSMutableArray *arrayM; 12 @property (assign,nonatomic)cellState state; //对单元格要处理的状态 13 @end 14 15 @implementation ViewController 16 //删除单元格 17 - (IBAction)addCellClicked:(UIBarBu...

2017-08-10

539

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。