如今不少項目都會用到相似拖動的效果,好比今日頭條和網易新聞之類的資訊類產品,都有用該技術設置模塊順序的操做。佈局
在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; }
//建立佈局對象 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界面。代理