参考博客：
UICollectionView Tutorial Part 1: Getting Started
UICollectionView Tutorial Part 2: Reusable Views and Cell Selection
UICollectionView 使用 介绍 - 孙启超的个人页面 - 开源中国社区
需要说明的是，应用的例子是Ray Wenderlich上的FlickrSearch，但亲自实践后，发现了一些错误：语法更新所带来的+UICollectionView的应用细节上的，我在这篇博客中会更正这些错误。这篇博客上项目练习主要涉及到UICollectionViewDataSource，UICollectionViewFlowLayout，自定义UICollectionViewCell的知识。
#1 UICollectionView简介
1.UICollectionView是什么？UICollectionView是一种新的数据展示方式，简单来说可以把它理解成多列的UITableView
2.UICollectionView的组成
(1)看得见的三部分：
--Cells：用于展示内容的主体
--Supplementary Views 追加视图：类似于UITableView每个section的Header或Footer
--Decoration Views 装饰视图：跟数据无关，为Cells和Supplementary Views添加辅助视图
关于cell，需要补充说明的是，相对于UITableViewCell来说，UICollectionViewCell不存在各式各样默认的style，这主要是由于展示的对象决定的，UICollectionViewCell主要用来展示图片。
(2)看不见的精髓UICollectionViewLayout：这也是UICollectionView与UITableView最大的不同！！！
--UICollectionViewLayout负责组织上面所说的看得见的三个部分，包括位置，尺寸等，决定了UICollectionView如何显示在界面上。常用默认layout对象UICollectionViewFlowLayout：可以理解为一个直线对齐的layout。比较常见的形式是gird view。
--UICollectionViewFlowLayout的几个重要属性
itemSize可以指定item的尺寸大小
Spacing可以指定item之间的间隔和每一行之间的间隔
scroll direction滚动方向默认是vertical：意味着items从左到右布局，用户垂直滑动能看到没有被屏幕装下的items。
header和footer尺寸，依据滚动方向不同，header和footer的高和宽只有一个会起作用
inset内边距
3.UICollectionView的实现
和UITableView类似，UICollectionView也是datasource+delegate设计模式，datasource为view提供数据源，告诉view要显示的东西以及如何显示，delegate提供一些样式细节及用户交互的响应。
(1)UICollectionViewDataSource
--section的数目：numberOfSectionsInCollectionView
--某个section里item的数目：collectionview:numberOfItemsInSection
--cell的配置，对于某个位置应该显示什么样的cell：collectionview:cellForItemAtIndexPath
(2)UICollectionViewLayout
(3)UICollectionViewDelegate：提供一些数据无关的样式，用户交互式的响应，比如
--cell的高亮(highlighted)
--cell的选中状态
--cell被remove后的状态
--长按cell后弹出菜单进行选择
用户点击cell的时候，会按照以下流程询问delegate：
是否应该高亮（shouldHighlightItemAtIndexPath?)如果是，那么高亮(didHighlightItemAtIndexPath)
无论结果如何，接着询问是否可以被选中(shouldSelectItemAtIndexPath)？如果是，而且前面已经高亮了的，那么取消高亮（didUnHighlightItemAtIndexPath),并且选中(didSelectItemAtIndexPath)。
很明显，highlighted和selected是互斥的。
来看下效果图
效果图
#2 UICollectionView的简单应用（重点在第4，5点）
1.在window顶部加一根绿色的线
AppDelegate.swift
2.storyboard里做些准备工作
--拖一个CollectionViewController，embed in Navigation Controller中，将collectionView的背景颜色设置为白色
--将collection cell的Identifier设置为“FlickrCell”，数据源将会根据这个Identifier来创造新的cell或者让旧的cell出队(dequeue)
--拖一个textField到navigation bar上，将它的Placeholder和Return Key都设为search。ctrl drag 这个Text Field到CollectionViewController上，outlet选择delegate。目的是当用户按下回车键search时，键盘能够及时响应。
--新建文件命名为FlickPhotosViewController继承自UICollectionViewController，并与storyboard关联。在class里添加两个属性。sectionInsets表示section的内边距--cell与header，footer之间的间隔(spacing）
FlickrPhotosViewController.swift
3.获取照片，准备data structure，处理textFiled响应问题
(1)获取照片
因为这篇博客的重点是collection view，关于如何获取照片可以跳过，大家直接看源码中的FlickrSearch.swift文件，这个文件包含一个struct和两个class：
--FlickrSearchResults：这个结构里包含两个属性，搜索词及搜索到的结果
--FlickrPhoto：这个类和从Flickr获得的Photo的数据有关
--Flickr：这个类提供了API供搜索及返回搜索结果
(2)准备data structure
因为此项目要求每次搜索的时候都能显示一个新的section，而不仅仅是代替原来的section。所以需要添加一个data structure来分别存储每个section的数据。
FlickrPhotosViewController.swift
searches是一个数组，存储String类型的搜索词和数组类型的搜索结果；这个方法将根据collection view的indexPath返回一个具体的photo（在哪一个section的哪一个row)
(3)处理textField响应问题
FlickrPhotosViewController.swift
现在来扒一扒这段代码：
--UIActivityIndicatorView的作用：提示用户当前正在加载的速度，消除等待心理事件，增加用户体验
--方法searchFlickrForTerm中的两个参数：String类型的searchText，以及闭包类型的completion。这个闭包带有两个参数，FlickrSearchResults？型的results以及NSError?型的error。
4.处理UICollectionViewDataSource和UICollectionViewDelegateFlowLayout
(1)UICollectionViewDataSource
需要强调的是，Ray Wenderlich材料中这段代码是错误的用法。这里不需要另外extension FlickrPhotosViewController出来，让它遵守UICollectionViewDataSource。因为FlickrPhotosViewController的superclass是UICollectionViewController，它本身就已经遵守了这个协议。
错误用法
UICollectionViewController本身就已经遵守了UICollectionViewDataSource这个协议
添加数据源方法
此时，simulator是这样的
simulator
(2)UICollectionViewDelegateFlowLayout
UICollectionViewDelegateFlowLayout
第一个方法collectionView(_:layout:sizeForItemAtIndexPath:)的作用是确定每个cell的尺寸大小。首先，需要调用photoForIndexPath方法来确定是哪一张photo，然后再确定photo的尺寸大小。这里用到了optional binding，thumbnail是UIImage?类型的，这意味着如果thumbnail存在，就给image的宽高加10的内边距(padding),如果不存在就返回默认值。
第二个方法collectionView(_:layout:insetForSectionAtIndex)的作用是确定section的内边距insets大小
5.自定义UICollectionViewCell
--设置collectionViewCell的宽高都为200，拖一个image view，并设置它的上下左右约束都为5
--新建一个文件，命名为FlickrPhotoCell,并将storyboard中cell的class设置为FlickrPhotoCell。ctrl drag建立imageView的outlet。
--更改cell的配置方法
FlickrPhotosViewController.swift
运行程序：
simulator
网友评论