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 ()<UICollectionViewDataSource>

//对应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.2 UICollectionView的相关设置 

#import "ViewController.h"
#import "AppCell.h"

@interface ViewController ()<UICollectionViewDataSource>
//对应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方法，进行对相应的控件进行了赋值操作

4、代码方式创建 UICollectionView 与 自定义Cell

这里使用的是代码方式创建 UICollectionView 与 自定义Cell

4.1 代码方式创建自定义Cell 

AppCell.h 

#import <UIKit/UIKit.h>

@interface AppCell : UICollectionViewCell

@end

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、初始化一个ImageView
UIImageView *imageView =[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, cellSize.width, cellSize.height-20)];
//3、设置默认显示图片
imageView.image = [UIImage imageNamed:@"aqs"];
//4、将ImageView添加到Cell视图中去
[self.contentView addSubview:imageView];

//5、创建UILabel显示图片的名称
UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, cellSize.height-20, cellSize.width, 20)];
//6、设置显示默认的文字
titleLabel.text = @"图片";
//7、将label添加到Cell中
[self.contentView addSubview:titleLabel];
}
return self;
}

@end

    需要注意的是，在这里AppCell要继承于UICollectionViewCell

    在initWithFrame方法中初始化相应的控件并设置其布局位置与大小以及默认显示的数据

4.2 代码方式创建UICollectionView 

    在对应的显示显示页面的控制器中

#import "ViewController.h"
#import "AppCell.h"

@interface ViewController ()<UICollectionViewDataSource>

@end

//定义Cell重用标识符
static NSString *ident = @"cell";
@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

//1、实例化一个流水布局
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
//1-1、设置Cell大小
flowLayout.itemSize= CGSizeMake(self.view.frame.size.width-30, 100);
//1-2、设置四周边距
flowLayout.sectionInset = UIEdgeInsetsMake(10, 15, 10, 15);
//1-3、设置最小列之间的距离
flowLayout.minimumLineSpacing = 10;
//1-4、设置最小行之间的距离
flowLayout.minimumLineSpacing = 20;

//2、实例化创建一个 UICollectionView
//UICollectionView必须有一个 flowLayout ，必须在实例化的时候进行设置
UICollectionView  *collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
//3、设置背景为白色
collectionView.backgroundColor = [UIColor whiteColor];

//4、设置数据源代理
collectionView.dataSource = self;
//添加到视图中
[self.view addSubview:collectionView];
//注册Cell视图
[collectionView registerClass:[AppCell class] forCellWithReuseIdentifier:ident];
}

//组
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
//列
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 30;
}
//子View
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

AppCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ident forIndexPath:indexPath];

if (cell==nil) {
cell = [[AppCell alloc]init];
}

return cell;
}

@end

    

    4.2.1 值得注意的是每一个UICollectionView 必然对应着一个布局方式 ，也就是说在创建UICollectionView的时候，必须指定相应的布局方式，在这里，我们首先创建了UICollectionViewFlowLayout流水布局方式，然后在后续中指向于UICollcetionView的创建 

    4.2..2 必须要注册UICollectionView 条目中使用到的Cell

5、UICollectionViewController方式来实现视图的横向滑动

<图片来源 黑马>

5.1 主视图对应的storyboard文件中

    5.1.1  在这里，显示视图中直接布局UICollectionViewController，同时指向一个控制器，在控制中设置 UICollectionView 与UICollectionViewFlowLayout的引用

    5.1.2  同时设置其中的Cell ，在这里添加了一个用于显示图片的UIImageView 与显示文字 标识的UILabel ,并设置引用相对应的控制器 

5.2 自定义条目AppCell 

AppCell.h 

#import <UIKit/UIKit.h>

@interface AppCell : UICollectionViewCell

@property(copy,nonatomic) NSString *images;
@property(copy,nonatomic) NSString *indexs;

@end

AppCell.m

#import "AppCell.h"

@interface AppCell ()

//Cell 中对应显示图片的控件 UIImageView
@property (weak, nonatomic) IBOutlet UIImageView *image;
//Cell 中对应显示文字的控件 UILabel
@property (weak, nonatomic) IBOutlet UILabel *lable;

@end

@implementation CellViewCollectionViewCell

-(void)setImages:(NSString *)images{
//设置显示图片
UIImage *image = [UIImage imageNamed:images];

_image.image = image;
}

-(void)setIndexs:(NSString *)indexs{
//设置显示对应文字标识
_lable.text = indexs;
}

@end

    在这里AppCell继承于UICollectionViewCell,其中定义的 images 与 indexs 分别为Cell对应的图片地址与文字说明

    在AppCell.m中重写images 与 index  的set的方法，当在外界通过点语法来对其进行赋值操作的同时，赋值于控件。

5.3 主视图对应的控制器

ViewController.h 

#import <UIKit/UIKit.h>

@interface ViewController : UICollectionViewController

@end

ViewController.m

#import "ViewController.h"
#import "AppCell.h"

@interface ViewController ()<UICollectionViewDataSource>

//对应视图中的UICollectionView 中的默认流水布局
@property (weak, nonatomic) IBOutlet UICollectionViewFlowLayout *flowlayout;
//对应视图中的UICollectionView
@property (weak, nonatomic) IBOutlet UICollectionView *collectionViews;

//图片路径数据源
@property(nonatomic,strong) NSArray *dataArray;
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
//设置背景
self.collectionView.backgroundColor = [UIColor whiteColor];
//设置大小
_flowlayout.itemSize = self.view.bounds.size;

//代理
self.collectionView.dataSource =self;

// 修改滚动方向
_flowlayout.scrollDirection =  UICollectionViewScrollDirectionHorizontal;

// 设置 行间距
_flowlayout.minimumLineSpacing = 0;

// 隐藏滚动条
_collectionViews.showsHorizontalScrollIndicator = NO;

// 设置分页效果
_collectionViews.pagingEnabled = YES;

// 设置弹簧效果
_collectionViews.bounces =  NO;

}

-(NSArray *)dataArray{
if (_dataArray==nil) {
// 创建临时数组
NSMutableArray *mutable = [NSMutableArray array];
// 加载所有图片
for (int i = 0; i < 9; i++) {
// 拼接图片名称
NSString *imageName = [NSString stringWithFormat:@"%d.jpg",i];
[mutable addObject:imageName];
}

// 赋值
_dataArray = mutable;
}
return _dataArray;

}

//
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 10;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

AppCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"aa" forIndexPath:indexPath];
// 取出图片
cell.images = self.dataArray[indexPath.item];
cell.indexs = [NSString stringWithFormat:@"%lu",indexPath.row];

return cell;
}

@end

    5.3.1 主视图的控制器继承于UICollectionViewController 

    5.3.2 在这里我们设置了UICollectionView的背景颜色为白色，UICollectionView的默认背景颜色是黑色

    5.3.3 同时我们设置了 视图中UICollectionView对应的流水布局相应Item的size为UICollectionView的size，而在这里，UICollectionView为全屏，

    5.3.4 通过设置UICollection的布局UICollectionViewFlowLayout的滚动方式 scrollDirection 为垂直滚动

         UICollectionViewScrollDirectionVertical  为垂直方向滚动，默认方式

         UICollectionViewScrollDirectionHorizontal 为水平方向滚动

    5.3.5 在这里能过设置UICollectionView 的showHorizontalScrollIndicator 的值为NO ，则为不显示水平方向滚动时的滚动条