参考博客:
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顶部加一根绿色的线
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)
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的数据。
searches是一个数组,存储String类型的搜索词和数组类型的搜索结果;这个方法将根据collection view的indexPath返回一个具体的photo(在哪一个section的哪一个row)
(3)处理textField响应问题
现在来扒一扒这段代码:
--UIActivityIndicatorView的作用:提示用户当前正在加载的速度,消除等待心理事件,增加用户体验
--方法searchFlickrForTerm中的两个参数:String类型的searchText,以及闭包类型的completion。这个闭包带有两个参数,FlickrSearchResults?型的results以及NSError?型的error。
4.处理UICollectionViewDataSource和UICollectionViewDelegateFlowLayout
(1)UICollectionViewDataSource
需要强调的是,Ray Wenderlich材料中这段代码是错误的用法。这里不需要另外extension FlickrPhotosViewController出来,让它遵守UICollectionViewDataSource。因为FlickrPhotosViewController的superclass是UICollectionViewController,它本身就已经遵守了这个协议。
此时,simulator是这样的
(2)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的配置方法
运行程序: