美文网首页ios开发
UICollectionView介绍使用

UICollectionView介绍使用

作者: 浪漫紫薇星 | 来源:发表于2016-02-12 21:50 被阅读184次

    UICollectionView是一种类似于UITableView但又比UITableView功能更强大、更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UICollectionViewLayout,而且允许用户自定义layout来进行布局。

    下面是UICollectionView合并内容和布局并生成最终界面的一个流程:

    当UICollectionView显示内容时,先从Data source(数据源)获取cell,然后交给UICollectionView。再从UICollectionViewLayout获取对应的layout attributes(布局属性)。最后,根据每个cell对应的layout attributes(布局属性)来对cell进行布局,生成了最终的界面。而用户交互的时候,都是通过Delegate来进行交互。当然,上面只是布局cell,但是UICollectionView内部还有Supplementary View和Decoration View,也可以对其进行布局。

    上面,我们了解了UICollectionView的工作流程,我们将UICollectionView分成视图、数据源和代理方法、UICollectionViewLayout三块来介绍。

    一、视图

    UICollectionView上面显示内容的视图有三种Cell视图、Supplementary View和Decoration View。

    Cell视图

    CollectionView中主要的内容都是由它展示的,它是从数据源对象获取的。

    Supplementary View

    它展示了每一组当中的信息,与cell类似,它是从数据源方法当中获取的,但是与cell不同的是,它并不是强制需要的。例如flow layout当中的headers和footers就是可选的Supplementary View。

    Decoration View

    这个视图是一个装饰视图,它没有什么功能性,它不跟数据源有任何关系,它完全属于layout对象。

    二、数据源和代理方法

    1、注册cell或者Supplementary View使其重用

    在使用数据源返回cell或者Supplementary View给collectionView之前,我们必须先要注册,用来进行重用。

    registerClass: forCellWithReuseIdentifier:

    registerNib: forCellWithReuseIdentifier:

    registerClass: forSupplementaryViewOfKind: withReuseIdentifier:

    registerNib: forSupplementaryViewOfKind: withReuseIdentifier:

    显而易见,前面两个方法是注册cell,后两个方法注册Supplementary View。其中,注册的方式有两种,第一种是直接注册class,它重用的时候会调用[[UICollectionView alloc] init]这样的初始化方法创建cell;另外一种是注册nib,它会自动加载nib文件。

    注册的之后,我们如何重用?

    在数据源方法当中返回 cell 或者 Supplementary view 的方法当中通过 dequeueReusableCellWithReuseIdentifier:forIndexPath: 或者 dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: 方法获取cell或者Supplementary View。

    示例代码:

    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellReuseIdentify forIndexPath:indexPath];

    cell.backgroundColor = [UIColor lightGrayColor];

    cell.textLabel.text = [NSString stringWithFormat:@"(%zd,%zd)", indexPath.section, indexPath.row];

    return cell;

    }

    2、数据源方法

    数据源方法与UITableView类似,主要有:

    numberOfSectionsInCollectionView:

    collectionView: numberOfItemsInSection:

    collectionView: cellForItemAtIndexPath:

    collectionView: viewForSupplementaryElementOfKind: atIndexPath:

    与UITableView不同的是多加了返回Supplementary view数据源方法。

    3、代理方法

    数据源为UICollectionView提供数据相关的内容,而代理则主要负责用户交互、与数据无关的视图外形。主要分成两部分:

    1、通过调用代理方法,管理视图的选中、高亮

    collectionView:shouldDeselectItemAtIndexPath:

    collectionView:didSelectItemAtIndexPath:

    collectionView:didDeselectItemAtIndexPath:

    collectionView:shouldHighlightItemAtIndexPath:

    collectionView:didHighlightItemAtIndexPath:

    collectionView:didUnhighlightItemAtIndexPath:

    2、长按cell,显示编辑菜单 当用户长按cell时,collection view视图会显示一个编辑菜单。这个编辑菜单可以用来剪切、复制和粘贴cell。不过,要显示这个编辑菜单需要满足很多条件:

    代理对象必须实现下面三个方法:

    collectionView:shouldShowMenuForItemAtIndexPath: collectionView:canPerformAction:forItemAtIndexPath:withSender: collectionView:performAction:forItemAtIndexPath:withSender:

    对于指定要编辑的cell, collectionView:shouldShowMenuForItemAtIndexPath: 方法需要返回 YES

    collectionView:canPerformAction:forItemAtIndexPath:withSender: 方法中,对于剪切、复制、粘贴三种action至少有一个返回YES。其实,编辑菜单是有很多种action的,但是对于UICollectionView来说,它仅仅支持的剪切、复制、粘贴三个,所以说这个代理方法至少支持这三种的一种。

    剪切、复制、粘贴的方法名是:

    cut: copy: paste:

    当上面的条件都满足了,用户就可以长按cell显示出编辑菜单,然后选择对应的action,从而就会回调delegate的collectionView:performAction:forItemAtIndexPath:withSender: 方法去做对应的事情。

    当我们想控制编辑菜单仅仅显示复制和粘贴时,我们就可以在 collectionView:canPerformAction:forItemAtIndexPath:withSender: 方法中进行操作,具体请见下面代码:

    - (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender{

    if ([NSStringFromSelector(action) isEqualToString:@"copy:"]

    || [NSStringFromSelector(action) isEqualToString:@"paste:"])

    return YES;

    return NO;

    }

    三、UICollectionViewLayout

    UICollectionViewLayout 是UICollectionView比UITableView更强大原因,它是UICollectionView的精髓,它通过 UICollectionViewLayoutAttributes 类来管理 cell 、 Supplementary View 和 Decoration View 的 位置 、 transform 、 alpha 、 hidden 等等。

    UICollectionViewLayout这个类只是一个基类,我们给UICollectionView使用的都是它的 子类 。系统为我们提供了一个最常用的layout为 UICollectionViewFlowLayout ,我们可以使用它制作 grid view 。当UICollectionViewLayout满足不了我们的需求时,我们可以 子类化UICollectionViewLayout 或者 自定义layout ,这个内容放到我下一篇当中。

    下面,我们来看看怎么使用UICollectionViewFlowLayout。 使用UICollectionViewFlowLayout之前,我们来了解它内部常用的属性:

    //同一组当中,行与行之间的最小行间距,但是不同组之间的不同行cell不受这个值影响。

    @property (nonatomic) CGFloat minimumLineSpacing;

    //同一行的cell中互相之间的最小间隔,设置这个值之后,那么cell与cell之间至少为这个值

    @property (nonatomic) CGFloat minimumInteritemSpacing;

    //每个cell统一尺寸

    @property (nonatomic) CGSize itemSize;

    //滑动反向,默认滑动方向是垂直方向滑动

    @property (nonatomic) UICollectionViewScrollDirection scrollDirection;

    //每一组头视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。

    @property (nonatomic) CGSize headerReferenceSize;

    //每一组尾部视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。

    @property (nonatomic) CGSize footerReferenceSize;

    //每一组的内容缩进

    @property (nonatomic) UIEdgeInsets sectionInset;

    上面是UICollectionViewFlowLayout内部的属性,这些属性都是统一设置,若是统一设置无法满足需求,可以实现 UICollectionViewDelegateFlowLayout 方法,进行对应的设置。

    了解了UICollectionViewFlowLayout主要属性,我们再来看看使用步骤:

    1、生成一个UICollectionViewFlowLayout对象给collection view

    2、通过itemSize来配置cell的宽和高

    3、如果有需要通过设置minimumInteritemSpacing来设置每个cell之间的间距,通过minimumLineSpacing来设置同一组当中不同行之间cell的行距。

    4、如果想要组头视图或者组尾视图,指定它们的大小

    5、设置layout的滑动方向

    6、如果统一设置无法满足需求,实现UICollectionViewDelegateFlowLayout方法来进行设置。

    相关文章

      网友评论

        本文标题:UICollectionView介绍使用

        本文链接:https://www.haomeiwen.com/subject/hyuukttx.html