UICollectionView的使用(一)
本篇讲解UICollectionView的基本使用方法。
开发环境:Xcode6 编译环境:SDK8.1
UICollectionView的使用与UITableView,UIScrollView比较类似,但也有许多不同的地方,使用时需要格外注意,下面我们开始一步步探讨UICollectionView的具体使用。
第一步:新建项目,选SigleView -> next 。然后选中CollectionView,拖入 storyboard中,大小调整为(320,400)。为了方便演示效果,本项目中关闭了autolayout。
在拖入的CollectionView左上角可以看到一个白框,这个我们暂时还用不上,选中此框按delete删除。将CollectionView拖线到ViewController.m中,命名为collectionView。
第二步: 设置“collectionView的delegate和dataSource并遵守协议。
第三步:实现delegate/dataSource方法,注册cell。
与tableView类似的需要实现至少2个方法(
numberOfSections方法默认返回值是1,可不实现
)。
此时需要注意的是,系统没有给出默认的UICollectionViewCell,必须由用户自己创建并且注册给collectionView,否则会有下面关键字的错误:
“must register a nib or a class for the identifier or connect a prototype cell”
解决方法:先创建一个类继承自UICollectionViewCell,再在viewDidLoad方法中 注册此类即可。注意:创建此类的时候时候暂不勾选Also create XIB file ,下一篇 中会详细说明勾选时的用法。
运行效果:
第四步:调整cell尺寸及其他。
由于CollectionViewCell的尺寸我们并没有设置(注册时用的是MyCollectionViewCell类),系统默认使用的大小为(50,50)。
为了调整CollectionView的样式,我们需要学习一个Collection的布局类:UICollectionViewLayout,这是一个基类,我们通常使用的是其子类UICollectionViewFlowLayout,该类使用起来非常简单,很容易就能让CollectionView按照我们想要的方式布局。
再运行一下看看效果:
此时,你可能有几个疑惑:1.为什么是设置最小值?2.cell的排列顺序是先排列,还是先排行?
1.为了解答这个问题,我们设置不同的flowLayout.itemSize看看有什么区别(collectionView中的每一个cell官方的部分api中称为item),不管我们怎么设置大小,都不会出现上一行显示半个item而在下一行显示另外半个item(水平滚动方向有类似的结论),即系统会根据设定的间距最小值自动帮我们计算出每一行最多显示出几个cell,如果有多出的距离则会均分到每个间距中。
2.cell的排列顺序与collectionView的滚动方向有关。垂直滚动时,先排行;水平滚动时先排列。
第五步:给cell中添加控件
在第三步中,我们只注册了cell的类,但是我们没有这个cell添加任何控件。此时若要添加控件则只能纯代码实现。若每个cell的样式相同,可以直接将添加的代码写在MyCollectionViewCell中,如下
添加控件的部分写在这两个方法中均可。
运行一下看看效果:
以上为CollectionView的基本用法,到此你已经可以创建出一个自己的CollectionView了,下一篇将讲解CollectionView基本用法的其他内容。