UICollectionView 学习笔记

前言

最近计划着开个新项目,前期工作准备先撸个图片选择器出来。当然核心肯定是 PhotoKit (ASsetsLibrary) 啦,不过那些会在稍后文章中介绍,今天的主角则是 UICollectionView


简介

首先看苹果官方文档 UICollectionView Class Reference 的介绍:

The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts. Collection views support customizable layouts that can be used to implement multi-column grids, tiled layouts, circular layouts, and many more. You can even change the layout of a collection view dynamically if you want.

一句话总结就是:UICollectionView 与 UITableView 相似,却提供了可自定义多列网格(Grild)的功能。


核心

  • Cells:单元格,用于展示内容的主体

  • Supplementary Views:追加视图,相当于 UITableView 中每个 Section 的 Header 或 Footer

  • Decoration Views:装饰视图,用于装饰整个 UICollectionView

UICollectionView 最常见的使用场景,想必就是相册(照片墙)的实现与展示了,下面通过一张图来直观地认识 CollectionView 各部分的构成:


实现

如果你在之前有了解及使用过 UITableView 的话,那么恭喜你,你将会快速上手 UICollectionView。

UICollectionViewDataSource

UICollectionViewDataSource - 负责提供展示的数据,实现下面两个必须的委托方法,其实 UITableView 并无二意,所以在此不做过多介绍了。

  • numberOfItemsInSection:某个 section 里有多少个 item

  • cellForItemAtIndexPath:对于某个位置应该显示什么样的 cell,里面会涉及到 cell 的复用,可参见 TableView

其实到这里,CollectionView 就可以正常显示了,对吧,就是这么简单:)

UICollectionViewDelegate

UICollectionViewDelegate - 负责用户的交互、Cell 的外形,委托方法和 TableView 相似,可以选择性实现以下委托方法。

  • collectionView:shouldHighlightItemAtIndexPath:是否支持高亮?

  • collectionView:didHighlightItemAtIndexPath:如果支持高亮,那么高亮;

  • collectionView:shouldSelectItemAtIndexPath:询问是否可以被选中?

  • collectionView:didUnhighlightItemAtIndexPath:如果支持高亮,那么现在取消高亮;

  • collectionView:didSelectItemAtIndexPath:如果支持可以被选中,那么选中 cell;

下面再通过几张图来更加清晰地理解:



UICollectionViewLayout

在布局上,与 UITableView 直接使用系统提供的样式不同,UICollectionView 使用的是 UICollectionViewLayout 来自定义布局样式。

在苹果官方文档:UICollectionViewLayout Class Reference 中对其做了如下解释:

The UICollectionViewLayout class is an abstract base class that you subclass and use to generate layout information for a collection view. The job of a layout object is to determine the placement of cells, supplementary views, and decoration views inside the collection view’s bounds and to report that information to the collection view when asked. The collection view then applies the provided layout information to the corresponding views so that they can be presented onscreen.

这里做下简短的总结:

  1. UICollectionViewLayout 是一个抽象基类,你需要继承自他,来为 CollectionView 生成 Layout 信息。Layout 对象的作用是决定 Cells,Supplementary Views 和 Decoration Views 在 CollectionView 中的布局位置。当然啦,如果你不想折腾,苹果也贴心的为你准备了 UICollectionViewFlowLayout - 流水式布局效果。

  2. UICollectionView 的显示效果几乎全部由 UICollectionViewLayout 负责,而真正存储着每一个 Cell 的位置、大小等属性的是 UICollectionViewLayoutAttributes 。每一个 Cell 对应着一个属于自己的 UICollectionViewLayoutAttributes,而 UICollectionViewLayout 正是利用 UICollectionViewLayoutAttributes 里存在的信息对每一个 Cell 进行布局。

下面通过一张图来了解 UICollectionView 的构成:

总结

可以说 UICollectionView 是 iOS 开发中必不可少的 UIKit 控件之一。

参考