UICollectionView —— 1. 集合视图基础知识

UICollectionView 编程指南

一个 collection 视图配合几个不同的对象在屏幕上显示内容。这些对象是自定义的,但是必须通过你的 app 提供。
例如: 你必须提供一个数据源对象,告诉 collection 视图显示多少个 item。另一些对象由 UIKit 提供,是集合视图的一部分。

集合视图是一个协作对象

顶级的容器和管理者
UICollectionView
UICollectionViewController

UICollectionView 定义集合视图内容的可见区域, 这个类是 UIScrollView 的子类,能够包含该一个大的可以滚动的区域。这个类是基于 布局信息和 数据进行内容呈现的。
UICollectionViewController 提供了一个视图控制器层级的管理支持。他的使用是可选的。

内容管理者
UICollectionViewDataSource protocol
UICollectionViewDelegate protocol

数据源对象是 collection 视图最重要的关联对象。是必须提供的。数据源对象管理着集合视图的内容,在需要的时候去创建呈现内容的视图。实现数据源对象,这个对象必须遵守 UICollectionViewDataSource 协议。
代理对象让你去拦截一些来自集合视图的有趣的信息,去定制一些视图行为。
例如:
使用这个代理对象,你可以去追踪 item 的选中 、高亮。代理对象是可选的。

内容的呈现
UICollectionReusableView
UICollectionViewCell

所有在 集合视图中呈现的视图都必须是 UICollectionReusableView 类的实例对象。这个类提供了一个回收机制(重用机制)。重用视图在滚动期间会提供更好的性能。UICollectionViewCell 是一个特定的可重用视图,作为主要的数据 item

布局
UICollectionViewLayout
UICollectionViewLayoutAttributes
UICollectionViewUpdateItem

UICollectionViewLayout 的子类是一个布局对象,负责定义集合视图中的 cell 和重用视图的位置,尺寸和视觉属性。在布局的过程中,布局对象创建一个布局属性对象,从而来告诉集合视图在哪里显示和怎样显示 cell 和重用视图。

无论什么时候集合视图插入,删除,移动 item 布局对象都会接收一个 UICollectionViewUpdateItem 实例对象。 你永远也不需要创建这个类的实例对象。

流水布局
UICollectionViewFlowLayout
UICollectionViewDelegateFlowLayout protocol

在进行表格布局和 线性布局的时候UICollectionViewFlowLayout 类是一个具体的布局对象。 你也可以使用这个类结合代理对象来实现自定义的动态布局。

下面视图展现的是 collection view 关联的核心对象之间的关系。collection view 从数据源对象获取 cell 显示的信息。 数据源和代理对象是通过你 app 提供的自定义对象,被使用去管理内容。 包含cell 的选中,高亮。布局对象是负责决定 cell 被放置在哪里,和发送来自布局属性的信息给 collection view。 collection view 结合这行信息来呈现最终的视觉效果。

cv_objects_2x.png

当你创建一个 collection view 界面的时候

  1. 添加一个 UICollectionView 对象到 sb 或者 xib 文件。
  2. 设置 UICollectionView 的关联对象,如: 数据源和 代理
  3. 你永远不需要创建布局对象。()

重用视图提高性能

Collection 视图提供了一个视图回收程序去提高性能。 当视图离开屏幕的时候, 视图会从 view 中移除,添加到重用队列, 代替删除。 当一个新的内容滚动到屏幕上后,视图会从重用队列中移除,作为新的内容添加到视图上。

为了促进回收和重用,所有显示在集合视图上的视图必须继承自 UICollectionReusableView 类

Collection views 视图提供了三个特定类型的重用视图。每个视图都指定的预定用法。

  • cell:
    cell 呈现 collection view 的主要内容,
    cell 的工作是去呈现 来自数据源的当个 item 的内容。
    cell 必须是 UICollectionViewCell 的实例对象和子类,使用子类你可以去呈现你自己的内容。
    cell 对于高亮和选中提供了固有的支持。但是真实的高亮,你必须写一些自定义的代码。

  • Supplementary :(section header 和 footer)
    Supplementary 视图显示了更多关于 section 的更多信息。 和 cell 一样, Supplementary 也是数据驱动的。和 cell 不一样的是,Supplementary 不是强制的。 Supplementary 的使用和位置设置是通过布局对象进行管理的。例如,流水布局支持 header 和 footer ,视图是可选的。

  • Decoration : 装饰视图
    Decoration 是一个视觉装饰,装饰视图被布局对象完全的拥有。不要在数据源中进行任何的数据设置。例如,一个布局对象可以使用装饰视图去实现自定义的 背景外观。

和 tableView 不一样的是, collection view 没有强制的给 cell 和 supplementary 指定风格。
反而,提供一个基本的重用视图类作为一个空白的画布等着你去修改。例如,你可以使用它们去构建更小的视图层级,显示图片,或者显示动态的绘制内容。

数据源对象的职责就是提供 cell 和 supplementary 视图个 关联的 collection 使用。无论如何,数据源对象永远不会直接的创建视图。当需要一个视图的时候,你的数据源会使用 collection 的方法 dequeues 一个目标视图。 使用这个视图总是返回一个有效的视图。

布局对象控制视觉呈现

布局对象的唯一职责就是决定 cell 在集合视图中的 位置和 视觉风格。尽管你的数据源对象提供了视图和真实的内容,但是布局对象会决定 尺寸,位置,视图的之间的外观关联属性。这种职责的分离可在不改变数据对象的情况下改变布局。

collection view 的布局过程和 app view 的 reset 布局过程是有区别的。
换句话说,你不要混淆布局对象所做的事情 和使用 layoutSubviews 方法对 子视图在父视图中进行重新定位。布局对象永远不会接触到他直接管理的视图,布局对象不会拥有任何视图。相反,布局对象会产生一个属性,去描述 视图的位置,尺寸,外观属性,和任何的视图装饰。布局对象的真实的工作是给 collection view 中的视图提供 attributes 。

布局对象怎样影响集合视图中的视图是没有限制的。布局对象可以移动视图,可以一点点的移动,也可以在屏幕的范围内任意的移动。即使视图的周围都是视图也可以对视图进程重新定位。例如,你可以让视图进行相互的堆叠。唯一的限制就是你想要你的 app 是一种什么样的视觉效果。

下面这个视图展示的是 cell 和 supplementary 竖直滚动的流水布局排列。 在竖直滚动的流水布局,内容的宽度是固定的,高度延伸到内容的适当区域。去计算这个区域,布局对象会一次性的放置 视图和 cell ,为他们每个决定适当的位置。
在流水布局中,cell 的尺寸和 supplementary 视图的尺寸通过布局对象的属性或者 布局的代理对象进行指定。
布局的计算仅仅是去设置每个视图的位置。

布局对象提供的布局指标


cv_layout_basics_2x.png

布局对象控制的不仅仅是他们的观点的大小和位置。 布局对象能够指定另一些视图关联的属性。例如,透明度,在 3d 空间的旋转, 在另一个视图上面和下面的可见性。
这些属性可以让你创建更多有趣的布局。
例如,你可以创建一个层叠的 cell 视图,或者可以在任何轴上进行旋转。

集合视图的动画

Collection View 在构建的时候是支持最基本的动画的。当你进行视图的插入,选中,删除的时候回默认进行动画。

在进行 插入,删除,选中操作的时候, 你可以在任何时候 invalidate 这个布局, 这将导致重新计算布局。
invalidate 的布局不会立即做任何的动画。

当你 invalidate 布局,集合视图是会以没有动画的方式显示重新计算后的 item。相反,一个自定义布局,你可能有这种行为,去设置 cell 的位置,同时在一个固定的时间间隔内产生一个动画效果。

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

推荐阅读更多精彩内容