美文网首页iOS开发技术讨论iOSios开发学习系列
iOS UICollectionView高级用法(长按自由移动c

iOS UICollectionView高级用法(长按自由移动c

作者: 夏天然后 | 来源:发表于2016-05-26 15:41 被阅读6170次

    iOS 9之后: 示例如下

    效果
    前言: 看完你可以学到哪些呢? 就是文章标题那么多, 只有那么多. . 手残效果图没弄好.
    @property (nonatomic, strong) UICollectionView *xtCollectionView;
    @property (nonatomic, strong) UICollectionViewFlowLayout *flowLayout;
    @property (nonatomic, strong) CALayer *dotLayer;
    @property (nonatomic, assign) CGFloat endPoint_x;
    @property (nonatomic, assign) CGFloat endPoint_y;
    @property (nonatomic, strong) UIBezierPath *path;
    @property (nonatomic, strong) NSMutableArray *array;
    @property (nonatomic, strong) UILongPressGestureRecognizer *longPress;
    

    初始化一个数组

    self.array = [NSMutableArray arrayWithObjects:@"红包", @"转账", @"手机充值", @"芝麻信用",
                      @"天猫", @"生活缴费", @"蚂蚁呗", @"世界那么大",
                      @"余额宝", @"安全快付", @"蚂蚁聚宝", @"哈哈",@"红包1", @"转账1", @"手机充值1", @"芝麻信用1",
                      @"天猫1", @"生活缴费1", @"蚂蚁呗1", @"世界那么大1",
                      @"余额宝1", @"安全快付1", @"蚂蚁聚宝1", @"哈哈1",  nil];
    

    创建CollectionView

    - (UICollectionView *)xtCollectionView
    {
        if (!_xtCollectionView) {
            _flowLayout = [[UICollectionViewFlowLayout alloc] init];
            _flowLayout.minimumLineSpacing = 1;
            _flowLayout.minimumInteritemSpacing = 1;
            _xtCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 20, Screen_Width, Screen_Height - 20) collectionViewLayout:_flowLayout];
            _xtCollectionView.dataSource = self;
            _xtCollectionView.backgroundColor = [UIColor colorWithRed:0.8568 green:0.8568 blue:0.8568 alpha:1.0];
            _xtCollectionView.delegate = self;
            [_xtCollectionView registerClass:[XTCollectCell class] forCellWithReuseIdentifier:@"cellIdentiifer"];
        }
        return _xtCollectionView;
    }
    

    添加一个长按的手势

    _longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(lonePressMoving:)];
    [self.xtCollectionView addGestureRecognizer:_longPress];
    

    手势方法的实现

    - (void)lonePressMoving:(UILongPressGestureRecognizer *)longPress
    {
        
        switch (_longPress.state) {
            case UIGestureRecognizerStateBegan: {
                {
                    NSIndexPath *selectIndexPath = [self.xtCollectionView indexPathForItemAtPoint:[_longPress locationInView:self.xtCollectionView]];
                    // 找到当前的cell
                    XTCollectCell *cell = (XTCollectCell *)[self.xtCollectionView cellForItemAtIndexPath:selectIndexPath];
                    // 定义cell的时候btn是隐藏的, 在这里设置为NO
                    [cell.btnDelete setHidden:NO];
                    [_xtCollectionView beginInteractiveMovementForItemAtIndexPath:selectIndexPath];
                }
                break;
            }
            case UIGestureRecognizerStateChanged: {
                    [self.xtCollectionView updateInteractiveMovementTargetPosition:[longPress locationInView:_longPress.view]];
                break;
            }
            case UIGestureRecognizerStateEnded: {
                    [self.xtCollectionView endInteractiveMovement];
                break;
            }
            default: [self.xtCollectionView cancelInteractiveMovement];
                break;
        }
    }
    

    移动方法

    - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(nonnull NSIndexPath *)sourceIndexPath toIndexPath:(nonnull NSIndexPath *)destinationIndexPath
    {
        NSIndexPath *selectIndexPath = [self.xtCollectionView indexPathForItemAtPoint:[_longPress locationInView:self.xtCollectionView]];
        // 找到当前的cell
        XTCollectCell *cell = (XTCollectCell *)[self.xtCollectionView cellForItemAtIndexPath:selectIndexPath];
        [cell.btnDelete setHidden:YES];
        [self.array exchangeObjectAtIndex:sourceIndexPath.item withObjectAtIndex:destinationIndexPath.item];
        [self.xtCollectionView reloadData];
    }
    

    效果图的解释: collectionView的可编辑状态是"假的", 只是对数据进行了处理
    你可能想知道动画的实现可以看我的另一篇博客iOS仿美团外卖饿了吗App点餐动画

    iOS9之前可以参照这个

    效果

    Github上很早的项目了, 希望对有需要的同学有启发的作用, 点我下载感谢作者

    补充说明: LXReorderableCollectionViewFlowLayout 这个继承于UICollectionViewFlowLayout So 对于cell的调整是比较随意像系统的一样.
    比如调整cell的间距你可以这样.

    调整---cell间距
    LXReorderableCollectionViewFlowLayout *flowLayout = [[LXReorderableCollectionViewFlowLayout alloc] init];
        flowLayout.minimumLineSpacing = ...;
        flowLayout.minimumInteritemSpacing = ...;
        _collection = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, s_w, s_h) collectionViewLayout:flowLayout];
    

    搭配下面这个方法

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        return CGSizeMake(..., ...);
    }
    

    您可能想了解我的更多文章, 与我共同成长, 请关注我
    带你系统学习GCD[一]
    带你系统学习GCD[二]
    Swift版本仿网易云音乐播放音乐动画效果
    三分钟教你把代码托管到Github
    Swift 很强大的图表库-Charts使用
    Swift版仿简书App淘宝App很友好弹出view效果


    更多效果点我

    ---------------------------------------
    走心文章, 值得点赞 ---文/夏天然后
    微博@夏天是个大人了 QQQ: 498143780
    ---------------------------------------

    相关文章

      网友评论

      • 凌然九霄:感谢大大分享
        夏天然后:@凌然九霄 谢谢你的支持才对:smirk:
      • Eric_1024:有没有发现,你把第一个移动其他地方,然而不是第二个跑到第一个位置
        Eric_1024:@夏天然后 你这是互换位置,不是移动
        Eric_1024:@夏天然后 啊!!! 我看着是的啊
        夏天然后:@Raija 没有啊:sweat:
      • 微光星芒:你好,我看到了你添加iOS9之前的实现方式,使用的 是LXReorderableCollectionViewFlowLayout这个第三方,我也用了这个第三方,但是怎么调整cell之间的间距呢? 有没有什么方法可以调节任意间距
        夏天然后:@微光星芒 如果还是不会写 进群:498143780 私聊我
        夏天然后:@微光星芒 LXReorderableCollectionViewFlowLayout *flowLayout = [[LXReorderableCollectionViewFlowLayout alloc] init];
        flowLayout.minimumLineSpacing = ...;
        flowLayout.minimumInteritemSpacing = ...;
        搭配这个
        - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
        {
        return CGSizeMake(..., ...);
        }
      • 瞳若点星: :smile: 又学到了,谢谢分享哇。
        夏天然后:@瞳若点星 谢谢支持:smirk:
      • 从此你不再颠沛流离:效果图,写在代码里了没出来
        夏天然后:@从此你不再颠沛流离 :grin:
      • 会跳舞的狮子:比如有一组, 我想让第12个item 是可以滚动的长形的item 不想让它移动 其它的都可以移动 而且移动不能影响 第12个item的位置 你可以做得出来吗
      • BB区块链开发:66
        夏天然后:@aFvbJY2QYo 谢谢支持:sunglasses::sunglasses::sunglasses:
      • Lol刀妹:不错
        夏天然后:@无夜之星辰 谢谢支持:smile:
      • 小凡凡520:貌似系统过高
        夏天然后:@小凡凡520 嗯嗯
      • 1672ada2c48e:方法是ios9.0之后的,之前的怎么搞啊
        1672ada2c48e:@夏天然后 恩,好哒
        夏天然后:@被时光掩盖的秘密 更新了iOS9之前的, 你可以看看, 别人写的. 看能不能有一些启发
        夏天然后:@被时光掩盖的秘密 确实是iOS9之后的、之前应该是没有这样的API、自己实现还没研究过、:sweat::sweat::sweat:不好意思啦
      • sunnyyjk:mark
        夏天然后:@sunnyyjk :smile: :smiley: :smiley:

      本文标题:iOS UICollectionView高级用法(长按自由移动c

      本文链接:https://www.haomeiwen.com/subject/uckxdttx.html