iOS开发UICollectionView实现拖拽效果

iOS开发UICollectionView实现拖拽效果,第1张

概述iOS开发UICollectionView实现拖拽效果 一.介绍 iOS9提供API实现单元格排序功能,使用UICollectionView及其代理方法.iOS9之后有自带方法可以实现该效果,只需添加长按手势,实现手势方法和调用iOS9的API交换数据,iOS9之前需要自己写方法实现这效果,除了要添加长按手势,这里还需要利用截图替换原理,手动计算移动位置来处理视图交换和数据交换. 二.方法和步骤 1.创建工程项目和视图控制器,如下图 2.声明对象和设置代理和数据源代理 @interface ViewController ()<UICollect ...

一.介绍

iOS9提供API实现单元格排序功能,使用UICollectionVIEw及其代理方法。iOS9之后有自带方法可以实现该效果,只需添加长按手势,实现手势方法和调用iOS9的API交换数据,iOS9之前需要自己写方法实现这效果,除了要添加长按手势,这里还需要利用截图替换原理,手动计算移动位置来处理视图交换和数据交换。

二.方法和步骤

1.创建工程项目和视图控制器,如下图

2.声明对象和设置代理和数据源代理

@interface VIEwController ()<UICollectionVIEwDelegate,UICollectionVIEwDataSource,UICollectionVIEwDelegateFlowLayout>@property (nonatomic,strong) NSMutableArray *dataArr;@property (nonatomic,strong) UICollectionVIEw *collectionVIEw;/**之前选中cell的NSIndexPath*/@property (nonatomic,strong) NSIndexPath *oldindexPath;/**单元格的截图*/@property (nonatomic,strong) UIVIEw *snapshotVIEw;/**之前选中cell的NSIndexPath*/@property (nonatomic,strong) NSIndexPath *moveIndexPath;@end

3.初始化UICollectionVIEw,并添加长按手势,在vIEwDIDLoad中初始化

CGfloat SCREEN_WIDTH = self.vIEw.frame.size.wIDth;  UICollectionVIEwFlowLayout *flowLayout = [[UICollectionVIEwFlowLayout alloc] init];  flowLayout.itemSize = CGSizeMake((SCREEN_WIDTH-40.0)/3,(SCREEN_WIDTH-40.0)/3);  UICollectionVIEw *collectionVIEw = [[UICollectionVIEw alloc] initWithFrame:CGRectMake(0,50.0,SCREEN_WIDTH,(SCREEN_WIDTH-40.0)/3+20.0) collectionVIEwLayout:flowLayout];  collectionVIEw.dataSource = self;  collectionVIEw.delegate = self;  collectionVIEw.backgroundcolor = [UIcolor whitecolor];  [collectionVIEw registerClass:[UICollectionVIEwCell class] forCellWithReuseIDentifIEr:@"uicollectionvIEwcell"];  [self.vIEw addSubvIEw:self.collectionVIEw = collectionVIEw];  // 添加长按手势  UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handlelongGesture:)];  [collectionVIEw addGestureRecognizer:longPress];

4.实例化数据源,(50个随机颜色,透明度0.8),在vIEwDIDLoad中初始化

self.dataArr = [[NSMutableArray alloc] init];for (NSInteger index = 0; index < 50; index ++) {    CGfloat hue = (arc4random()%256/256.0); //0.0 到 1.0    CGfloat saturation = (arc4random()%128/256.0)+0.5; //0.5 到 1.0    CGfloat brightness = (arc4random()%128/256.0)+0.5; //0.5 到 1.0    UIcolor *color = [UIcolor colorWithHue:hue saturation:saturation brightness:brightness @R_502_5997@:0.5];    [self.dataArr addobject:color];  }

5.实现UICollectionVIEw的UICollectionVIEwDataSource的两个必须实现的方法

#pragma mark - UICollectionVIEwDataSource- (NSInteger)collectionVIEw:(UICollectionVIEw *)collectionVIEw numberOfItemsInSection:(NSInteger)section{  return self.dataArr.count;}- (UICollectionVIEwCell *)collectionVIEw:(UICollectionVIEw *)collectionVIEw cellForItemAtIndexPath:(NSIndexPath *)indexPath{  UICollectionVIEwCell *cell = [collectionVIEw dequeueReusableCellWithReuseIDentifIEr:@"uicollectionvIEwcell" forIndexPath:indexPath];  cell.backgroundcolor = self.dataArr[indexPath.row];  return cell;}

6.重点来了,实现长按手势方法

#pragma mark - 长按手势- (voID)handlelongGesture:(UILongPressGestureRecognizer *)longPress{  if ([[[UIDevice currentDevice] systemVersion] floatValue] < 9.0) {    [self action:longPress];  } else {    [self iOS9_Action:longPress];  }}

7.iOS9之后的实现

#pragma mark - iOS9 之后的方法- (BOol)collectionVIEw:(UICollectionVIEw *)collectionVIEw canMoveItemAtIndexPath:(NSIndexPath *)indexPath{  // 返回YES允许row移动  return YES;}- (voID)collectionVIEw:(UICollectionVIEw *)collectionVIEw moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{  //取出移动row数据  ID color = self.dataArr[sourceIndexPath.row];  //从数据源中移除该数据  [self.dataArr removeObject:color];  //将数据插入到数据源中的目标位置  [self.dataArr insertObject:color atIndex:destinationIndexPath.row];}- (voID)iOS9_Action:(UILongPressGestureRecognizer *)longPress{  switch (longPress.state) {    case UIGestureRecognizerStateBegan:    { //手势开始      //判断手势落点位置是否在row上      NSIndexPath *indexPath = [self.collectionVIEw indexPathForItemAtPoint:[longPress locationInVIEw:self.collectionVIEw]];      if (indexPath == nil) {        break;      }      UICollectionVIEwCell *cell = [self.collectionVIEw cellForItemAtIndexPath:indexPath];      [self.vIEw bringSubvIEwToFront:cell];      //iOS9方法 移动cell      [self.collectionVIEw beginInteractiveMovementForItemAtIndexPath:indexPath];    }      break;    case UIGestureRecognizerStateChanged:    { // 手势改变      // iOS9方法 移动过程中随时更新cell位置      [self.collectionVIEw updateInteractiveMovementTargetposition:[longPress locationInVIEw:self.collectionVIEw]];    }      break;    case UIGestureRecognizerStateEnded:    { // 手势结束      // iOS9方法 移动结束后关闭cell移动      [self.collectionVIEw endInteractiveMovement];    }      break;    default: //手势其他状态      [self.collectionVIEw cancelinteractiveMovement];      break;  }}

8.iOS9之前的实现

#pragma mark - iOS9 之前的方法- (voID)action:(UILongPressGestureRecognizer *)longPress{  switch (longPress.state) {    case UIGestureRecognizerStateBegan:    { // 手势开始      //判断手势落点位置是否在row上      NSIndexPath *indexPath = [self.collectionVIEw indexPathForItemAtPoint:[longPress locationInVIEw:self.collectionVIEw]];      self.oldindexPath = indexPath;      if (indexPath == nil) {        break;      }      UICollectionVIEwCell *cell = [self.collectionVIEw cellForItemAtIndexPath:indexPath];      // 使用系统的截图功能,得到cell的截图视图      UIVIEw *snapshotVIEw = [cell snapshotVIEwAfterScreenUpdates:NO];      snapshotVIEw.frame = cell.frame;      [self.vIEw addSubvIEw:self.snapshotVIEw = snapshotVIEw];      // 截图后隐藏当前cell      cell.hIDden = YES;      CGPoint currentPoint = [longPress locationInVIEw:self.collectionVIEw];      [UIVIEw animateWithDuration:0.25 animations:^{        snapshotVIEw.transform = CGAffinetransformMakeScale(1.05,1.05);        snapshotVIEw.center = currentPoint;      }];    }      break;    case UIGestureRecognizerStateChanged:    { // 手势改变      //当前手指位置 截图视图位置随着手指移动而移动      CGPoint currentPoint = [longPress locationInVIEw:self.collectionVIEw];      self.snapshotVIEw.center = currentPoint;      // 计算截图视图和哪个可见cell相交      for (UICollectionVIEwCell *cell in self.collectionVIEw.visibleCells) {        // 当前隐藏的cell就不需要交换了,直接continue        if ([self.collectionVIEw indexPathForCell:cell] == self.oldindexPath) {          continue;        }        // 计算中心距        CGfloat space = sqrtf(pow(self.snapshotVIEw.center.x - cell.center.x,2) + powf(self.snapshotVIEw.center.y - cell.center.y,2));        // 如果相交一半就移动        if (space <= self.snapshotVIEw.bounds.size.wIDth / 2) {          self.moveIndexPath = [self.collectionVIEw indexPathForCell:cell];          //移动 会调用willMovetoIndexPath方法更新数据源          [self.collectionVIEw moveItemAtIndexPath:self.oldindexPath toIndexPath:self.moveIndexPath];          //设置移动后的起始indexPath          self.oldindexPath = self.moveIndexPath;          break;        }      }    }      break;    default:    { // 手势结束和其他状态      UICollectionVIEwCell *cell = [self.collectionVIEw cellForItemAtIndexPath:self.oldindexPath];      // 结束动画过程中停止交互,防止出问题      self.collectionVIEw.userInteractionEnabled = NO;      // 给截图视图一个动画移动到隐藏cell的新位置      [UIVIEw animateWithDuration:0.25 animations:^{        self.snapshotVIEw.center = cell.center;        self.snapshotVIEw.transform = CGAffinetransformMakeScale(1.0,1.0);      } completion:^(BOol finished) {        // 移除截图视图,显示隐藏的cell并开始交互        [self.snapshotVIEw removeFromSupervIEw];        cell.hIDden = NO;        self.collectionVIEw.userInteractionEnabled = YES;      }];    }      break;  }}

三.iOS9之后添加的API如下

// Support for reordering- (BOol)beginInteractiveMovementForItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0); // returns NO if reordering was prevented from beginning - otherwise YES- (voID)updateInteractiveMovementTargetposition:(CGPoint)targetposition NS_AVAILABLE_IOS(9_0);- (voID)endInteractiveMovement NS_AVAILABLE_IOS(9_0);- (voID)cancelinteractiveMovement NS_AVAILABLE_IOS(9_0);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

总结

以上是内存溢出为你收集整理的iOS开发UICollectionView实现拖拽效果全部内容,希望文章能够帮你解决iOS开发UICollectionView实现拖拽效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1109973.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存