专栏名称: Adrenine
iOS开发
目录
相关文章推荐
51好读  ›  专栏  ›  Adrenine

iOS笔记之UICollectionView

Adrenine  · 掘金  ·  · 2017-12-13 08:46

正文

UICollectionView是比UITableView更加复杂的UI控件,通过它可以实现许多复杂的流布局,但对我们来说,系统提供的接口十分简单易用,并且有十分强的制定性。

#简介

UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似。简单来说,UICollectionView是比UITbleView更加强大的一个UI控件,有如下几个方面: 1、支持水平和垂直两种方向的布局 2、通过layout配置方式进行布局 3、类似于TableView中的cell特性外,CollectionView中的Item大小和位置可以自由定义 4、通过layout布局回调的代理方法,可以动态的定制每个item的大小和collection的大体布局属性 5、更加强大一点,完全自定义一套layout布局方案,可以实现意想不到的效果 在这里,我们主要讨论CollectionView使用原生layout的方法和相关属性 UICollectionView类负责管理数据的有序集合以及以自定义布局的模式来呈现这些数据,它提供了一些常用的表格(table)功能,此外还增加了许多单栏布局。UICollectionView支持可以用于实现多列网格、 平铺的布局、 圆形的布局和更多的自定义布局,甚至你可以动态地改变它的布局。

当将一个集合视图添加到您的用户界面,您的应用程序的主要工作是管理与该集合视图关联的数据。集合视图的数据源对象,是一个对象,符合 UICollectionViewDataSource 协议,提供由您的应用程序数据集合中视图分成单个的item,然后可以分为节为演示文稿中获取其数据。item是您想要呈现的数据的最小单位。例如,在照片的应用程序,item可能是一个单一的图像。集合视图使用一个cell来呈现item,这是您的数据源配置,并提供 UICollectionViewCell 类的一个实例。除了将它嵌入在您的用户界面,您可以使用 UICollectionView 对象的方法以确保item的可视化表示匹配您的数据源对象中的顺序。因此,每当您添加、 删除或重新排列您的集合中的数据,您可以使用此类的方法来插入、 删除和重新排列相应cell的状态。您还使用集合视图对象来管理所选的item。

#布局实现 在了解UICollectionView的更多属性前,我们先来使用其进行一个最简单的流布局试试看,在controller的viewDidLoad中添加如下代码:

//创建一个layout布局类    
UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init];    
//设置布局方向为垂直流布局    
layout.scrollDirection = UICollectionViewScrollDirectionVertical;    
//设置每个item的大小为100*100    
layout.itemSize = CGSizeMake(120, 120);    
//创建collectionView 通过一个布局策略layout来创建    
UICollectionView * collect = [[UICollectionView alloc] 
  initWithFrame:self.view.frame collectionViewLayout:layout];    
//代理设置    
collect.delegate=self;    
collect.dataSource=self;    //注册item类型 这里使用系统的类型    
[collect registerClass:[UICollectionViewCell class] 
  forCellWithReuseIdentifier:@"cellid"];       
[self.view addSubview:collect];

这里有一点需要注意,collectionView在完成代理回调前,必须注册一个cell,类似如下:

[collect registerClass:[UICollectionViewCell class] 
  forCellWithReuseIdentifier:@"cellid"];

这和tableView有些类似,又有些不同,因为tableView除了注册cell的方法外,还可以通过临时创建来做: //tableView在从复用池中取cell的时候,有如下两种方法//使用这种方式如果复用池中无,是可以返回nil的,我们在临时创建即可

- (nullable __kindof UITableViewCell *)dequeueReusableCellWithIdentifier:
  (NSString *)identifier;
//6.0后使用如下的方法直接从注册的cell类获取创建,如果没有注册 会崩溃
- (__kindof UITableViewCell *)dequeueReusableCellWithIdentifier:
  (NSString *)identifier forIndexPath:(NSIndexPath *)indexPath 
  NS_AVAILABLE_IOS(6_0);

我们可以分析:因为UICollectionView是iOS6.0之前的新类,因此这里统一了从复用池中获取cell的方法,没有再提供可以返回nil的方式,并且在UICollectionView的回调代理中,只能使用从复用池中获取cell的方式进行cell的返回,其他方式会崩溃,例如:

//这是正确的方法
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView 
      cellForItemAtIndexPath:(NSIndexPath *)indexPath{
  UICollectionViewCell * cell  = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" 
    forIndexPath:indexPath];    
  cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 
    green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];    
  return cell;
}
//这样做会崩溃
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//    UICollectionViewCell * cell  = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
//    cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];    
  UICollectionViewCell * cell = [[UICollectionViewCell alloc]init];    
  return cell;
}

上面错误的方式会崩溃,信息如下,让我们使用从复用池中取cell的方式:

崩溃信息
上面的设置完成后,我们来实现如下几个代理方法: 这里与TableView的回调方式十分类似

//返回分区个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    
  return 1;
}
//返回每个分区的item个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    
  return 24;
}
//返回每个item
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    
  UICollectionViewCell * cell  = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];    
  cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 
    green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];    
  return cell;
}

运行结果如下(每次运行颜色都会有不同): 总共有24个item,这是前15个

运行结果前15个

往下滑动可以看到剩下的9个







请到「今天看啥」查看全文