这里使用的是uicollectionview来实现的这种效果
基本实现思路是：使用storyboard布局方式（结合自定义cellview）来实现列表展示数据
在这里，我们在主视图中直接拖入一个uicollcetionview控件，其实它就相当一个容器，同时它会被默认设置一种流水方式的布局格式 uicollectionviewflowlayout
在对应的主视图控制器中分别设置 对应的uicollectionview 和uicollcetionviewflowlayout的引用
创建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;
}
#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
首先在这里定义声明了maincollectionview引用 和 mainflowlayout引用，其分别指向第一步中创建的storyboard文件中的uicollectionview 与uicollectionview中对应的流水布局uicollectionviewflowlayout
每一个uicollectionview必然对应一个布局方式，其指定了uicollectionview中的item的排列方式
在这里默认设置了uicollectionviewflowlayout流水式布局方式
在4.1中我们谈到在storyboard中默认设置了一个流水布局方式，如果我们是在使用代码创建，那么必须定义设置一种布局方式，否则会抛出异常；
同时也必须将uicollectionview中对应的cell条目类型进行注册，否则会抛出指定异常
在上面我们还设置了uicollectionview的条目显示大小 ，如果不进行设置，那么其默认显示大小 为 50 x 50
uicollcetionview同时支持分组显示功能 ，与uitableview的功能相似
使用uicollectionview 与 自定义xib方式来实现的列表展示
其次这里使用的是storyboard文件方式定义规划的布局
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
#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方法，进行对相应的控件进行了赋值操作
如对本文有疑问， 点击进行留言回复！！
网友评论