iOS UICollectionView 入门 01 简介

当第一代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搜索和下载照片:

技术分享

创建一个Single view应用程序,选择device为iPad:

技术分享

将图片加入到Assets中,可以从这里下载:UICollectionView示例程序图片资源

技术分享


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。