IOS-—UICollectionView使用综述(一 )(基础篇--垂直列表方式,横向相册方式)
效果展示 :
1、简述
这里使用的是uicollectionview来实现的这种效果
2、storyboard与自定义cell方式实现
基本实现思路是:使用storyboard布局方式(结合自定义cellview)来实现列表展示数据
2.1 首先定义storyboard文件中的内容
在这里,我们在主视图中直接拖入一个uicollcetionview控件,其实它就相当一个容器,同时它会被默认设置一种流水方式的布局格式 uicollectionviewflowlayout
在对应的主视图控制器中分别设置 对应的uicollectionview 和uicollcetionviewflowlayout的引用
2.2、自定义cellview展示条目
创建appcell.h文件 ,继承于uicollcetionviewcell
在appcell.m文件中实现初始化方法
#import "appcell.h" @implementation appcell -(instancetype)initwithframe:(cgrect)frame{ if (self = [super initwithframe:frame]) { //1、获取cell的size cgsize cellsize = self.contentview.frame.size; //2、添加一个显示标题的title //2.1、创建label uilabel *titlelabel = [[uilabel alloc]initwithframe:cgrectmake(0, 0, cellsize.width, 20)]; //2.2、设置默认显示标题 titlelabel.text=@"神奇的小镇"; //2.3、添加到cell中去 [self.contentview addsubview:titlelabel]; //3、添加一个imageview显示图片 //3.1、创建imageview uiimageview *imageview =[[uiimageview alloc]initwithframe:cgrectmake(0,25, cellsize.width, cellsize.height-25)]; //3.2、设置默认显示的图片 imageview.image = [uiimage imagenamed:@"aqs"]; //3.3、添加到cell中 [self.contentview addsubview:imageview]; } return self; }
可以看到在这个自定义的cell中,添加了一个用于显示图片的uiimageview 和一个用于显示文字标题的uilabel,也就是说当我们的条目内容比较复杂的时候,可以使用这种方式来设置添加
2.3、设置视图显示
#import "viewcontroller.h" #import "appcell.h" @interface viewcontroller () //对应storyboard中的uicollcetionview @property (weak, nonatomic) iboutlet uicollectionview *maincollectionview; //对应storyboard中uicollectionview 中的流水布局flowlayout @property (weak, nonatomic) iboutlet uicollectionviewflowlayout *mainflowlayout; @end //重用标识符 static nsstring *ident=@"cell"; @implementation viewcontroller - (void)viewdidload { [super viewdidload]; //设置代理 self.maincollectionview.datasource = self; //注册cell [self.maincollectionview registerclass:[appcell class] forcellwithreuseidentifier:ident]; //设置item的大小 self.mainflowlayout.itemsize = cgsizemake(self.view.frame.size.width-20, 200); } //组 -(nsinteger)numberofsectionsincollectionview:(uicollectionview *)collectionview{ return 1; } //列 -(nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section{ return 30; } //视图 -(uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath{ appcell *cell =[collectionview dequeuereusablecellwithreuseidentifier:ident forindexpath:indexpath]; if (cell == nil) { cell = [[appcell alloc]init]; } cell.backgroundcolor = [uicolor colorwithred:248 green:248 blue:248 alpha:1]; return cell; } @end
2.3.1 视图引用
首先在这里定义声明了maincollectionview引用 和 mainflowlayout引用,其分别指向第一步中创建的storyboard文件中的uicollectionview 与uicollectionview中对应的流水布局uicollectionviewflowlayout
每一个uicollectionview必然对应一个布局方式,其指定了uicollectionview中的item的排列方式
在这里默认设置了uicollectionviewflowlayout流水式布局方式
2.3.2 uicollectionview的相关设置
在4.1中我们谈到在storyboard中默认设置了一个流水布局方式,如果我们是在使用代码创建,那么必须定义设置一种布局方式,否则会抛出异常;
同时也必须将uicollectionview中对应的cell条目类型进行注册,否则会抛出指定异常
在上面我们还设置了uicollectionview的条目显示大小 ,如果不进行设置,那么其默认显示大小 为 50 x 50
2.3.3 uicollectionview分组支持
uicollcetionview同时支持分组显示功能 ,与uitableview的功能相似
3、storyboard与自定义xib方式实现
使用uicollectionview 与 自定义xib方式来实现的列表展示
其次这里使用的是storyboard文件方式定义规划的布局
3.1 自定义条目cell 对应的xib文件
3.1.1 在xib文件中,对应了控制器appcell
3.1.2 xib文件中分别设置规划了一个用于显示图片的uiimageview 和一个用于显示图片标题的 uilabel
3.1.3 对应的控制器中也设置了相应的控件引用
appcell.h 中
#import "appcell.h" @interface appcell () @property (weak, nonatomic) iboutlet uiimageview *imageview; @property (weak, nonatomic) iboutlet uilabel *titlelabel; @end @implementation appcell - (void)awakefromnib { [super awakefromnib]; // initialization code } -(void)setimagpath:(nsstring *)imagpath{ _imagpath = imagpath; //设置imageview self.imageview.image = [uiimage imagenamed:imagpath]; //设置显示标题 self.titlelabel.text = @"this is a text"; } @end
可以看到在这里重写了imagpath的set方法,也就是说当调用appcell.imagpath时候,会执行到setimagpath方法,在这个方法中就将对应的数据设置显示到对应的控件上。
3.2uicollectionview的相关设置
#import "viewcontroller.h" #import "appcell.h" @interface viewcontroller () //对应storyboard中的uicollcetionview @property (weak, nonatomic) iboutlet uicollectionview *maincollcetionview; //对应storyboard中uicollectionview 中的流水布局flowlayout @property (weak, nonatomic) iboutlet uicollectionviewflowlayout *mainflowlayout; @end //cell重用标识符 static nsstring *ident=@"cell"; @implementation viewcontroller - (void)viewdidload { [super viewdidload]; //设置item的大小 self.mainflowlayout.itemsize = cgsizemake(self.view.frame.size.width-20, 180); //设置代理 self.maincollcetionview.datasource = self; //注册cell uinib *cellnib = [uinib nibwithnibname:@"appcell" bundle:nil]; [self.maincollcetionview registernib:cellnib forcellwithreuseidentifier:ident]; } //组 -(nsinteger)numberofsectionsincollectionview:(uicollectionview *)collectionview{ return 1; } //列 -(nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section{ return 30; } -(uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath{ appcell *cell =[collectionview dequeuereusablecellwithreuseidentifier:ident forindexpath:indexpath]; if (cell == nil) { cell = [[appcell alloc]init]; } //设置背景 cell.backgroundcolor = [uicolor colorwithred:248 green:248 blue:248 alpha:1]; //设置显示数据 cell.imagpath = @"aqs"; return cell; } @end
3.2.1 我们在使用uicollectionview的时候必须要对条目cellview进行注册设置,而在这里,则是先获取对应的uinib,然后再调用uinib对应的方法对其进行注册
3.2.2 在cellforitematindexpath方法中,我们调用方法 cell.imagpayh 并对其进行赋值操作,会调用到appcell对应的setimagpath方法,进行对相应的控件进行了赋值操作
上一篇: HTML5新特性汇总