yuandi.gif
项目中用到了这个功能，感觉挺好玩的，所以就研究总结了一下，写了个demo大家一起review一下，哈哈哈。git下载地址
这个效果主要分了两个部分，一个是抖动和cell的拖拽移动位置。
- 抖动
抖动的动能比较容易实现，在collection上面加一个长按手势，然后在响应手势的时候，collection刷新一下给所有的cell都加上一个抖动动画效果，然后手势结束的时候移除动画效果就行。
-(void)starAnimation:(BOOL)animaiton
{
if (animaiton) {
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//抖动的话添加一个旋转角度给他就好
basicAnimation.fromValue = @(-M_PI_4/14);
basicAnimation.toValue = @(M_PI_4/14);
basicAnimation.duration = 0.08;
basicAnimation.repeatCount = MAXFLOAT;
basicAnimation.autoreverses = YES;
[self.layer addAnimation:basicAnimation forKey:nil];
}else{
[self.layer addAnimation:[CAAnimation animation] forKey:nil];
}
}
cell的拖拽移动
这里面主要说一下iOS9以下的实现方法，因为iOS9以上在collectionview中已经有封装好的方法直接调用实现该效果
主要的实现思路如下
- 首先在长按手势响应的时候，获取到长按的是那个cell，记录该cell的indexPath，然后截图改cell，得到一个view，把该view加在collectionview上面的该cell的位置，然后把cell隐藏掉，这时候我们看到的视图是截图出来的view，实际的cell已经隐藏掉
- 第二步就是移动了。在手势的响应方法里面状态改变的时候，计算手势位移，然后更新截图出来的view的中心点（注意：这里看到的是截图出来的view了，而不是cell），接着遍历collectionview中visibleCells，获取到可见的cell，称之为visibleCell，判断visibleCell的中心点和移动view的中心点的相交的大小，如果超过了visibleCell的大小的一半，那么就刷新数据源，把因为我们要把长按的cell替换到该位置。
- 第三步手势结束的时候就是把截图的view移除，然后显示出来我们隐藏掉的cell就OK啦
-(void)pan:(UILongPressGestureRecognizer *)pan
{
//判断手势状态
switch (pan.state) {
case UIGestureRecognizerStateBegan:{
self.isBegin = YES;
[self.collectionView reloadData];
[self.collectionView performBatchUpdates:^{
} completion:^(BOOL finished) {
//判断手势落点位置是否在路径上
self.indexPath = [self.collectionView indexPathForItemAtPoint:[pan locationOfTouch:0 inView:pan.view]];
//得到该路径上的cell
self.cell = [self.collectionView cellForItemAtIndexPath:self.indexPath];
//截图cell，得到一个view
self.tempMoveCell = [self.cell snapshotViewAfterScreenUpdates:NO];
self.tempMoveCell.frame = self.cell.frame;
[self.collectionView addSubview:self.tempMoveCell];
self.cell.hidden = YES;
//记录当前手指位置
_lastPoint = [pan locationOfTouch:0 inView:pan.view];
}];
}
break;
case UIGestureRecognizerStateChanged:
{
//偏移量
CGFloat tranX = [pan locationOfTouch:0 inView:pan.view].x - _lastPoint.x;
CGFloat tranY = [pan locationOfTouch:0 inView:pan.view].y - _lastPoint.y;
//更新cell位置
_tempMoveCell.center = CGPointApplyAffineTransform(_tempMoveCell.center, CGAffineTransformMakeTranslation(tranX, tranY));
//记录当前手指位置
_lastPoint = [pan locationOfTouch:0 inView:pan.view];
for (UICollectionViewCell *cell in [self.collectionView visibleCells]) {
//剔除隐藏的cell
if ([self.collectionView indexPathForCell:cell] == self.indexPath) {
continue;
}
//计算中心，如果相交一半就移动
CGFloat spacingX = fabs(_tempMoveCell.center.x - cell.center.x);
CGFloat spacingY = fabs(_tempMoveCell.center.y - cell.center.y);
if (spacingX <= _tempMoveCell.bounds.size.width / 2.0f && spacingY <= _tempMoveCell.bounds.size.height / 2.0f){
self.moveIndexPath = [self.collectionView indexPathForCell:cell];
//更新数据源（移动前必须更新数据源）
[self updateDataSource];
//移动cell
[self.collectionView moveItemAtIndexPath:self.indexPath toIndexPath:self.moveIndexPath];
//设置移动后的起始indexPath
self.indexPath = self.moveIndexPath;
break;
}
}
}
break;
case UIGestureRecognizerStateEnded:
{
[self.collectionView performBatchUpdates:^{
} completion:^(BOOL finished) {
self.cell = [self.collectionView cellForItemAtIndexPath:self.indexPath];
[UIView animateWithDuration:0.1 animations:^{
_tempMoveCell.center = self.cell.center;
} completion:^(BOOL finished) {
[_tempMoveCell removeFromSuperview];
self.cell.hidden = NO;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self.isBegin = NO;
[self.collectionView reloadData];
});
}];
}];
}
break;
default:
break;
}
}
刷新数据源
-(void)updateDataSource
{
//取出源item数据
id objc = [[self.numArray objectAtIndex:self.indexPath.section] objectAtIndex:self.indexPath.row];
//从资源数组中移除该数据,不能直接删除某个数据，因为有可能有相同的数据，一下子删除了多个数据源，造成clash
// [[self.numArray objectAtIndex:self.indexPath.section] removeObject:objc];
//删除指定位置的数据，这样就只删除一个，不会重复删除
[[self.numArray objectAtIndex:self.indexPath.section] removeObjectAtIndex:self.indexPath.row];
//将数据插入到资源数组中的目标位置上
[[self.numArray objectAtIndex:self.moveIndexPath.section] insertObject:objc atIndex:self.moveIndexPath.row];
}
iOS9.0以后的实现方法
用API中下面的方法即可实现
// Support for reordering
//开始移动cell
- (BOOL)beginInteractiveMovementForItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0); // returns NO if reordering was prevented from beginning - otherwise YES
//更新cell的位置
- (void)updateInteractiveMovementTargetPosition:(CGPoint)targetPosition NS_AVAILABLE_IOS(9_0);
//结束
- (void)endInteractiveMovement NS_AVAILABLE_IOS(9_0);
//取消
- (void)cancelInteractiveMovement NS_AVAILABLE_IOS(9_0);
-(void)pan:(UILongPressGestureRecognizer *)pan
{
//判断手势状态
switch (pan.state) {
case UIGestureRecognizerStateBegan:{
//判断手势落点位置是否在路径上
self.indexPath = [self.collectionView indexPathForItemAtPoint:[pan locationOfTouch:0 inView:pan.view]];
//开始移动cell
[self.collectionView beginInteractiveMovementForItemAtIndexPath:self.indexPath];
}
break;
case UIGestureRecognizerStateChanged:
{
//更新cell的位置
[self.collectionView updateInteractiveMovementTargetPosition:[pan locationInView:self.collectionView]];
}
break;
case UIGestureRecognizerStateEnded:
{
//结束
[self.collectionView endInteractiveMovement];
}
break;
default:
//取消
[self.collectionView cancelInteractiveMovement];
break;
}
}
接着实现代理的方法跟新数据源
#pragma ios9.0以后
-(BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath NS_AVAILABLE_IOS(9_0)
{
//取出源item数据
id objc = [[self.numArray objectAtIndex:sourceIndexPath.section] objectAtIndex:self.indexPath.row];
//删除指定位置的数据，这样就只删除一个，不会重复删除
[[self.numArray objectAtIndex:sourceIndexPath.section] removeObjectAtIndex:sourceIndexPath.row];
// //将数据插入到资源数组中的目标位置上
[[self.numArray objectAtIndex:destinationIndexPath.section] insertObject:objc atIndex:destinationIndexPath.row];
}