最近因需要实现一个标签类的 demo, 需要支持拖拽重排, 首先想到的便是 collectionView, 并且很快就在 API 文档中找到了类似的接口:
- (BOOL)beginInteractiveMovementForItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0);
- (void)updateInteractiveMovementTargetPosition:(CGPoint)targetPosition NS_AVAILABLE_IOS(9_0);
- (void)endInteractiveMovement NS_AVAILABLE_IOS(9_0);
- (void)cancelInteractiveMovement NS_AVAILABLE_IOS(9_0);
用系统提供的这几个接口很快便能实现我们的需求, 代码见 gitbub地址.
但是你有没有发现上面的方法后面跟着的NS_AVAILABLE_IOS(9_0), iOS9才开始支持, 这就尴尬了.
那iOS9之前怎么手动实现这个需求呢, 于是边分析边开始列出实现步骤:
- 长按 cell 进入拖拽模式
- 隐藏当前 cell, 并添加一个当前 cell 的截图到 collectionView 上
- 随手势移动截图, 当截图的center 进入到另一个 cell2 的范围内的时候, 将隐藏的 cell 移动到cell2的位置, 并移动 cell2及cell2之后的 cell
- 若继续移动, 则执行(3)
- 若松开手指结束移动, 则移除掉截图, 并显示之前隐藏的 cell
过程理顺了, 那么接下来便是代码的实现了.
1. 长按 cell 进入拖拽模式
我这里直接给 collectionView添加了一个长按手势
UILongPressGestureRecognizer *longG = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPress:)];
longG.minimumPressDuration = 0.2f;
[self.collectionView addGestureRecognizer:longG];
- (void)longPress:(UILongPressGestureRecognizer *)lpGesture
{
switch(lpGesture.state) {
case UIGestureRecognizerStateBegan:
{
[self collectionViewCellDidBeginChange:lpGesture];
break;
}
case UIGestureRecognizerStateChanged:
{
[self collectionViewCellDidChange:lpGesture];
break;
}
case UIGestureRecognizerStateEnded:
{
[self collectionViewCellDidEndChange:lpGesture];
break;
}
default:
if (AVAILABLE_IOS_9_0)
{
[self.collectionView cancelInteractiveMovement];
}
break;
}
}
2. 隐藏当前 cell, 并添加一个当前 cell 的截图到 collectionView 上
- (void)collectionViewCellDidBeginChange:(UILongPressGestureRecognizer *)lpGesture
{
self.beginIndexPath = [self.collectionView indexPathForItemAtPoint:[lpGesture locationInView:self.collectionView]];
self.beginCell = (CollectionViewCell *)[self.collectionView cellForItemAtIndexPath:self.beginIndexPath];
if (AVAILABLE_IOS_9_0)
{
[self.collectionView beginInteractiveMovementForItemAtIndexPath:self.beginIndexPath];
}
else
{
// 截图 并隐藏原 cell
self.tempView = [self.beginCell snapshotViewAfterScreenUpdates:YES];
self.tempView.frame = self.beginCell.frame;
[self.collectionView addSubview:self.tempView];
self.beginPoint = [lpGesture locationInView:self.collectionView];
self.beginCell.hidden = YES;
}
}
3. 移动截图
- (void)collectionViewCellDidChange:(UILongPressGestureRecognizer *)lpGesture
{
CGPoint targetPosion = [lpGesture locationInView:lpGesture.view];
if (AVAILABLE_IOS_9_0)
{
[self.collectionView updateInteractiveMovementTargetPosition:targetPosion];
}
else
{
CGFloat tranX = [lpGesture locationOfTouch:0 inView:self.collectionView].x - self.beginPoint.x;
CGFloat tranY = [lpGesture locationOfTouch:0 inView:self.collectionView].y - self.beginPoint.y;
// 设置截图视图位置
self.tempView.center = CGPointApplyAffineTransform(self.tempView.center, CGAffineTransformMakeTranslation(tranX, tranY));
self.beginPoint = [lpGesture locationOfTouch:0 inView:_collectionView];
// 计算截图视图和哪个cell相交
for (UICollectionViewCell *cell in [_collectionView visibleCells])
{
//跳过隐藏的cell
if ([_collectionView indexPathForCell:cell] == self.beginIndexPath)
{
continue;
}
//计算中心距
CGFloat space = sqrtf(pow(self.tempView.center.x - cell.center.x, 2) + powf(self.tempView.center.y - cell.center.y, 2));
//如果相交一半且两个视图Y的绝对值小于高度的一半就移动
if (space <= self.tempView.bounds.size.width * 0.5 && (fabs(self.tempView.center.y - cell.center.y) <= self.tempView.bounds.size.height * 0.5))
{
NSIndexPath *nextIndexPath = [_collectionView indexPathForCell:cell];
[self updateDataWithSourceIndexPath:self.beginIndexPath toIndexPath:nextIndexPath];
[_collectionView moveItemAtIndexPath:self.beginIndexPath toIndexPath:nextIndexPath];
//设置移动后的起始indexPath
self.beginIndexPath = nextIndexPath;
break;
}
}
}
}
数据源的改动
- (void)updateDataWithSourceIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
{
if (sourceIndexPath.section == destinationIndexPath.section) // 同一个 section 间移动
{
if (destinationIndexPath.item > sourceIndexPath.item) {
for (NSUInteger i = sourceIndexPath.item; i < destinationIndexPath.item ; i ++) {
[self.dataArray[sourceIndexPath.section] exchangeObjectAtIndex:i withObjectAtIndex:i + 1];
}
}else{
for (NSUInteger i = sourceIndexPath.item; i > destinationIndexPath.item ; i --) {
[self.dataArray[sourceIndexPath.section] exchangeObjectAtIndex:i withObjectAtIndex:i - 1];
}
}
}
else // 不同 section 之间移动 , 删除 sourceData, 插入到 destinationData
{
NSMutableArray *sourceArr = self.dataArray[sourceIndexPath.section];
NSMutableArray *destinationArr = self.dataArray[destinationIndexPath.section];
id obj = [sourceArr objectAtIndex:sourceIndexPath.row];
[sourceArr removeObjectAtIndex:sourceIndexPath.row];
[destinationArr insertObject:obj atIndex:destinationIndexPath.row];
}
}
4. 若继续移动, 则执行(3)
5. 若松开手指结束移动, 则移除掉截图, 并显示之前隐藏的 cell
- (void)collectionViewCellDidEndChange:(UILongPressGestureRecognizer *)lpGesture
{
if (AVAILABLE_IOS_9_0)
{
[self.collectionView endInteractiveMovement];
}
else
{
[UIView animateWithDuration:0.25 animations:^{
self.tempView.center = self.beginCell.center;
}completion:^(BOOL finished) {
[self.tempView removeFromSuperview];
self.beginCell.hidden = NO;
}];
}
}
好了, 到此就完成了 iOS9以下的适配, 实现起来也不是很复杂, 主要的是实现之前把思路理顺, 那实现起来就不难了.
详细的代码见gitbub地址.如果有收获,欢迎 star!
