UICollectionView总结及简单应用(上)

来源:互联网 时间:2017-01-22


参考博客:

UICollectionView Tutorial Part 1: Getting Started

UICollectionView Tutorial Part 2: Reusable Views and Cell Selection

WWDC 2012 Session笔记

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


相关阅读:
Top