iOS-UICollectionView快速构造/拖拽重排/轮播实现

梦里梦外; 2022-05-30 04:19 218阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/11366.html][http_www.demodashi.com_demo_11366.html]

**目录**  
\* `UICollectionView`的定义  
\* `UICollectionView`快速构建GridView网格视图  
\* `UICollectionView`拖拽重排处理(iOS8.x-/iOS9.x+)  
\* `UICollectionView`实现简单轮播

## UICollectionView的定义 ##

`UICollectionView`同`UITableView`一样，是iOS中最常用到数据展示视图。  
官方定义：

> An object that manages an ordered collection of data items and presents them using customizable layouts.  
> 提供管理有序数据集合且可定制布局能力的对象

![1240][]

*  `UICollectionView`显示内容时:  
    
    
     *  通过`dataSource`获取`cell`
     *  通过`UICollectionViewLayout`获取`layout attributes`布局属性
     *  通过对应的`layout attributes`对`cell`进行调整，完成布局
 *  `UICollectionView`交互则是通过丰富的`delegate`方法实现

***iOS10中增加了一个新的预处理protocol UICollectionViewDataSourcePrefetching 帮助预加载数据 缓解大量数据加载带来的快速滑动时的卡顿***

### UICollectionView视图 ###

一个标准的`UICollectionView`视图包括以下三个部分

*  **`UICollectionViewCell`视图展示单元**
 *  **`SupplementaryView`追加视图，类似我们熟悉的`UITableView`中的`HeaderView`、`FooterVIew`**
 *  **`DecorationView`装饰视图**

1.`UICollectionView`依然采用`Cell`重用的方式减小内存开支，所以需要我们**注册并标记**，同样，注册分为`Class`及`nib`两类

// register cell
        if (_cellClassName) {
            [_collectionView registerClass:NSClassFromString(_cellClassName) forCellWithReuseIdentifier:ReuseIdentifier];
        }
        if (_xibName) {
       // xib
            [_collectionView registerNib:[UINib nibWithNibName:_xibName bundle:nil] forCellWithReuseIdentifier:ReuseIdentifier];
        }

2.**Father Apple**同样将重用机制带给了`SupplementaryView`，注册方法同`Cell`类似

// UIKIT_EXTERN NSString *const UICollectionElementKindSectionHeader NS_AVAILABLE_IOS(6_0);
    // UIKIT_EXTERN NSString *const UICollectionElementKindSectionFooter NS_AVAILABLE_IOS(6_0);
    - (void)registerClass:(nullable Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier; - (void)registerNib:(nullable UINib *)nib forSupplementaryViewOfKind:(NSString *)kind withReuseIdentifier:(NSString *)identifier;

对于它尺寸的配置，同样交由`Layout`处理，如果使用的是`UICollectionViewFlowLayout`，可以直接通过`headerReferenceSize`或`footerReferenceSize`赋值  
3.**`DecorationView`装饰视图**，是我们在自定义`Custom Layout`时使用

### UICollectionViewDataSource及UICollectionViewDelegate ###

这个部分使用频率极高想必大家都非常熟悉，所以笔者列出方法，不再赘述。

**UICollectionViewDataSource**（**\* 需要着重关注下iOS9后出现的两个新数据源方法，在下文中介绍拖拽重排时会用到他们 \***）

@required
    
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section; // The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath: - (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath; @optional - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView; // The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath; - (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0); - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath NS_AVAILABLE_IOS(9_0);

**UICollectionViewDelegate**

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0); - (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0); - (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath; - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath; - (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath; - (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath; - (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath;

官方注释解释了交互后调用的顺序

// (when the touch begins) // 1. -collectionView:shouldHighlightItemAtIndexPath: // 2. -collectionView:didHighlightItemAtIndexPath: // // (when the touch lifts) // 3. -collectionView:shouldSelectItemAtIndexPath: or -collectionView:shouldDeselectItemAtIndexPath: // 4. -collectionView:didSelectItemAtIndexPath: or -collectionView:didDeselectItemAtIndexPath: // 5. -collectionView:didUnhighlightItemAtIndexPath:

使用`代理`的方式处理数据及交互，好处是显而易见的，代码功能分工非常明确，但是也造成了一定程度上的代码书写的繁琐。所以本文会在**快速构建**部分，介绍如何使用`Block`实现链式传参书写

### UICollectionViewLayout布局 ###

不同于`UITableView`的简单布局样式，`UICollectionView`提供了更加强大的布局能力，将布局样式任务分离成单独一个类管理，就是我们**初始化时必不可少`UICollectionViewLayout`**

`Custom Layout`通过`UICollectionViewLayoutAttributes`，配置不同位置Cell的诸多属性

@property (nonatomic) CGRect frame;
    @property (nonatomic) CGPoint center;
    @property (nonatomic) CGSize size;
    @property (nonatomic) CATransform3D transform3D;
    @property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
    @property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
    @property (nonatomic) CGFloat alpha;
    @property (nonatomic) NSInteger zIndex; // default is 0

同样也可以通过Layout提供诸多`行为接口`动态修改Cell的布局属性

贴心的**Father Apple**为了让我们具备快速构建网格视图的能力，封装了大家都非常熟悉的线性布局`UICollectionViewFlowLayout`，同样不做赘述

@property (nonatomic) CGFloat minimumLineSpacing;
    @property (nonatomic) CGFloat minimumInteritemSpacing;
    @property (nonatomic) CGSize itemSize;
    @property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:
    @property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical
    @property (nonatomic) CGSize headerReferenceSize;
    @property (nonatomic) CGSize footerReferenceSize;
    @property (nonatomic) UIEdgeInsets sectionInset;
    
    // 悬浮Header、Footer官方支持
    // Set these properties to YES to get headers that pin to the top of the screen and footers that pin to the bottom while scrolling (similar to UITableView).
    @property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
    @property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

本文中不展开讨论如何定义`Custom Layout`实现诸如悬浮`Header`、瀑布流、堆叠卡片等效果，鶸笔者会在近期写一篇文章详细介绍布局配置及有趣的`TransitionLayout`，感兴趣的同学可以关注一下  
![有趣的UICollectionViewTransitionLayout][UICollectionViewTransitionLayout]

## UICollectionView快速构建GridView网格视图 ##

日常工作中，实现一个简单的网格布局`CollectionView`的步骤大致分成以下几步：  
\* 配置`UICollectionViewFlowLayout`：滑动方向、itemSize、内边距、最小行间距、最小列间距  
\* 配置`UICollectionView`：数据源、代理、注册Cell、背景颜色

完成这些，代码已经写了一大堆了，如果App网格视图部分很多的话，一遍遍的写，很烦-。- 所以封装一个简单易用的`UICollectionView`显得非常有必要，相信各位大佬也都做过了。

这里笔者介绍一下自己封装的CollectionView  
\* 基于UIView（考虑到使用storyboard或xib快速构建时，添加UIView占位的情况）  
\* 使用`UICollectionViewFlowLayout` 满足最常见的开发需求  
\* 提供点击交互方法，提供`Block`及`Delegate`两种方式  
\* 提供**普通传参**及**链式传参**两种方式  
\* 支持常见轮播  
\* 支持拖拽重排

普通构建方式示例：

// 代码创建
        SPEasyCollectionView *easyView = [[SPEasyCollectionView alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, 200)];
        easyView.delegate = self;
        easyView.itemSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 200);
        easyView.scrollDirection = SPEasyScrollDirectionHorizontal;
        easyView.xibName = @"EasyCell";
        easyView.datas = @[@"1",@"2",@"3",@"4"];
        [self.view addSubview:easyView];

链式传参

// chain calls
        _storyboardTest.sp_cellClassName(^NSString *{
            return @"TestCell";
        }).sp_itemsize(^CGSize{
            return CGSizeMake(100, 100);
        }).sp_minLineSpace(^NSInteger{
            return 20;
        }).sp_minInterItemSpace(^NSInteger{
            return 10;
        }).sp_scollDirection(^SPEasyScrollDirection{
            return SPEasyScrollDirectionVertical;
        }).sp_inset(^UIEdgeInsets{
            return UIEdgeInsetsMake(20, 20, 20, 20);
        }).sp_backgroundColor(^UIColor *{
            return [UIColor colorWithRed:173/255.0 green:216/255.0 blue:230/255.0 alpha:1];
        });//LightBLue #ADD8E6 173,216,230

这里分享一下链式的处理，希望对感兴趣的同学有所启发。其实很简单，就是**Block传值**

**定义**

// chain calls
    typedef SPEasyCollectionView *(^SPEasyCollectionViewItemSize)(CGSize(^)(void));

**属性示例**

// chain calls
    @property (nonatomic, readonly) SPEasyCollectionViewItemSize sp_itemsize;

**属性处理示例**

- (SPEasyCollectionViewItemSize)sp_itemsize{
        return ^SPEasyCollectionView *(CGSize(^itemSize)()){
            self.itemSize = itemSize();
            return self;
        };
    }

## UICollectionView拖拽重排处理(iOS8.x-/iOS9.x+) ##

![Strike/Freedom/Destiny有没有胶友][Strike_Freedom_Destiny]

拖拽重排功能的实现，在iOS9之前，需要开发者自己去实现动画、边缘检测以及数据源更新，比较繁琐。iOS9之后，官方替我们处理了相对比较复杂的前几步，只需要开发者按照正确的原则在**重排完成时**更新数据源即可。

拖拽重排的触发，一般都是通过长按手势触发。无论是哪种系统环境下，都需要`LongpressGestureRecognizer`的协助，所以我们事先将它准备好

// 添加长按手势
    - (void)addLongPressGestureRecognizer{
    
        UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPressGesture:)];
        longPress.minimumPressDuration = self.activeEditingModeTimeInterval?_activeEditingModeTimeInterval:2.0f;
        [self addGestureRecognizer:longPress];
        self.longGestureRecognizer = longPress;
    
    }

说明一下手势处理的几种状态

<table> 
 <thead> 
  <tr> 
   <th>GestureRecognizerState</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>UIGestureRecognizerStateBegan</td> 
   <td>手势开始</td> 
  </tr> 
  <tr> 
   <td>UIGestureRecognizerStateChanged</td> 
   <td>手势变化</td> 
  </tr> 
  <tr> 
   <td>UIGestureRecognizerStateEnded</td> 
   <td>手势结束</td> 
  </tr> 
  <tr> 
   <td>UIGestureRecognizerStateCancelled</td> 
   <td>手势取消</td> 
  </tr> 
  <tr> 
   <td>UIGestureRecognizerStateFailed</td> 
   <td>手势失败</td> 
  </tr> 
  <tr> 
   <td>UIGestureRecognizerStatePossible</td> 
   <td>默认状态，暂未识别</td> 
  </tr> 
 </tbody> 
</table>

对手势的不同状态分别进行处理

- (void)handleEditingMode:(UILongPressGestureRecognizer *)recognizer{
    
        switch (recognizer.state) {
            case UIGestureRecognizerStateBegan: {
                [self handleEditingMoveWhenGestureBegan:recognizer];
                break;
            }
            case UIGestureRecognizerStateChanged: {
                [self handleEditingMoveWhenGestureChanged:recognizer];
                break;
            }
            case UIGestureRecognizerStateEnded: {
                [self handleEditingMoveWhenGestureEnded:recognizer];
                break;
            }
            default: {
                [self handleEditingMoveWhenGestureCanceledOrFailed:recognizer];
                break;
            }
        }
    
    }

***如果使用UICollectionViewController，使用系统提供的默认的手势***

> The [UICollectionViewController  
> ][UICollectionViewController] class provides a default gesture recognizer that you can use to rearrange items in its managed collection view. To install this gesture recognizer, set the [installsStandardGestureForInteractiveMovement  
> ][installsStandardGestureForInteractiveMovement] property of the collection view controller to YES

@property(nonatomic) BOOL installsStandardGestureForInteractiveMovement;

### iOS8.x-拖拽重排处理 ###

iOS8.x及以前的系统，对拖拽重排并没有官方的支持。

动手之前，我们先来理清实现思路

1.  ***长按Cell触发编辑模式***
2.  ***手势开始时***：对当前`active cell`进行截图并添加`snapView`在cell的位置 隐藏触发Cell，需要记录当前手势触发点距离`active cell`的中心点偏移量`center offset`
3.  ***手势移动时***：根据当前触摸点的位置及`center offset`更新`snapView`位置
4.  ***手势移动时***：判断`snapView`同`visibleCells`的初`active cell`外所有cell的中心点距离，当交叉位置超过cell面积的1/4时，利用系统提供的`- (void)moveItemAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath;`进行交换，该接口在调用时，有默认[动画][Link 1]，时间0.25s
5.  ***手势移动时***：需要添加**边缘检测功能**，如果当前`snapView`边缘靠近`CollectionView`的边缘一定距离时，需要开始滚动视图，与边缘交叉距离变化时，需要根据比例进行加速或减速。同时第4点中用的动画效果，也应该相应的改变速度
6.  ***手势结束时***：通过系统api交换Cell时有动画效果，而且**它仅仅只是个动画效果**，所以我们需要在手势结束时，对**数据源进行更新**，这就要求我们记录交互开始时`indexPath`信息并确定当前结束时的位置信息。同时，需要将`snapView`移除，将`activeCell`的显示并取消选中状态

为了帮助实现**边缘检测功能**,笔者绘制了下图，标注`UICollectionView`整体布局相关的几个重要参数，复习一下`UICollectionView`的**`ContentSize`/`frame.size/bounds.size`/`edgeInset`**之间的关系。因为我们需要借助这几个参数，确定**拖拽方向**及**contentOffset变化范围**  
![1240 1][]

我们按照上文中准备好的的手势处理方法，逐步介绍  
\* **handleEditingMoveWhenGestureBegan**

- (void)handleEditingMoveWhenGestureBegan:(UILongPressGestureRecognizer *)recognizer{
    
        CGPoint pressPoint = [recognizer locationInView:self.collectionView];
        NSIndexPath *selectIndexPath = [self.collectionView indexPathForItemAtPoint:pressPoint];
        SPBaseCell *cell = (SPBaseCell *)[_collectionView cellForItemAtIndexPath:selectIndexPath];
        self.activeIndexPath = selectIndexPath;
        self.sourceIndexPath = selectIndexPath;
        self.activeCell = cell;
        cell.selected = YES;
    
        self.centerOffset = CGPointMake(pressPoint.x - cell.center.x, pressPoint.y - cell.center.y);
    
        self.snapViewForActiveCell = [cell snapshotViewAfterScreenUpdates:YES];
        self.snapViewForActiveCell.frame = cell.frame;
        cell.hidden = YES;
        [self.collectionView addSubview:self.snapViewForActiveCell];
    
    }

*  **handleEditingMoveWhenGestureChanged**

- (void)handleEditingMoveWhenGestureChanged:(UILongPressGestureRecognizer *)recognizer{
    
        CGPoint pressPoint = [recognizer locationInView:self.collectionView];
    
        _snapViewForActiveCell.center = CGPointMake(pressPoint.x - _centerOffset.x, pressPoint.y-_centerOffset.y);
        [self handleExchangeOperation];// 交换操作
        [self detectEdge];// 边缘检测
    
    }

**handleExchangeOperation**:处理当前snapView与visibleCells的位置关系，如果交叉超过面积的1/4，则将隐藏的activeCell同当前cell进行交换，并更新当前活动位置

- (void)handleExchangeOperation{
    
        for (SPBaseCell *cell in self.collectionView.visibleCells)
        {
            NSIndexPath *currentIndexPath = [_collectionView indexPathForCell:cell];
            if ([_collectionView indexPathForCell:cell] == self.activeIndexPath) continue;
    
            CGFloat space_x = fabs(_snapViewForActiveCell.center.x - cell.center.x);
            CGFloat space_y = fabs(_snapViewForActiveCell.center.y - cell.center.y);
            // CGFloat space = sqrtf(powf(space_x, 2) + powf(space_y, 2));
            CGFloat size_x = cell.bounds.size.width;
            CGFloat size_y = cell.bounds.size.height;
    
            if (currentIndexPath.item > self.activeIndexPath.item)
            {
                [self.activeCells addObject:cell];
            }
    
            if (space_x <  size_x/2.0 && space_y < size_y/2.0)
            {
                [self handleCellExchangeWithSourceIndexPath:self.activeIndexPath destinationIndexPath:currentIndexPath];
                self.activeIndexPath = currentIndexPath;
            }
        }
    
    }

**handleCellExchangeWithSourceIndexPath: destinationIndexPath:**对cell进行交换处理，对跨列或者跨行的交换，需要考虑cell的交换方向，我们定义moveForward变量，作为向上(-1)/下(1)移动、向左(-1)/右(1)移动的标记，moveDirection == -1时，cell反向动画，越靠前的cell越早移动，反之moveDirection == 1时，越靠后的cell越早移动。代码中出现的`changeRatio`，是我们在**边缘检测**中得到的比例值，用来加速[动画][Link 1]

- (void)handleCellExchangeWithSourceIndexPath:(NSIndexPath *)sourceIndexPath destinationIndexPath:(NSIndexPath *)destinationIndexPath{
    
        NSInteger activeRange = destinationIndexPath.item - sourceIndexPath.item;
        BOOL moveForward = activeRange > 0;
        NSInteger originIndex = 0;
        NSInteger targetIndex = 0;
    
        for (NSInteger i = 1; i <= labs(activeRange); i ++) {
    
            NSInteger moveDirection = moveForward?1:-1;
            originIndex = sourceIndexPath.item + i*moveDirection;
            targetIndex = originIndex  - 1*moveDirection;
    
            if (!_isEqualOrGreaterThan9_0) {
                CGFloat time = 0.25 - 0.11*fabs(self.changeRatio);
                NSLog(@"time:%f",time);
                [UIView beginAnimations:nil context:nil];
                [UIView setAnimationDuration:time];
                [_collectionView moveItemAtIndexPath:[NSIndexPath indexPathForItem:originIndex inSection:sourceIndexPath.section] toIndexPath:[NSIndexPath indexPathForItem:targetIndex inSection:sourceIndexPath.section]];
                [UIView commitAnimations];
    
            }
    
    
        }
    
    }

**detectEdge**：边缘检测。定义枚举类型`SPDragDirection`记录拖拽方向，我们设置边缘检测的范围是，当snapView的边距距离最近的CollectionView显示范围边距距离小于10时，启动`CADisplayLink`，按屏幕刷新率调整CollectionView的***contentOffset***，当手势离开这个范围时，需要将变化系数`ChangeRatio`清零并销毁`CADisplayLink`，减少不必要的性能开支。同时需要更新当前snapView的位置，因为这次位置的变化并不是***LongPressGesture***引起的，所以当手指不移动时，并不会触发手势的`Changed`状态，我们需要在修改contentOffset的位置根据视图滚动的方向去判断修改`snapView.center`。**这里需要注意的一点细节，在下面的代码中，我们对`baseOffset`使用了向下取整的操作，因为浮点型数据精度的问题，很容易出现`1.000001^365`这种误差增大问题。笔者在实际操作时，出现了逐渐偏移现象，所以这里特别指出，希望各位同学以后处理类似问题时注意**

typedef NS_ENUM(NSInteger,SPDragDirection) {
        SPDragDirectionRight,
        SPDragDirectionLeft,
        SPDragDirectionUp,
        SPDragDirectionDown
    };

static CGFloat edgeRange = 10;
    static CGFloat velocityRatio = 5;
    - (void)detectEdge{
    
        CGFloat baseOffset = 2;
    
        CGPoint snapView_minPoint = self.snapViewForActiveCell.frame.origin;
        CGFloat snapView_max_x = CGRectGetMaxX(_snapViewForActiveCell.frame);
        CGFloat snapView_max_y = CGRectGetMaxY(_snapViewForActiveCell.frame);
    
        // left
        if (snapView_minPoint.x - self.collectionView.contentOffset.x < edgeRange &&
            self.collectionView.contentOffset.x > 0){
    
            CGFloat intersection_x = edgeRange - (snapView_minPoint.x - self.collectionView.contentOffset.x);
            intersection_x = intersection_x < 2*edgeRange?2*edgeRange:intersection_x;
            self.changeRatio = intersection_x/(2*edgeRange);
            baseOffset = baseOffset * -1 -  _changeRatio* baseOffset *velocityRatio;
            self.edgeIntersectionOffset = floorf(baseOffset);
            self.dragDirection = SPDragDirectionLeft;
            [self setupCADisplayLink];
            NSLog(@"Drag left - vertical offset:%f",self.edgeIntersectionOffset);
            NSLog(@"CollectionView offset_X:%f",self.collectionView.contentOffset.x);
    
        }
    
        // up
        else if (snapView_minPoint.y - self.collectionView.contentOffset.y < edgeRange &&
                 self.collectionView.contentOffset.y > 0){
    
            CGFloat intersection_y = edgeRange - (snapView_minPoint.y - self.collectionView.contentOffset.y);
            intersection_y = intersection_y > 2*edgeRange?2*edgeRange:intersection_y;
            self.changeRatio = intersection_y/(2*edgeRange);
            baseOffset = baseOffset * -1 -  _changeRatio* baseOffset *velocityRatio;
            self.edgeIntersectionOffset = floorf(baseOffset);
            self.dragDirection = SPDragDirectionUp;
            [self setupCADisplayLink];
            NSLog(@"Drag up - vertical offset:%f",self.edgeIntersectionOffset);
            NSLog(@"CollectionView offset_Y:%f",self.collectionView.contentOffset.y);
    
        }
    
        // right
        else if (snapView_max_x + edgeRange > self.collectionView.contentOffset.x + self.collectionView.bounds.size.width && self.collectionView.contentOffset.x + self.collectionView.bounds.size.width < self.collectionView.contentSize.width){
    
            CGFloat intersection_x = edgeRange - (self.collectionView.contentOffset.x + self.collectionView.bounds.size.width - snapView_max_x);
            intersection_x = intersection_x > 2*edgeRange ? 2*edgeRange:intersection_x;
            self.changeRatio = intersection_x/(2*edgeRange);
            baseOffset = baseOffset + _changeRatio * baseOffset * velocityRatio;
            self.edgeIntersectionOffset = floorf(baseOffset);
            self.dragDirection = SPDragDirectionRight;
            [self setupCADisplayLink];
            NSLog(@"Drag right - vertical offset:%f",self.edgeIntersectionOffset);
            NSLog(@"CollectionView offset_X:%f",self.collectionView.contentOffset.x);
    
        }
    
        // down
        else if (snapView_max_y + edgeRange > self.collectionView.contentOffset.y + self.collectionView.bounds.size.height && self.collectionView.contentOffset.y + self.collectionView.bounds.size.height < self.collectionView.contentSize.height){
    
            CGFloat intersection_y = edgeRange - (self.collectionView.contentOffset.y + self.collectionView.bounds.size.height - snapView_max_y);
            intersection_y = intersection_y > 2*edgeRange ? 2*edgeRange:intersection_y;
            self.changeRatio = intersection_y/(2*edgeRange);
            baseOffset = baseOffset +  _changeRatio* baseOffset * velocityRatio;
            self.edgeIntersectionOffset = floorf(baseOffset);
            self.dragDirection = SPDragDirectionDown;
            [self setupCADisplayLink];
            NSLog(@"Drag down - vertical offset:%f",self.edgeIntersectionOffset);
            NSLog(@"CollectionView offset_Y:%f",self.collectionView.contentOffset.y);
    
        }
    
        // default
        else{
    
            self.changeRatio = 0;
    
            if (self.displayLink)
            {
                [self invalidateCADisplayLink];
            }
        }
    
    }

`CADisplayLink`

- (void)setupCADisplayLink{
    
        if (self.displayLink) {
            return;
        }
        CADisplayLink *displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleEdgeIntersection)];
        [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
        self.displayLink = displayLink;
    
    }
    
    - (void)invalidateCADisplayLink{
    
        [self.displayLink setPaused:YES];
        [self.displayLink invalidate];
        self.displayLink = nil;
    
    }

更新`contentOffset`及`snapView.center`

- (void)handleEdgeIntersection{
    
        [self handleExchangeOperation];
    
        switch (_scrollDirection) {
            case SPEasyScrollDirectionHorizontal:
            {
                if (self.collectionView.contentOffset.x + self.inset.left < 0 &&
                    self.dragDirection == SPDragDirectionLeft){
                    return;
                }
                if (self.collectionView.contentOffset.x >
                    self.collectionView.contentSize.width - (self.collectionView.bounds.size.width - self.inset.left) &&
                    self.dragDirection == SPDragDirectionRight){
                        return;
                }
    
                [self.collectionView setContentOffset:CGPointMake(_collectionView.contentOffset.x + self.edgeIntersectionOffset, _collectionView.contentOffset.y) animated:NO];
                self.snapViewForActiveCell.center = CGPointMake(_snapViewForActiveCell.center.x + self.edgeIntersectionOffset, _snapViewForActiveCell.center.y);
            }
                break;
            case SPEasyScrollDirectionVertical:
            {
    
                if (self.collectionView.contentOffset.y + self.inset.top< 0 &&
                    self.dragDirection == SPDragDirectionUp) {
                    return;
                }
                if (self.collectionView.contentOffset.y >
                    self.collectionView.contentSize.height - (self.collectionView.bounds.size.height - self.inset.top) &&
                    self.dragDirection == SPDragDirectionDown) {
                    return;
                }
    
                [self.collectionView setContentOffset:CGPointMake(_collectionView.contentOffset.x, _collectionView.contentOffset.y +  self.edgeIntersectionOffset) animated:NO];
                self.snapViewForActiveCell.center = CGPointMake(_snapViewForActiveCell.center.x, _snapViewForActiveCell.center.y + self.edgeIntersectionOffset);
            }
                break;
        }
    
    }

*  \*\*handleEditingMoveWhenGestureEnded  
    手势结束时，我们应该使用动画，将snapView的Center调整到已经交换到位的`activeCell`位置上，动画结束时，移除截图并将`activeCell`显示出来，销毁计时器、重置参数  
    （呼~终于大功告成了~~ 还没有啊喂，同学，这里得敲黑板了哈~前面可是提到了要注意\*\*动画仅仅是动画，不更新数据源的）

- (void)handleEditingMoveWhenGestureEnded:(UILongPressGestureRecognizer *)recognizer{
    
            [self.snapViewForActiveCell removeFromSuperview];
            self.activeCell.selected = NO;
            self.activeCell.hidden = NO;
    
            [self handleDatasourceExchangeWithSourceIndexPath:self.sourceIndexPath destinationIndexPath:self.activeIndexPath];
            [self invalidateCADisplayLink];
            self.edgeIntersectionOffset = 0;
            self.changeRatio = 0;
    
    }

因为数据源并不需要实时更新，所以我们只需要最初位置以及最后的位置即可，交换方法复制了上面的exchangeCell方法，其实不用`moveForward`参数了，全都是因为***懒***……

- (void)handleDatasourceExchangeWithSourceIndexPath:(NSIndexPath *)sourceIndexPath destinationIndexPath:(NSIndexPath *)destinationIndexPath{
    
        NSMutableArray *tempArr = [self.datas mutableCopy];
    
        NSInteger activeRange = destinationIndexPath.item - sourceIndexPath.item;
        BOOL moveForward = activeRange > 0;
        NSInteger originIndex = 0;
        NSInteger targetIndex = 0;
    
        for (NSInteger i = 1; i <= labs(activeRange); i ++) {
    
            NSInteger moveDirection = moveForward?1:-1;
            originIndex = sourceIndexPath.item + i*moveDirection;
            targetIndex = originIndex  - 1*moveDirection;
    
            [tempArr exchangeObjectAtIndex:originIndex withObjectAtIndex:targetIndex];
    
        }
        self.datas = [tempArr copy];
        NSLog(@"##### %@ #####",self.datas);
    }

*  **handleEditingMoveWhenGestureCanceledOrFailed**  
    失败或者取消手势时，我们直接让snapView回去就好了嘛~必要步骤，销毁定时器，重置参数

- (void)handleEditingMoveWhenGestureCanceledOrFailed:(UILongPressGestureRecognizer *)recognizer{
    
         [UIView animateWithDuration:0.25f animations:^{
                self.snapViewForActiveCell.center = self.activeCell.center;
            } completion:^(BOOL finished) {
                [self.snapViewForActiveCell removeFromSuperview];
                self.activeCell.selected = NO;
                self.activeCell.hidden = NO;
            }];
    
            [self invalidateCADisplayLink];
            self.edgeIntersectionOffset = 0;
            self.changeRatio = 0;
    
    }

至此，我们实现了单Section拖拽重排的UICollectionView，看一下效果，是不是感觉还蛮好

![iOS8.x-\_demo.gif][iOS8.x-_demo.gif]

### iOS9.x+拖拽重排处理 ###

**Father Apple**在iOS9以后，为我们处理了上文中提到的**手势处理**、**边缘检测**等复杂计算，我们只需要在合适的位置，告诉系统位置信息即可。当然，这里苹果替我们做的动画，依然**仅仅是动画**。

![1240 2][]

**上报位置** 处理步骤如下：  
\* **handleEditingMoveWhenGestureBegan**:  
这里是上报的当前Cell的`IndexPath`，而且苹果并没有设置类似上文中我们设置的`centerOffset`，它是将当前触摸点，直接设置成**选中cell**的中心点。

[self.collectionView beginInteractiveMovementForItemAtIndexPath:selectIndexPath];

*  **handleEditingMoveWhenGestureChanged**:  
    这里上报的是当前触摸点的**位置**

[self.collectionView updateInteractiveMovementTargetPosition:pressPoint];

*  **handleEditingMoveWhenGestureEnded**:  
    简单粗暴，上报结束

[self.collectionView endInteractiveMovement];

*  **handleEditingMoveWhenGestureCanceledOrFailed**:  
    简单粗暴，上报取消，这里我们需要将选中状态清除

self.activeCell.selected = NO;
    [self.collectionView cancelInteractiveMovement];

*  **系统新的数据源方法**：  
    处理结束回调，根据交换信息，更新数据源供回调完成后系统自动调用`reloadData`方法使用

- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{
    
     BOOL canChange = self.datas.count > sourceIndexPath.item && self.datas.count > destinationIndexPath.item;
     if (canChange) { 
     [self handleDatasourceExchangeWithSourceIndexPath:sourceIndexPath destinationIndexPath:destinationIndexPath];
     }
    
    }
      ```
    上述手势处理，可以直接合并到上文中的各手势阶段的处理中，只需要对系统版本号做判断后分情况处理即可
    
    看一下系统的效果：
    
    ![iOS9.0+_demo.gif](http://upload-images.jianshu.io/upload_images/1742463-ff5b1610c46daa67.gif?imageMogr2/auto-orient/strip)
    
    
    ## UICollectionView实现简单轮播
    **图片轮播器**，几乎是现在所有App的必要组成部分了。实现轮播器的方式多种多样，这里笔者简单介绍一下，如何通过`UICollectionView`实现，对更好的理解`UICollectionView`及**轮播器**也许会有帮助（ 毕竟封装进去了嘛( ͡° ͜ʖ ͡° )
    
    ![cycle_pic.gif](http://upload-images.jianshu.io/upload_images/1742463-c85b0fdeb9160592.gif?imageMogr2/auto-orient/strip)
    
    思路分析：
    * 先确定是否需要轮播，决定开启定时器`Timer`，使用`scrollToItemAtIndexPath`执行定时滚动
    * 赋值数据源后，如果需要轮播，创建`UIPageControl`，并设置collection的cell数为`_totalItemCount = _needAutoScroll?datas.count * 500:datas.count;`
    * 考虑一下几种特殊情况的处理
      * 当滚动到总数最后一张时，应该返回第0张，此时动画效果设置为**NO**
      * 当我们手动滑动拖拽CollectionView时，需要停止定时器，停止拖拽时，再次开启定时器
      * 通过`contentOffset`及`itemSize`判断当前位置，并结合数据源`data.count`计算取值位置为`cell`及`pageControl`当前位置赋值
    
    几处关键代码：
    
    * 滚动及位置处理

# pragma mark - cycle scroll actions #

*  (void)autoScroll\{
    
    if (!\_totalItemCount) return;  
    NSInteger currentIndex = \[self currentIndex\];  
    NSInteger nextIndex = \[self nextIndexWithCurrentIndex:currentIndex\];  
    \[self scroll2Index:nextIndex\];

*  (void)scroll2Index:(NSInteger)index\{
    
    \[\_collectionView scrollToItemAtIndexPath:\[NSIndexPath indexPathForItem:index inSection:0\] atScrollPosition:UICollectionViewScrollPositionNone animated:index?YES:NO\];

*  (NSInteger)nextIndexWithCurrentIndex:(NSInteger)index\{
    
    if (index == \_totalItemCount - 1) \{  
    return 0;  
    \}else\{  
    return index + 1;  
    \}

*  (NSInteger)currentIndex\{
    
    if (\_collectionView.frame.size.width == 0 || \_collectionView.frame.size.height == 0) \{  
    return 0;  
    \}
    
    int index = 0;  
    if (\_layout.scrollDirection == UICollectionViewScrollDirectionHorizontal) \{  
    index = (\_collectionView.contentOffset.x + \_layout.itemSize.width \* 0.5) / \_layout.itemSize.width;  
    \} else \{  
    index = (\_collectionView.contentOffset.y + \_layout.itemSize.height \* 0.5) / \_layout.itemSize.height;  
    \}
    
    return MAX(0, index);  
    \}

* **数据源处理**
    
    * 数据

*  (void)setDatas:(NSArray \*)datas\{  
    \_datas = datas;
    
    \_totalItemCount = \_needAutoScroll?datas.count \* 500:datas.count;  
    if (\_needAutoScroll) \{  
    \[self setupPageControl\];  
    \}  
    \[self.collectionView reloadData\];  
    \}

* 数据源

*  (NSInteger)numberOfSectionsInCollectionView:(UICollectionView \*)collectionView\{  
    return 1;  
    \}
 *  (NSInteger)collectionView:(UICollectionView \*)collectionView numberOfItemsInSection:(NSInteger)section\{  
    return \_totalItemCount;  
    \}
 *  (UICollectionViewCell *)collectionView:(UICollectionView* )collectionView cellForItemAtIndexPath:(NSIndexPath \*)indexPath\{
    
    SPBaseCell \*cell = \[collectionView dequeueReusableCellWithReuseIdentifier:ReuseIdentifier forIndexPath:indexPath\];  
    cell.data = self.datas\[\_needAutoScroll?\[self getRealShownIndex:indexPath.item\]:indexPath.item\];
    
    return cell;

*  (NSInteger)getRealShownIndex:(NSInteger)index\{
    
    return index%\_datas.count;

**代理方法，处理交互中NSTimer创建/销毁及PageControl.currentPage数据更新**

*  (void)scrollViewDidScroll:(UIScrollView \*)scrollView\{
    
    if (!self.datas.count) return;  
    \_pageControl.currentPage = \[self getRealShownIndex:\[self currentIndex\]\];

*  (void)scrollViewWillBeginDragging:(UIScrollView \*)scrollView\{  
    if (\_needAutoScroll) \[self invalidateTimer\];  
    \}

\-(void)scrollViewDidEndDragging:(UIScrollView \*)scrollView willDecelerate:(BOOL)decelerate\{  
if (\_needAutoScroll) \[self setupTimer\];  
\}

*  (void)willMoveToSuperview:(UIView \*)newSuperview\{  
    if (!newSuperview) \{  
    \[self invalidateTimer\];  
    \}  
    \}  
    “\`

## 项目结构 ##

![Ny4GBW43Tij5QvL0izF.png][]

## 总结 ##

`UICollectionView`作为最最最重要的视图组件之一，我们不仅需要熟练掌握，同时它`dataSource/delegate+layout`，分离布局的编程思想，也很值得我们去思考学习。

笔者博客地址：[iOS-UICollectionView快速构造/拖拽重排/轮播实现介绍][iOS-UICollectionView]  
[\[\]~(￣▽￣)~\*][Link 2]iOS-UICollectionView快速构造/拖拽重排/轮播实现

> 代码地址如下：  
> [http://www.demodashi.com/demo/11366.html][http_www.demodashi.com_demo_11366.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_11366.html]: http://www.demodashi.com/demo/11366.html
[1240]: /images/20220530/9c8f465915cc41f7bce6f5e218b15b4f.png
[UICollectionViewTransitionLayout]: /images/20220530/0e8b7cac7ae94a6d98a05e35d7ec56f3.png
[Strike_Freedom_Destiny]: /images/20220530/6e4a4a9bb5c742409b73c0d922f3b2bc.png
[UICollectionViewController]: https://developer.apple.com/documentation/uikit/uicollectionviewcontroller?language=objc
[installsStandardGestureForInteractiveMovement]: https://developer.apple.com/documentation/uikit/uicollectionviewcontroller/1623979-installsstandardgestureforintera?language=objc
[Link 1]: http://www.jianshu.com/p/1a02bbcb1e24
[1240 1]: /images/20220530/d979e04b500a49d49b09c97f77c270a3.png
[iOS8.x-_demo.gif]: /images/20220530/e904b9325dec454daee7f1cede9137ed.png
[1240 2]: /images/20220530/a7201ce020d84f47a33c0151ffa0aaea.png
[Ny4GBW43Tij5QvL0izF.png]: /images/20220530/d8235d34eed24c229034f16d0cbf9314.png
[iOS-UICollectionView]: http://tr2e.com.cn/2017/06/30/iOS-UICollectionView%E5%BF%AB%E9%80%9F%E6%9E%84%E9%80%A0-%E6%8B%96%E6%8B%BD%E9%87%8D%E6%8E%92-%E8%BD%AE%E6%92%AD%E5%AE%9E%E7%8E%B0%E4%BB%8B%E7%BB%8D/
[Link 2]: http://music.163.com/#/m/song?id=186683