本系列文章参考苹果官方文档:Collection View Programming Guide for iOS
collection view的简介
- collection view使用灵活的可变的布局来展示一系列有序的数据.
- collectionView不仅可以用来显示网格,还可以动态改变布局,可以实现stacks,circular等其他布局
- collectionView很好的将数据和view分离了,利用布局对象根据你提供的数据来计算view显示的位置和其他一些信息
- 还可以继承布局对象来定制需要的外观
内容预览
UICollectionView自带的Flow layout已经提供了完美的网格布局,如果需要其他布局或者交换上的改变可以继承layout对象
一个collection view是用来管理一些数据驱动的可视化视图
- collectionView关心view的布局,而不是view中的内容
- collectionView, data source, layout这三者间的交互
- 高效灵活地自定义layout
Flow Layout支持网格和流线型布局
- flow layout是可以直接哪拿来用的流式布局,通常表示为行列的形式
- 使用flow layout或者它的子类可以构建许多灵活的布局,比如不同的大小(size),可变的间隔(spacing),自定义header和footer,margins
- 继承flow layout可以对它进行适当的调整
手势对collectionView中的item操作和布局控制
- 可以使用手指对collectionView中的item进行布局控制和操作
- 多个手势间的配合使用技术
自定义布局
- collectionView布局对象的原理
- 如何实现自定义布局对象
CollectionView 基础
- 为将最终的内容显示在屏幕上,collectionView需要结合几个对象一起合作才行. 有的对象需要有APP提供的自定义的,比如data source对象,告诉collectionView有多少itmes需要显示,其他对象是UIKit提供的,是Collection View设计的一部分.
- CollectionView和Tableview 一样是面向数据的,它们的实现需要和APP的对象一起合作完成. 知道CollectionView底层干了些操作对你理解你代码中必须要做什么有帮助.
CollectionView需要多个对象合作完成
CollectionView的设计是将数据和数据的表现分离. 需要进行显示的数据由你的APP严格管理,而数据的展现则由多个对象负责. 下表列举了UIKit提供的CollectionView类和该类在集合视图界面中扮演的角色. 大多数类可以直接拿来用,不需要子类化,当默认提供的功能无法满足需求时,才需要子类化.
| 目的 | 类/协议 | 描述 |
|---|---|---|
| 顶层控制和管理 | UICollectionView, UICollectionViewController | 当有大量滚动内容的需求时.该类还擅长根据layout对象提供的布局信息展示你的数据 UICollectionViewController给CollectionView提供控制器级别的管理,可选地. |
| 内容管理 | UICollectionViewDataSource协议 UICollectionViewDelegate协议 | data source对象是必不可少的,它管理要显示的数据和创建需要显示view,该对象需要实现协议UIColloectionViewDataSource delegate对象可以让你拦截CollectionView发出一些你感兴趣的信息来定制CollectionView的行为.比如你使用delegate来跟踪选中(selected)的item和高亮(highlighting)item,和DataSource不同的是,它是可选的 |
| 内容显示 | UICollectionReusableView UICollectionViewCell | CollectionView中的所有要显示的view都是UICollectonView的实例. 这个类支持重用机制,复用view可以提高性能,特别是在滚动的时候. UICollectionViewCell是一种特殊的可复用视图,用来显示data item的 |
| Layout | UICollectionViewLayout UICollectionViewLayoutAttributes UICollectionViewUpdateItem | UICollectionViewLayout的子类指layout对象,它的作用是定义CollectionView中cell等一些可复用的视图的location,size,以及其他显示相关的属性 在布局过程中,布局对象创建一个UICollectionViewLayoutAttribute对象来告诉CollectionView应该在哪里以及如何展示cell和其他可复用视图 当CollectionView中插入,删除,添加数据item时,系统创建(不要自己创建)一个UICollectionViewUpdateItem对象,将给对创给layout对象 |
| Flow布局 | UICollectionViewFlowLayout UICollectionViewDelegateFlowLayout协议 | UICollectionViewFlowLayout是一个具体的类,该类的实例用来进行网格(grids)布局或者其他流式布局. 你可以原样使用或者结flow-delegate对象一起使用,该对象可以动态的定制layout信息 |
下图1-1展示了CollectionView中几个主要对象之间的关系. CollectionView从data source对象中获取cells需要显示的内容信息. data source和delegate对象一起从APP中获取信息定制你CollectionView. layout对象负责cells如何显示,将该信息保存在layout attribute对象中然后发给CollectionView. CollectionView结合布局信息和cells最终将整个view显示.
图1-1CollectionView中的几个主要对像关系图,CollectionView结合布局信息和创建好的cells来显示内容
在创建CollectionView界面时，首先向您的故事板或NIB文件添加UICLoopFienView对象。将CollectionView视为中心集线器，所有其他对象都从该集线器发出。添加该对象后，可以开始配置任何相关对象，例如数据源或委托。所有配置都集中在集合视图本身。例如,不要只创建布局对象而没有CollectionView对象.
可复用的view提高性能
CollectionView使用了view的循环使用的机制来提高性能. 当view移动到屏幕外时,会将他们从CollectionView中移除然后放入复用队列中,而不是直接删除. 当新的内容将要显示在CollectionView中时,会从复用队列中取出来设置新的内容再次放入CollectionView中. 为了更好的利用这种技术,CollectionView中的view必须是UICollectionReusableView的实例.
CollectionView中涉及三种不同的复用view,每种view都有不同用途:
-
Cells代表CollectionView要显示的主要内容. 每个cell都用来展示单个data source中的item数据. cell是一个
UICollectionViewCell(该类可以子类化)对象. cell对象提供cell的选中和高亮.要实际应用高亮显示单元格，必须编写一些自定义代码。有关实现单元突出/选择的信息接下来回讲到 - Supplementary views显示关于一节的信息。与cell一样,辅助视图是数据驱动的。与cell不同的是,补充视图不是强制性的，它们的使用和布局由布局对象控制。例如，flow-layout支持footer和header作为可选的supplementary views。
- Decoration views是由布局对象完全控制的可视化装饰，并且不绑定到数据源对象中的任何数据。例如，布局对象可能使用装饰视图来实现自定义背景外观。
与tableView不同的是集合视图不要求数据源提供的单元格和补充视图没有特定的样式。相反，基本的可重用视图类是空白的画布以供您修改。例如，您可以使用它们来构建小的视图层次结构、显示图像、甚至动态绘制内容。
数据源对象负责提供与其关联的集合视图所使用的单元格和辅助视图。但是，数据源从不直接创建视图。当需要个一个view时，数据源使用集合视图的方法将合适类型从复用队列中取出。从复用队列中取view总是返回一个有效的视图，或者通过从重用队列中检索一个视图，或者通过使用类、nib文件或者您提供的故事板来创建新视图。
布局对象控制视觉显示
布局对象仅负责确定集合视图中itmes的布局和视觉样式。虽然数据源对象提供了视图和实际内容，但是布局对象确定这些视图的大小、位置和其他与外观相关的属性。这种职责的分离使得在不改变应用程序管理的任何数据对象的情况下动态地改变布局成为可能。
集合视图使用的布局过程与应用程序其余视图使用的布局过程有关，但不同。换句话说，不要混淆布局对象与用于在父视图内重新定位子视图的layoutSubviews方法的作用。布局对象从不直接触及其管理的视图，因为它实际上不拥有这些视图。相反，它生成描述单元格、补充视图和装饰视图等在集合视图中的位置、大小等外观属性。然后，将这些属性应用到实际视图对象，是集合视图完成的。
布局对象如何影响集合视图中的item是没有限制的。布局对象可以移动一些视图,但不能干其他的。它只能移动一些视图一点点，或者可以随机地在屏幕上移动它们。它甚至可以重新定位视图而不考虑周围的视图。例如，布局对象可以在需要时堆叠视图。唯一的实际限制是布局对象如何影响您希望应用程序拥有的视觉样式。
图1-2显示了垂直滚动流布局如何排列其单元格和补充视图。在垂直滚动流布局中，内容区域的宽度保持固定，并且高度可增长以适应内容。为了计算区域，布局对象一次性放置视图和单元格，为每个对象选择最合适的位置。在流布局的情况下，单元格和补充视图的大小在布局对象上或通过使用委托指定为属性。计算布局只是使用这些属性来放置每个视图的事。
布局对象提供布局信息
布局对象控制的不仅仅是视图的大小和位置。布局对象可以指定其他与视图相关的属性，例如它的透明度、它在3D空间中的变换以及它在其他视图之上或之下的可见性（如果有的话）。这些属性可以让您创建更有趣的布局。例如，您可以通过将视图放在彼此之上并更改其Z-轴顺序来创建单元格堆栈，或者您可以使用3D变换在任何轴上旋转它们。
集合视图自动启动动画
集合视图在底层上支持动画。当插入（或删除）一个section或item时，集合视图自动创建动画来展示更改。例如，当插入item时，插入点之后的项通常会移位，以便为新项腾出空间。集合视图可以创建这些动画，因为它检测item的当前位置，并且可以在插入发生之后计算它们的最终位置。因此，它可以将每个项目从其初始位置动画展示到其最终位置。
除了动画展示插入、删除和移动操作之外，还可以在任何时候使布局无效，并强制它重新计算布局属性。无效的布局不会直接使item产生动画；当使布局无效时，集合视图将项目显示在它们新计算的位置，而不会生成动画。相反，在自定义布局中，您可以使用这种行为以有规律的间隔定位单元格并创建动画效果。
网友评论