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