UICollectionView总结及简单应用(上)

参考博客:

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容