首页 > 代码库 > [转]UICollectionView 全解

[转]UICollectionView 全解

什么是UICollectionView?

UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView。它有许多与UITableView相同的地方,例如:数据源、代理等接口等。既然,UITableView有这么多的相似之处,为什么还要学习CollectionView呢?作为一个独立的控件,CollectionView有着自己独特的布局特性,这一点拉开了两个控件的差距,所以学习UIcollectionView还是非常有必要的。

UICollectionView 组成

技术分享
image.png.jpeg

如图:你看到的就是一个最简单的UICollectionView,它包含:Cells、Supplementary Views、Decoration Views。

1.Cells :用于展示内容的主体,cell的尺寸和内容可以各不相同。这个下面会详细介绍。
2.Supplementary Views : 追加视图,类似于UITableView每个Seciton的Header View 或者Footer View,用来标记Section的View
3.Decoration Views :装饰视图,完全跟数据没有关系的视图,负责给cell 或者supplementary Views添加辅助视图用的,灵活性较强。
不管多么复杂的UIcollectionView都是由着三个部件组成的。

实现一个简单的UICollectionView

相信如果你对UITableView有所了解的话,实现一个UICollectionView,其实和UITableView没有多大的区别,它们同样是由dataSource和delegate模式设计的:dataSource为View提供数据源,告诉View要显示什么样的数据,delegate提供一些样式的小细节以及用户交互的响应。但是值得一提的是要想初始化一个UICollectionView,一定要为它提供一个布局,即:UICollectionViewLayout对象,改对象定义了CollectionView的一些独特的布局,后面会详细的介绍。

UICollectionViewDataSource

  • section数量 :numberOfSectionsInCollectionView:
    某个section中多少个item:collectionView:numberOfItemsInSection:
  • 对于某个位置的显示什么样的cell:collectionView:cellForItemAtIndexPath:
  • 对于某个section显示什么样的supplementary View:collectionView:viewForSupplementaryElementOfKind:atIndexPath:
    对于Decoration Views,提供的方法并不在UICollectionViewDataSource中,而是在UICollectionViewLayout中(因为它仅仅跟视图相关,而与数据无关)。

UICollectionView子视图重用

与UITableView一样,避免不断的生成和销毁对象,UICollectionView对于view的重用是必须的。但是我们发现在UIcollectionview中不仅仅是cell的重用,Supplementary View和Decoration View也是可以并且应当被重用的,细心的朋友可以发现,UIcollectionViewCell继承自UICollectionReusableView,而在collectionView:viewForSupplementaryElementOfKind:atIndexPath:这个方法的返回类型是:UICollectionReusableView,其实苹果给UIcollectionview中的所有视图都来自一个可重用的基类,就是UICollectionReusableView,所以自定义Supplementary View和Decoration View也是继承者个类为基础,来构建自己的视图。

  • 注册自定义视图
  • registerClass:forCellWithReuseIdentifier:
  • registerNib:forCellWithReuseIdentifier:
  • registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
  • registerNib:forSupplementaryViewOfKind:withReuseIdentifier:
    得到对应的视图
  • dequeueReusableCellWithReuseIdentifier:forIndexPath:
  • dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
    其中SupplementaryViewOfKind:参数的类型是一个字符串常量,UICollectionElementKindSectionHeader/UICollectionElementKindSectionFooter该常量的定义UICollectionViewDelegateFlowLayout类中。

UICollectionViewDelegate

和数据无关的view的外形,用户的交互什么的,都是UICollectionViewDelegate来负责

  • cell的高亮
  • cell的选中状态
  • 可以支持长安后的菜单
  • 在用户交互上UIcollectionview做了很多细节的处理,每个cell有独立的高亮、选中事件的delegate,开发者可以监听到的事件变得多起来,当用户点击一个cell的时候,会按以下的流程delegate询问(这是UIcollectionViewDelegate API中给出的):

(when the touch begins)

  • 1、-collectionView:shouldHighlightItemAtIndexPath:是否应该高亮?
  • 2、-collectionView:didHighlightItemAtIndexPath:如果1返回YES,执行,否则不执行
    (when the touch lifts)
  • 3、-collectionView:shouldSelectItemAtIndexPath: or -collectionView:shouldDeselectItemAtIndexPath:如果1返回NO这里不再询问询问是否选中,
  • 4、-collectionView:didSelectItemAtIndexPath: or -collectionView:didDeselectItemAtIndexPath:如果3中返回选中,调用选中
  • 5、-collectionView:didUnhighlightItemAtIndexPath:如果1返回YES,那么会调用取消高亮
    在UIcollectionview中分别有selected和highlighted属性控制状态。

UICollectionViewCell

相对于UItableViewCell而言,UIcollectionViewCell没有那么多样式。UIcollectionViewCell不存在所谓的style,也没有titleLabel和内置的imageView属性,UIcollectionViewCell的结构上相对比较简单,由下至上:

  • cell :本身作为的View,这里应该就是UICollectionReusableView
  • backgroundView :用作cell背景的视图,设置背景图片等。
  • selectedBackgroundView :cell被选中的背景视图
  • contentView :内容视图,自定义的cell时应该将内容放在这个View上

UIcollectionView有一个小细节:被选中的cell的自动变化,所有的cell中的子View,也包括contentView中的子View,当cell被选中是,会自动去查找view是否有被选中状态下的改变,如果在contentView中有一个imageView的selected和normal状态下的图片是不同的,那么选中cell这张图片也会从normal变成selected,不需要添加代码。

UICollectionView 布局 UICollectionViewLayout

UICollectionViewLayout是UICollectionView特有的,是UICollectionView的精髓所在,它负责将每个cell、supplementary view、decoration view进行组合,为它们设置各自的属性,包括:位置、大小、透明度、层级关系、形状等。UICollectionViewLayout决定了,UICollectionView是如何显示在界面上,从UICollectionView初始化必须要一个UICollectionViewLayout也可以看得出来,Layout对于UICollectionView的最要性。

UICollectionViewFlowLayout 流水布局

苹果为我们设计了一套非常灵活、通用的Layout,就是UICollectionViewFlowLayout流水布局,也叫线性布局。UICollectionViewFlowLayout属性:

  • CGSize itemSize:它定义了每一个item的大小,通过itemSize可以快捷给每一个cell设置一样的大小,如果你想到不同的尺寸,-collectionView:layout:sizeForItemAtIndexPath:来给每一个item指定不同的尺寸。
  • CGFloat minimumLineSpacing:最小行间隔,同样你也可以通过-* collectionView:minimumLineSpacingForSectionAtIndex:方法来个没一行设置不同的行间距
  • CGFloat minimumInteritemSpacing:最小cell之间的距离,同上都是可以通过-collectionView:minimumInteritemSpacingForSectionAtIndex:特定的方法,顶底到具体的行和item之间的间距的,非常的灵活。
  • UIEdgeInsets sectionInset:组内边距,设置UIcollectionView整体的组内边距,同上有特定方法-collectionView:insetForSectionAtIndex:设置具体的边距
  • CGSize headerReferenceSize:设置supplementary header View的大小-collectionView:referenceSizeForHeaderInSection:
  • CGSize footerReferenceSize:设置supplementary header View的大小-collectionView:referenceSizeForFooterInSection:
  • UICollectionViewScrollDirection scrollDirection:设置UIcollectionView的滚动方向

UICollectionViewFlowLayout方法:

// 1、准备布局,布局初始化一般在这里进行
- (void)prepareLayout;

// 每当collectionView边界改变时便调用这个方法询问 是否 重新初始化布局 是则调用prepareLayout准备布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

// 2、初始化布局时调用,返回在一定区域内,每个cell和Supplementary和Decoration的布局属性
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect: (CGRect)rect;

// 当滚动停止时,会调用该方法确定collectionView滚动到的位置
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset   withScrollingVelocity:(CGPoint)velocity;
在使用UICollectionViewFlowLayout布局的时候,有时会有特别的需求,比如:当一个cell滑动到屏幕中点的时候放大,并且当我停止滑动时,能够将离屏幕最近的cell居中。这四个方法就能轻松的完成这样的事。

UICollectionViewLayoutAttributes 布局属性

在了解这个类之前,我们得先疏通一下,UIcollectionView的布局方式,首先我们之前一直提,UIcollectionView的初始化必须有一个UICollectionViewLayout,也就是我们说的,必须要有一个布局格式样式,那么一个UIcollectionView有那么多的cell、supplementary View、decoration View,UIcollectionViewLayout是如何进行布局显示的呢?原来从UIcollectionViewLayout开始加载内容的时候,便默默的做了很多事:首先是去调用 1 准备布局,然后根据当前屏幕所处位置的合适rect,得到每一个视图的UICollectionViewLayoutAttributes属性,然后在把视图按UICollectionViewLayoutAttributes中的属性描述设置视图具体的center、size等等,期间也会去调用其他方法去确定一些间距。所以UICollectionViewLayoutAttributes是每个视图决定性的布局的属性。

  • CGRect frame 布局视图的frame简单明了
  • CGPoint center 视图中心点
  • CGSize size 视图尺寸
  • CATransform3D transform3D 这个属性可以用来做酷炫的3D动画
  • CGAffineTransform transform 转场属性
  • CGFloat alpha 透明度
  • NSInteger zIndex 层级,数字越大,层级越高(最上面)。
  • NSIndexPath *indexPath 如果是cell有对应的indexPath
  • UICollectionElementCategory representedElementCategory 视图标记,是cell还是supplementary View或者decoration View
  • registerClass:forDecorationViewOfKind: 注册decoration View
  • registerNib:forDecorationViewOfKind:
  • +(instancetype)layoutAttributesForDecorationViewOfKind:(NSString )decorationViewKind withIndexPath:(NSIndexPath )indexPath 这个类方法是decoration View布局的来源
  • -(nullable UICollectionViewLayoutAttributes )layoutAttributesForDecorationViewOfKind:(NSString )elementKind atIndexPath:(NSIndexPath *)indexPath 与上一个方法结合得到decoration View布局

UICollectionViewLayout 自定义布局

由于系统给我们设计的流水局在实现和细节处理上,帮我们做了很多事,所以完全的自定义布局是挺麻烦,并且要考虑到各种细节的。在UIcollectionViewLayout头文件中,苹果给我提供很多特定的方法,以供我们自己布局,有仅仅关于布局的、有关于删除插入item的布局、有关于移动item的布局。方法分的很细,我们只了解基本的布局、删除和插入布局等。

  • @interface UICollectionViewLayout (UISubclassingHooks) 这个扩展类中,都是用来布局UIcollectionView子视图的
  • @interface UICollectionViewLayout (UIUpdateSupportHooks) 用来布局删除插入动作
  • @interface UICollectionViewLayout (UIReorderingSupportHooks) 移动动作布局

UISubclassingHooks

这个扩展类里面的方法,上面流水布局的代码处已经给列举出来,就不多说了

UIUpdateSupportHooks

在UIcollectionView中删除或者插入item时,建议使用下面的方式:

[self.collectionView performBatchUpdates:^{
    [self.collectionView deleteItemsAtIndexPaths:@[pinchIndexPath]];
} completion:nil];
[self.collectionView performBatchUpdates:^{
    [self.collectionView insertItemsAtIndexPaths:@[[NSIndexPath indexPathForItem:0 inSection:0]]];
} completion:nil];

值得一说的是,在对UIcollectionView插入和删除操作是,不管使用的是上面的更新方式还是reloadData,collectionView都不会刷新全部的cell,具体原因本人也不是很清楚,多说无益,下面上删除、插入的代码:

/*  在insert或者delete之前,prepareForCollectionViewUpdates:会调用,
    可以使用这个方法来完成 添加/ 删除的预处理,将要删除或者插入的indexPath保存
*/
- (void)prepareForCollectionViewUpdates:(NSArray *)updateItems {

    // Keep track of insert and delete index paths
    [super prepareForCollectionViewUpdates:updateItems];

    self.deleteIndexPaths = [NSMutableArray array];
    self.insertIndexPaths = [NSMutableArray array];

    for (UICollectionViewUpdateItem *update in updateItems) {
        if (update.updateAction == UICollectionUpdateActionDelete) {
            [self.deleteIndexPaths addObject:update.indexPathBeforeUpdate];

        }else if (update.updateAction == UICollectionUpdateActionInsert) {

            [self.insertIndexPaths addObject:update.indexPathAfterUpdate];
        }
    }
}

// 更新结束后调用 这个方法在 performBatchUpdates:completion: complete的Block之前调用
- (void)finalizeCollectionViewUpdates {
    [super finalizeCollectionViewUpdates];
    //  释放insert and delete index paths
    self.deleteIndexPaths = nil;
    self.insertIndexPaths = nil;
}

/**
    这两个方法是成对出现的,一个是在在屏幕上出现之前调用,一个是在屏幕上出现之后调用
    在[collecView reloadData]或者performBatchUpdates:completion:调用的时候
    只要是有刷新的效果,他们就会被调用多次,视图不断的消失(失效,被摧毁)出现(重组 被创建或者回收利用)
 */
// For each element on screen before the invalidation,
- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath {
    // Must call super
    UICollectionViewLayoutAttributes *attributes = [super initialLayoutAttributesForAppearingItemAtIndexPath:itemIndexPath];

    if ([self.insertIndexPaths containsObject:itemIndexPath]) {
        // 只改变插入的 attributes
        attributes = [self layoutAttributesForItemAtIndexPath:itemIndexPath];

        // configure attributes...
        attributes.alpha = 0;
        attributes.center = _center;
        attributes.transform3D = CATransform3DMakeScale(0.1, 0.1, 1.0);
    }
    return attributes;
}

// For each element on screen after the invalidation,
- (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath {
    UICollectionViewLayoutAttributes *attributes = [super finalLayoutAttributesForDisappearingItemAtIndexPath:itemIndexPath];

    if ([self.deleteIndexPaths containsObject:itemIndexPath]) {
        attributes = [self layoutAttributesForItemAtIndexPath:itemIndexPath];
        attributes.alpha = 0;
        attributes.center = _center;
        attributes.transform3D = CATransform3DMakeScale(0.1, 0.1, 1.0);
    }
    return attributes;
}

UICollectionViewUpdateItem

这个类是UIcollectionView更新布局的时候,新旧布局信息交换的媒介,它存储了旧的布局,或者新布局。

[转]UICollectionView 全解