ios开发——UICollectionView初阶

一、功能强大的集合视图

UICollectionView是一种新的数据展示视图,最最基本的集合视图类似于UITableView,就是多行多列展示数据,之前试着用UITableView实现过多行多列展示图片,不过效果一般而且bug较多。ios开发——用UITableView展示多行多列图片 
 而UICollectionView出现后,这种效果就非常非常容易了,不但如此,之前的各种开源社区里一些瀑布流也变得非常简单。不过,正如刚才所说,这都是UICollectionView最最基本的形式,实际上,它真正强大的地方在于完全的自定义。你可以继承UICollectionViewLayout类来创建自己的Layout,进而仅仅通过相对简短的代码来实现相当强大的效果。例如苹果官方的实例代码中的特效:

很熟悉吧?这正是以前开源社区里的大神们封装的各种自定义视图,现在,通过UICollectionViewLayout我们也能结合上CAAnimation实现这种带炫酷动画的视图了。

二、致谢

本文的诞生来自于最近想写一个课程表,需要用到UICollectionView,特意去网上看了资料。之前我对集合视图的认识仅仅限于多行多列的TableView,后来看了@onevcat的博客后才知道这个视图的强大之处。本文相当于对他的博客的学习笔记。

三、一些基本概念

一般来说,一个完整的UICollectionView包括以下三个部分:

cell——相当于表格视图里的cell,需要通过dataSource来为其指定数据源,主要功能就是展示图片或其他信息,以及处理交互。

Supplementary Views——附加视图,类比表格视图里的header和footer,可有可无,起展示附加信息的作用。

Decoration Views——装饰视图,指cell的背景装饰,比如iBooks应用里的背景书架

四、Data Source

如果是实现一个最基本的UICollectionView,也就是像上图一样的一个多行多列的表格,那么过程就与实现UITableView一样了,为其制定数据源并实现相应方法即可:

<span style="font-size:18px;">?-numberOfSectionsInCollection:		返回有多少Section,可以理解为多少行
?-collectionView:numberOfItemsInSection:	返回每个Section中有多少内容,可以理解为多少列
-collectionView:cellForItemAtIndexPath:	返回每个Item,在该方法中进行复用、构造、初始化等操作。</span>

另外也可以指定Supplementary Views

-collectionView:viewForSupplementaryElementOfKind:atIndexPath:

但是没有制定Decoration Views的方法,因为这个被移到了UICollectionViewLayout中单独实现。

和UITableView一样,只有列数和返回Item的那两个方法是required,其他的是optional,但是一般来说我们通过实现前三个方法可以保证一个简单地UICollectionView正常工作。

五、关于复用

在UITableView中,我们可以这样写来实现cell的复用

<span style="font-size:18px;">- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *cellId = @"cellID";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellId];
    }
    return cell;
}</span>

即直接取复用cell,如果不存在就新建一个,然而,这种方法在UICollectionView中是行不通的,因为没有

- dequeueReusableCellWithIdentifier:这样的方法,只有一个

- dequeueReusableCellWithReuseIdentifier: forIndexPath:方法,这个方法要求必须提前用ReuseIdentifier注册cell。因此在使用之前必须通过以下四种方法之一来注册。

<span style="font-size:18px;">-registerClass:forCellWithReuseIdentifier:
-registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
-registerNib:forCellWithReuseIdentifier:
-registerNib:forSupplementaryViewOfKind:withReuseIdentifier:</span>
六、交互处理——Delegate

和UITableView一样,可以在Delegate中处理单元格cell的点击事件、设置高亮与选择状态等,还支持长按相应菜单。

稍有不同的是,在UICollectionView中可以单独处理单元格的这些事件,而不是统一处理。具体来说,在方法中多了IndexPath参数,例如:

<span style="font-size:18px;">-?collectionView:shouldHighlightItemAtIndexPath:
-?collectionView:didHighlightItemAtIndexPath:
-?collectionView:shouldSelectItemAtIndexPath: </span>

这样处理起来就更加灵活了。

七、UICollectionViewLayout与UICollectionViewFlowLayout

这里顺带提一下Layout类,这个是UICollectionView的与UITableView最大的不同之处,也是让UICollectionView功能那么强大的精髓之处,因此这个会单独拿一篇博文来记录。

UICollectionViewLayout决定了我们的UICollectionView是如何被展示到屏幕上的,它决定着cell、supplementary views和decorator view的位置、大小、透明度、形状、层级关系等等。再生成UICollectionView时要制定其Layout,这里比较常见的做法是继承UICollectionViewLayout类并自定义布局,或者使用Apple提供给我们的最基本的布局——UICollectionViewFlowLayout,也就是我们最常见的Gird
View的形式。

在Flow Layout 中,有以下几个重要属性:

—itemSize 决定着每个cell的大小

—minimumInteritemSpacingcell与cell间的最小间距。为什么说是最小呢?就比如非常流行的瀑布流,每个图片的大小是不一样的,因此这个属性决定了它们之间的最小间距界限。

—minimumLineSpacing行与行之间的最小间距

—scrollDirection
滚动方向,与UITableView一样,UICollectionView也是继承自UIScrollView,因此通过这个属性为其制定滚动的方向。

—headerReferenceSize、footerReferenceSizeheader和footer的宽高,这两个属性只有一个会起作用,这决定与上一个属性,滚动方向的设定。水平滚动时宽度起作用,竖直滚动时高度起作用

—sectionInset
缩进,可以理解为cell的边界的“扩充”部分。

需要注意的是,上述属性全部都是全局的,也就是说对所有的cell都起作用,如果想单独设置,Flow Layout提供了对应的方法:

<span style="font-size:18px;">-collectionView:layout:sizeForItemAtIndexPath:
-collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
-collectionView:layout:minimumLineSpacingForSectionAtIndex:
-collectionView:layout:referenceSizeForHeaderInSection:
-collectionView:layout:referenceSizeForFooterInSection:
-collectionView:layout:insetForSectionAtIndex:</span>
八、总结

要实现一个UICollectionView,必须要做的工作是dataSource和layout的实现,其中dataSource与UITableView类似,layout部分Apple已经提供了一个Flow Layout作简单的瀑布流展示,而处理用户交互就需要delegate,在UICollectionView中cell的几乎所有的属性和交互都可以通过方法来单独处理。

时间: 2024-10-27 10:49:44

ios开发——UICollectionView初阶的相关文章

iOS开发- UICollectionView详解+实例

iOS开发- UICollectionView详解+实例 本章通过先总体介绍UICollectionView及其常用方法,再结合一个实例,了解如何使用UICollectionView. UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类. 使用UICollectionView 必须实现UICol

iOS开发-UICollectionView实现瀑布流

关于瀑布流的实现网上有很多种解法,自定义控件,TableView+ScrollView,UICollectionView是iOS6发布之后用于展示集合视图,算起来已经发布三年左右了,不过知识点是不变的,集合视图提供了一个更优雅的方式去展示图片或者文字信息.UICollectionView与UITableView相似,UICollectionViewController与UITableViewController都负责视图,存储需要的数据,并且能处理数据源与委托协议. 简单瀑布流 首先来看一个简单

iOS开发-消息初认识

一.消息循环(runLoop)的作用 1,防止程序退出, 2,接受事件 3,如果没有事件,让程序自动休眠 二.消息源 1, 输入源:键盘.鼠标.NSBoard.NSPort 2,定时源:NSTimer 三.创建消息的步骤: 1, 创建消息 2,方法循环中,并指定消息的模式 3,消息模式和循环模式要匹配,否则不能运行 注意:主线程默认是开启消息循环,子线程默认是关闭消息循环的 四.手动开启消息循环的方式 方式一 :run方法,缺点:开了无法关闭 方式二 :runUntildata 给定一个时间,让

iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流

上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调>.UICollectionView之所以强大,是因为其具有自定义功能,这一自定义就不得了啦,自由度非常大,定制的高,所以功能也是灰常强大的.本篇博客就不使用自带的流式布局了,我们要自定义一个瀑布流.自定义的瀑布流可以配置其参数: 每个Cell的边距

iOS开发 纯代码创建UICollectionView

转:http://jingyan.baidu.com/article/eb9f7b6d8a81a5869364e8a6.html iOS开发 纯代码创建UICollectionView 习惯了使用xib和StoryBoard创建UICollectionView项目工程的伙伴,需要转换使用纯代码来实现,想避免碰更多的壁,就需要认真了解创建UICollectionView过程了.创建UICollectionView比创建UITableView更加复杂,初始化方式也是相对奇特.以下是使用纯代码创建UI

iOS开发 非常全的三方库、插件、大牛博客等等

UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明.具体使用看"使用方法". (国人写) XHRefreshControl- XHRefreshControl 是一款高扩展性.低耦合度的下拉刷新.上提加载更多的组件.(国人写) CBStoreHo

iOS开发之资料收集

github排名:https://github.com/trending, github搜索:https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者

iOS:iOS开发非常全的三方库、插件、大牛博客等等

iOS开发非常全的三方库.插件.大牛博客等等 github排名:https://github.com/trending, github搜索:https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableView或

Nodejs初阶之express

Nodejs初阶之express 2014-02-28 23:00 by 聂微东, 85627 阅读, 26 评论, 收藏, 编辑 PS: 2014/09/24 更新<Express 4.X 启航指南>,欢迎阅读和评论:) 老规矩,开头部分都是些自娱自乐的随想,想到哪写到哪... 到今天俺已经在俺厂工作俩年零几天了,工作以来头一回在一家企业工作超俩年,对于这俩年确实只有满满的成就感,不管是工作还是生活...写到这句突然又想写篇这俩年的总结,等这篇文章发了之后就着手整理吧,吼吼. 那篇<n