当第一代ipad发布时,相册程序相当吸引眼球,它以独特的方式以多样的布局来显示照片,可以使扁平的表格view:
也可以是有层次的按分类进行查看:
还可以使用手势,以很炫的方式在不同的布局之间进行切换。我们可以使用gridview和一些其它的布局来实现这些,但是太麻烦了,从iOS6开始,我们可以使用UICollectionView来实现它,我们可以很容易的为程序添加自定义布局和自定义转换。
UICollectionViewController解析
我们通过一个示例图,来看看UICollectionViewController是如何构成的:
UICollectionViewController由以下组件组成:
- UICollectionView:用于显示内容的主view,类似于UITableView。UICollection不需要和其ViewController一样大,如上图所示,在UICollectionView之上有一些空隙用于显示一个用于查找的text field。
- UICollectionViewCell:类似于UITableView的UITableViewCell。这些Cell作为UICollectionView的内容被添加到其中。Cell可以通过编程方式创建,也可以通过IB来创建。
- Supplementary Views:如果我们有一些额外的信息想要显示到UICollectionView之中但是这些信息又不属于UICollectionViewCell,我们就需要使用Supplementary view。例如header和footer。
- Decoration View:如果我们想让UICollectionView看起来更好看,可以使用一些装饰性view,类似于背景图和logo图。
- UICollectionViewLayout:UICollectionView不知道如何在屏幕上显示cell,UICollectionViewLayout才是干这事的。它使用一系列的代理方法来将一个一个的cell放置到UICollectionView之中。Layout可以动态改变,在改变的过程中,我们可以添加动画效果。
- UICollectionViewFlowLayout:通过继承UICollectionViewLayout,我们可以创建自定义布局。但是苹果提供了iGetter基本的“flow-based”布局。它以元素的大小将元素以类似grid的方式排列起来。我们可以使用这个布局类来做出一些有趣的视觉效果。
创建Flicker Search示例工程
通过整个教程,我们会创建一个名为Flicker Search的应用程序,这个应用程序以很酷的方式浏览相片,通过搜索栏可以在flicker搜索和下载照片:
源码地址:https://code.csdn.net/yamingwu/flickrsearch/tree/master
创建一个Single view应用程序,选择device为iPad:
将图片加入到Assets中,可以从这里下载:UICollectionView示例程序图片资源
下一节,我们将为程序构建基本的主界面。