UICollectionView介绍使用

UICollectionView是一种类似于UITableView但又比UITableView功能更强大、更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UICollectionViewLayout,而且允许用户自定义layout来进行布局。

下面是UICollectionView合并内容和布局并生成最终界面的一个流程:

当UICollectionView显示内容时,先从Data source(数据源)获取cell,然后交给UICollectionView。再从UICollectionViewLayout获取对应的layout attributes(布局属性)。最后,根据每个cell对应的layout attributes(布局属性)来对cell进行布局,生成了最终的界面。而用户交互的时候,都是通过Delegate来进行交互。当然,上面只是布局cell,但是UICollectionView内部还有Supplementary View和Decoration View,也可以对其进行布局。

上面,我们了解了UICollectionView的工作流程,我们将UICollectionView分成视图、数据源和代理方法、UICollectionViewLayout三块来介绍。

一、视图

UICollectionView上面显示内容的视图有三种Cell视图、Supplementary View和Decoration View。

Cell视图

CollectionView中主要的内容都是由它展示的,它是从数据源对象获取的。

Supplementary View

它展示了每一组当中的信息,与cell类似,它是从数据源方法当中获取的,但是与cell不同的是,它并不是强制需要的。例如flow layout当中的headers和footers就是可选的Supplementary View。

Decoration View

这个视图是一个装饰视图,它没有什么功能性,它不跟数据源有任何关系,它完全属于layout对象。

二、数据源和代理方法

1、注册cell或者Supplementary View使其重用

在使用数据源返回cell或者Supplementary View给collectionView之前,我们必须先要注册,用来进行重用。

registerClass: forCellWithReuseIdentifier:

registerNib: forCellWithReuseIdentifier:

registerClass: forSupplementaryViewOfKind: withReuseIdentifier:

registerNib: forSupplementaryViewOfKind: withReuseIdentifier:

显而易见,前面两个方法是注册cell,后两个方法注册Supplementary View。其中,注册的方式有两种,第一种是直接注册class,它重用的时候会调用[[UICollectionView alloc] init]这样的初始化方法创建cell;另外一种是注册nib,它会自动加载nib文件。

注册的之后,我们如何重用?

在数据源方法当中返回 cell 或者 Supplementary view 的方法当中通过 dequeueReusableCellWithReuseIdentifier:forIndexPath: 或者 dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: 方法获取cell或者Supplementary View。

示例代码:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellReuseIdentify forIndexPath:indexPath];

cell.backgroundColor = [UIColor lightGrayColor];

cell.textLabel.text = [NSString stringWithFormat:@"(%zd,%zd)", indexPath.section, indexPath.row];

return cell;

}

2、数据源方法

数据源方法与UITableView类似,主要有:

numberOfSectionsInCollectionView:

collectionView: numberOfItemsInSection:

collectionView: cellForItemAtIndexPath:

collectionView: viewForSupplementaryElementOfKind: atIndexPath:

与UITableView不同的是多加了返回Supplementary view数据源方法。

3、代理方法

数据源为UICollectionView提供数据相关的内容,而代理则主要负责用户交互、与数据无关的视图外形。主要分成两部分:

1、通过调用代理方法,管理视图的选中、高亮

collectionView:shouldDeselectItemAtIndexPath:

collectionView:didSelectItemAtIndexPath:

collectionView:didDeselectItemAtIndexPath:

collectionView:shouldHighlightItemAtIndexPath:

collectionView:didHighlightItemAtIndexPath:

collectionView:didUnhighlightItemAtIndexPath:

2、长按cell,显示编辑菜单 当用户长按cell时,collection view视图会显示一个编辑菜单。这个编辑菜单可以用来剪切、复制和粘贴cell。不过,要显示这个编辑菜单需要满足很多条件:

代理对象必须实现下面三个方法:

collectionView:shouldShowMenuForItemAtIndexPath: collectionView:canPerformAction:forItemAtIndexPath:withSender: collectionView:performAction:forItemAtIndexPath:withSender:

对于指定要编辑的cell, collectionView:shouldShowMenuForItemAtIndexPath: 方法需要返回 YES

collectionView:canPerformAction:forItemAtIndexPath:withSender: 方法中,对于剪切、复制、粘贴三种action至少有一个返回YES。其实,编辑菜单是有很多种action的,但是对于UICollectionView来说,它仅仅支持的剪切、复制、粘贴三个,所以说这个代理方法至少支持这三种的一种。

剪切、复制、粘贴的方法名是:

cut: copy: paste:

当上面的条件都满足了,用户就可以长按cell显示出编辑菜单,然后选择对应的action,从而就会回调delegate的collectionView:performAction:forItemAtIndexPath:withSender: 方法去做对应的事情。

当我们想控制编辑菜单仅仅显示复制和粘贴时,我们就可以在 collectionView:canPerformAction:forItemAtIndexPath:withSender: 方法中进行操作,具体请见下面代码:

- (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender{

if ([NSStringFromSelector(action) isEqualToString:@"copy:"]

|| [NSStringFromSelector(action) isEqualToString:@"paste:"])

return YES;

return NO;

}

三、UICollectionViewLayout

UICollectionViewLayout 是UICollectionView比UITableView更强大原因,它是UICollectionView的精髓,它通过 UICollectionViewLayoutAttributes 类来管理 cell 、 Supplementary View 和 Decoration View 的 位置 、 transform 、 alpha 、 hidden 等等。

UICollectionViewLayout这个类只是一个基类,我们给UICollectionView使用的都是它的 子类 。系统为我们提供了一个最常用的layout为 UICollectionViewFlowLayout ,我们可以使用它制作 grid view 。当UICollectionViewLayout满足不了我们的需求时,我们可以 子类化UICollectionViewLayout 或者 自定义layout ,这个内容放到我下一篇当中。

下面,我们来看看怎么使用UICollectionViewFlowLayout。 使用UICollectionViewFlowLayout之前,我们来了解它内部常用的属性:

//同一组当中,行与行之间的最小行间距,但是不同组之间的不同行cell不受这个值影响。

@property (nonatomic) CGFloat minimumLineSpacing;

//同一行的cell中互相之间的最小间隔,设置这个值之后,那么cell与cell之间至少为这个值

@property (nonatomic) CGFloat minimumInteritemSpacing;

//每个cell统一尺寸

@property (nonatomic) CGSize itemSize;

//滑动反向,默认滑动方向是垂直方向滑动

@property (nonatomic) UICollectionViewScrollDirection scrollDirection;

//每一组头视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。

@property (nonatomic) CGSize headerReferenceSize;

//每一组尾部视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。

@property (nonatomic) CGSize footerReferenceSize;

//每一组的内容缩进

@property (nonatomic) UIEdgeInsets sectionInset;

上面是UICollectionViewFlowLayout内部的属性,这些属性都是统一设置,若是统一设置无法满足需求,可以实现 UICollectionViewDelegateFlowLayout 方法,进行对应的设置。

了解了UICollectionViewFlowLayout主要属性,我们再来看看使用步骤:

1、生成一个UICollectionViewFlowLayout对象给collection view

2、通过itemSize来配置cell的宽和高

3、如果有需要通过设置minimumInteritemSpacing来设置每个cell之间的间距,通过minimumLineSpacing来设置同一组当中不同行之间cell的行距。

4、如果想要组头视图或者组尾视图,指定它们的大小

5、设置layout的滑动方向

6、如果统一设置无法满足需求,实现UICollectionViewDelegateFlowLayout方法来进行设置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 什么是UICollectionView? UICollectionView是一种新的数据展示方式,简单来说可以把他...
    凌峰Mical阅读 43,274评论 11 201
  • 最近将 UICollectionView 进行了一个全面的学习及总结,参考了网上大量的文章,把官方文档进行了大概翻...
    varlarzh阅读 21,393评论 3 94
  • 翻译自“Collection View Programming Guide for iOS” 0 关于iOS集合视...
    lakerszhy阅读 3,842评论 1 22
  • //联系人:石虎 QQ: 1224614774昵称:嗡嘛呢叭咪哄 什么是UICollectionView UICo...
    石虎132阅读 3,406评论 0 15
  • 凉风微微吹过,金黄的枫叶洒满了一地,神女园内一片好风景。 “师父!”只见一个身着淡黄色短裙的女孩跑进神女园,很是...
    楚瑶玲阅读 79评论 0 0