[转]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更新布局的时候，新旧布局信息交换的媒介，它存储了旧的布局，或者新布局。

posted @ 2017-06-22 11:39  超级大熊  阅读(606)  评论(0)  编辑  收藏  举报