「 iOS 」可拖拽Cell

如今不少項目都會用到相似拖動的效果,好比今日頭條和網易新聞之類的資訊類產品,都有用該技術設置模塊順序的操做。佈局

在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;
}
  1. 先建立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.長按手勢響應事件atom

- (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.實現蘋果官方的代理方法spa

- (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界面。代理

相關文章
相關標籤/搜索