iOS collectionView拖拽排序

最新推荐文章于 2025-04-18 11:12:52 发布

劉光軍_Shine

最新推荐文章于 2025-04-18 11:12:52 发布

阅读量696

点赞数

分类专栏： iOS日常技术

本文链接：https://blog.youkuaiyun.com/qq_26968911/article/details/103954366

版权

该博客介绍了如何在iOS应用中实现UICollectionView的拖拽排序功能。在iOS9及以上版本，利用系统提供的方法可以方便地实现拖拽排序，同时通过本地存储记录排序后的布局。在iOS9以下版本，由于系统支持的限制，需要通过截图和手动计算来模拟拖拽效果。文中详细阐述了各个步骤，包括长按手势的添加、手势响应、cell的移动以及不同版本下的实现策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中首页按钮按照需求需要实现拖拽排序并且记录排序后的布局，下次再进入APP后展示排序后的布局。

功能分析

实现此功能需要实现两个点，第一就是拖拽排序的实现，第二就是存储排序后的布局，针对第一个功能点，拖拽排序：这个可以使用collectionView系统自带的功能来实现，针对第二个功能点，我使用NSUserDefaults本地存储盛放collectionViewCell内容的数组。
整体效果如图：

屏幕快照 2019-01-29 上午11.10.24.png

本地存储的实现

每个cell由背景图片和title组成，NSDictionary *dic1 = @{@"title":@"标题", @"img":@"bgImg"};每个字典存放两个字段，根据需求，创建相应的字典，NSArray *tempArr = @[dic1,dic2,dic3,dic4,dic5]``[self.homeBtnsArr addObjectsFromArray:tempArr];将字典放在数组中，便于在collectionView的代理方法中使用，[[NSUserDefaults standardUserDefaults] setObject:self.homeBtnsArr forKey:@"stuHomeBtns"];将数组做本地储存，在每次进入界面时，先去NSUserDefaults中查找存放的数组，再去使用。

拖拽移动功能的实现

1、创建collectionView

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.itemSize = CGSizeMake((SCREEN_WIDTH-50.0)/4, 85);
    flowLayout.minimumLineSpacing = 0.1;
    flowLayout.minimumInteritemSpacing = 0.1;
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
    collectionView.backgroundColor = [UIColor whiteColor];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    self.collectionView = collectionView;
    [self addSubview:collectionView];
    [collectionView makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(0);
    }];
    [collectionView registerClass:[HomeSortBtnCell class] forCellWithReuseIdentifier:@"HomeSortBtnCell"];

2、在collectionView上添加长按手势

UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handlelongGesture:)];
    [collectionView addGestureRecognizer:longPress];

3、长按手势响应方法

#pragma mark 长按响应方法
- (void)handlelongGesture:(UILongPressGestureRecognizer *)longPress {
    [self action:longPress];
}

4、处理长按手势

- (void)action:longPress:(UILongPressGestureRecognizer *)longPress {
    switch (longPress.state) {
        case UIGestureRecognizerStateBegan:
            {
                //手势开始
                //判断手势落点位置是否在row上

最低0.47元/天解锁文章