欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

IOS-—UICollectionView使用综述(一 )(基础篇--垂直列表方式,横向相册方式)

程序员文章站 2022-06-08 17:52:45
效果展示 : 1、简述 这里使用的是uicollectionview来实现的这种效果 2、storyboard与自定义cell方式实现   基本实现思路是:使用storyboard布局方...

效果展示 :

IOS-—UICollectionView使用综述(一 )(基础篇--垂直列表方式,横向相册方式)

1、简述

这里使用的是uicollectionview来实现的这种效果

2、storyboard与自定义cell方式实现

 

基本实现思路是:使用storyboard布局方式(结合自定义cellview)来实现列表展示数据

 

2.1 首先定义storyboard文件中的内容

 

IOS-—UICollectionView使用综述(一 )(基础篇--垂直列表方式,横向相册方式)

在这里,我们在主视图中直接拖入一个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文件

 

IOS-—UICollectionView使用综述(一 )(基础篇--垂直列表方式,横向相册方式)

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方法,进行对相应的控件进行了赋值操作