资讯专栏INFORMATION COLUMN

「 iOS 」可拖拽Cell

nihao / 785人阅读

摘要:现在很多项目都会用到类似拖动的效果,比如今日头条和网易新闻之类的资讯类产品,都有用该技术设置模块顺序的操作。在之后,苹果提供相关的方法,非常方便。

现在很多项目都会用到类似拖动的效果,比如今日头条和网易新闻之类的资讯类产品,都有用该技术设置模块顺序的操作。

在iOS9.0之后,苹果提供相关的方法,非常方便。

设定三个私有属性
@property(nonatomic,strong) NSMutableArray *arr;

@property(nonatomic,weak) UICollectionView *colView;

@property(nonatomic,strong) UILongPressGestureRecognizer *longPress;
//数据源
- (NSMutableArray *)arr{
    
    if (!_arr) {
        _arr = [NSMutableArray arrayWithObjects:@(1),@(2),@(3),@(4),@(5),@(6),@(7),@(8),@(9), nil];
    }
    return _arr;
}

先创建UICollectionView

//创建布局对象
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
//view
    UICollectionView *colView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
//背景色
    colView.backgroundColor = [UIColor whiteColor];
    colView.delegate = self;
    colView.dataSource = self;
//控制布局
    colView.contentInset = UIEdgeInsetsMake(30, 20, 0, 20);
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    CGFloat space = 20;
    NSInteger col = 3;
    CGFloat itemSize = (screenW - (( col + 1 ) * space) - 6) / 3;
    
    flowLayout.itemSize = CGSizeMake(itemSize, itemSize);
    flowLayout.minimumInteritemSpacing = space;
    flowLayout.minimumLineSpacing = space;
    //添加长按手势
    _longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressMoving:)];
    [colView addGestureRecognizer:_longPress];
    //属性连接
    self.colView = colView;
   //注册cell,记得先创建一个自定义cell
    [colView registerNib:[UINib nibWithNibName:@"MyCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"cell"];
    [self.view addSubview:colView];

--------------------------------------数据源方法---------------------------------------------

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.arr.count;
}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    
    cell.num.text = [NSString stringWithFormat:@"%@",self.arr[indexPath.row]];
    
    return cell;
    
}

2.长按手势响应事件

- (void)longPressMoving:(UILongPressGestureRecognizer *)longPress{
//    筛选长按手势状态
    switch (_longPress.state) {
//            开始
        case UIGestureRecognizerStateBegan: {
            {
//手势作用的位置
                NSIndexPath *selectIndexPath = [self.colView indexPathForItemAtPoint:[_longPress locationInView:self.colView]];
                // 找到当前的cell
                MyCollectionViewCell *cell = (MyCollectionViewCell *)[self.colView cellForItemAtIndexPath:selectIndexPath];
//                拽起变大动画效果
                [UIView animateWithDuration:0.3 animations:^{
                    [cell setTransform:CGAffineTransformMakeScale(1.2, 1.2)];
                }];
               //开始移动
                [_colView beginInteractiveMovementForItemAtIndexPath:selectIndexPath];
            }
            break;
        }
        case UIGestureRecognizerStateChanged: {
//更新移动的位置
            [self.colView updateInteractiveMovementTargetPosition:[longPress locationInView:_longPress.view]];
            break;
        }
        case UIGestureRecognizerStateEnded: {
//结束移动
            [self.colView endInteractiveMovement];
            break;
        }
        default: [self.colView cancelInteractiveMovement];
            break;
    }
}

3.实现苹果官方的代理方法

- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}

- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{
    
    NSLog(@"%zd---%zd",sourceIndexPath.row,destinationIndexPath.row);
    NSIndexPath *selectIndexPath = [self.colView indexPathForItemAtPoint:[_longPress locationInView:self.colView]];
   //交换数据源的内容
    [self.arr exchangeObjectAtIndex:sourceIndexPath.item withObjectAtIndex:destinationIndexPath.item];
//    [self.colView reloadData];
    
    NSLog(@"%@",self.arr);
}

实现完以上的方法,可以快速构建一个可拖拽排序的cell界面。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/17246.html

相关文章

  • iView 发布后台管理系统 iview-admin,没错,它就是你想要的

    摘要:简介是基于,搭配使用组件库形成的一套后台集成解决方案,由前端可视化团队部分成员开发维护。遵守设计和开发约定,风格统一,设计考究,并且更多功能在不停开发中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 简介 iView Admin 是基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解...

    HackerShell 评论0 收藏0
  • Android6.0 源码修改之 仿IOS添加全屏拖拽浮窗返回按钮

    摘要:所以灵机一动我们就给系统添加一个全屏可拖拽的浮窗按钮,点击的时候处理返回键的逻辑。需要注意的是因为我们是在源码里添加,而且是的版本,所以为。为了保存的最终位置,添加了一个动画完成监听,并将和写入到中保存。前言 之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP)/动态显示和隐藏NavigationBar 在某些特殊定制的...

    Sunxb 评论0 收藏0
  • element-ui dialog组件添加拖拽位置 拖拽宽高

    摘要:最近公司新加需求实现弹窗可拖拽还要拖拽宽高变化国际惯例先上图浏览器下作的有几个点需要注意一下每个弹窗都要有唯一可操作指令可以做到拖拽时要添加可拖拽区块由于组件在设计时宽度用了百分比这里不同浏览器有兼容性问题实现拖拽宽高时获取边缘问题定位设 最近公司新加需求, 实现弹窗可拖拽, 还要拖拽宽高变化. 国际惯例先上图: edge浏览器下作的gif http://www.lano...

    jzman 评论0 收藏0
  • 使用 Drag and Drop 给Web应用提升交互体验

    摘要:注意点在鼠标操作拖放期间,有一些事件可能触发多次,比如和。可拖拽元素,建议使用,设定可拖拽元素的鼠标游标,提升交互。在中使用拖拽中使用可以直接绑定到组件上。 什么是 Drag and Drop (拖放)? 简单来说,HTML5 提供了 Drag and Drop API,允许用户用鼠标选中一个可拖动元素,移动鼠标拖放到一个可放置到元素的过程。 我相信每个人都或多或少接触过拖放,比如浏览...

    legendmohe 评论0 收藏0
  • 实现element-ui对话框拖拽功能

    摘要:对话框可拖拽及边界处理应业务需求,需要实现对话框可拖拽问题,应没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案。在实现的功能的情况下,封装成了文件,然后再中引入后可全局使用。 element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案。很多大神给出的代码...

    qc1iu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<