前言
上一篇文章MyDaily 开发过程1 -- UIScrollView中介绍了有关UIScrollView的使用方法。但是一个App里只有文字没有图片怎么能行呢?尤其是作为一个高(da)富(diao)帅(si)程序猿,有图片没有美女简直是不能原谅的错误呀。于是在这个看脸的世界,我在App里满足了自己的愿望。啥也不说了先上图!
听说美女镇楼你们都会点赞(满满的都是套路)!
然而这和今天要说的UICollectionView有什么关系吗?别着急,一个美女怎么够?因此....
美女当然是越多越好,所以UICollectionView在这里就派上了用场。
让我们看看动图的效果吧!
好了下面就让我们认识一下UICollectionView吧!
正文
一,UICollectionView简介
The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts. Collection views support customizable layouts that can be used to implement multi-column grids, tiled layouts, circular layouts, and many more. You can even change the layout of a collection view dynamically if you want.
从这段Apple官方给出的定义我们可以知道以下几点内容
- UICollectionView 是用来管理和显示一系列有序数据的。
- UICollectionView和UITableView具有很多相同的功能,但是UICollectionView可以显示多列布局。
- UICollectionView支持自定义布局,因此你可以使用能它显示多列网格,平铺布局,环形布局....
- 你可以动态的改变UICollectionView的布局如果你闲着没事做。
从上面几点我看出来了一点,UICollectionView很牛X!
所以UICollectionView要怎么使用呢?
二,UICollectionView基本元素介绍
从这两张图中大家可以看到,在显示的页面当中有三个元素是我们需要知道的。
- Cells
- Supplementary Views
- Decoration Views
个人理解Cells是用来显示你想要展示的数据的,也就是说无论是图片,文字或者其他的数据,你都可以用Cells来展示。
Supplementary Views就如同它的名字一样,补充视图。你可以使用它来展示你想要补充说明的信息,比如不同Section的名字。
Decoration Views,我认为这就是一个背景装饰视图。
三,如何创建UICollectionView
1, 我们要遵循一些UICollectionView的协议
- UICollectionViewDelegate
- UICollectionViewDataSource
看着是不是很眼熟,其实这两个协议中的方法也和UITableVeiw中的方法差不多。
2, 开始创建UICollectionView对象
- initWithFrame:collectionViewLayout:
在这里我要解释一下layOut对象,我们想要创建UICollectionView对象就必须要告诉collectionView以什么方式布局,因此layOut对象就如同一个布局文件,告诉collectionView应该如何放置Cells。
3,创建Cells和Supplementary View
- registerClass:forCellWithReuseIdentifier:
使用代码创建Cell - registerNib:forCellWithReuseIdentifier:
使用Nib创建Cell - registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
使用代码创建Supplementary View - registerNib:forSupplementaryViewOfKind:withReuseIdentifier:
使用Nib创建Supplementary Viw - dequeueReusableCellWithReuseIdentifier:forIndexPath:
返回一个重复使用的Cell对象 - dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
返回一个重复使用的Supplementary View对象
4,实现协议中的方法
协议中的方法比较多,根据自己的需要进行实现,要说明的是UICollectionViewDataSource中的这几个方法是必须要实现的
- collectionView:numberOfItemsInSection:
设置每个Section中的Cell数量 - collectionView:cellForItemAtIndexPath:
为每个Cell设置要显示的数据
最后千万不要忘记这几行代码
collectionView.dataSource = self;
collectionView.delegate = self;
设置好要实现协议的代理之后,一定要记住在数据获取完毕后使用
[collectionView reloadData] 来刷新Cell
结语
在这里我就不贴出自己的代码了,因为我想如果是使用过UITableVeiw的同学看到以上的解释应该很快就能够使用UICollectionView。个人认为要想很好的使用UICollectionVeiw关键还是要能够创造自定义布局。如果大家对于我展示的布局比较感兴趣可以猛戳这里。你可以下载MyDaily这个项目的所有代码。我还会不断更新这个项目,加入一些新的功能。最后如果你觉得篇文章对你有一分钱的帮助的话请给我点个赞,谢谢大家!