【移动应用开发技术】怎么在iOS中使用UICollectionView实现拖拽效果

【移动应用开发技术】怎么在iOS中使用UICollectionView实现拖拽效果

本篇文章为大家展示了怎么在iOS中使用UICollectionView实现拖拽效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。1.创建工程项目和视图控制器,如下图2.声明对象和设置代理和数据源代理@interface

ViewController

()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

@property

(nonatomic,

strong)

NSMutableArray

*dataArr;

@property

(nonatomic,

strong)

UICollectionView

*collectionView;

/**之前选中cell的NSIndexPath*/

@property

(nonatomic,

strong)

NSIndexPath

*oldIndexPath;

/**单元格的截图*/

@property

(nonatomic,

strong)

UIView

*snapshotView;

/**之前选中cell的NSIndexPath*/

@property

(nonatomic,

strong)

NSIndexPath

*moveIndexPath;

@end3.初始化UICollectionView,并添加长按手势,在viewDidLoad中初始化CGFloat

SCREEN_WIDTH

=

self.view.frame.size.width;

UICollectionViewFlowLayout

*flowLayout

=

[[UICollectionViewFlowLayout

alloc]

init];

flowLayout.itemSize

=

CGSizeMake((SCREEN_WIDTH-40.0)/3,

(SCREEN_WIDTH-40.0)/3);

UICollectionView

*collectionView

=

[[UICollectionView

alloc]

initWithFrame:CGRectMake(0,

50.0,

SCREEN_WIDTH,

(SCREEN_WIDTH-40.0)/3+20.0)

collectionViewLayout:flowLayout];

collectionView.dataSource

=

self;

collectionView.delegate

=

self;

collectionView.backgroundColor

=

[UIColor

whiteColor];

[collectionView

registerClass:[UICollectionViewCell

class]

forCellWithReuseIdentifier:@"uicollectionviewcell"];

[self.view

addSubview:self.collectionView

=

collectionView];

//

添加长按手势

UILongPressGestureRecognizer

*longPress

=

[[UILongPressGestureRecognizer

alloc]

initWithTarget:self

action:@selector(handlelongGesture:)];

[collectionView

addGestureRecognizer:longPress];4.实例化数据源,(50个随机颜色,透明度0.8),在viewDidLoad中初始化self.dataArr

=

[[NSMutableArray

alloc]

init];

for

(NSInteger

index

=

0;

index

<

50;

index

++)

{

CGFloat

hue

=

(arc4random()%256/256.0);

//0.0

到

1.0

CGFloat

saturation

=

(arc4random()%128/256.0)+0.5;

//0.5

到

1.0

CGFloat

brightness

=

(arc4random()%128/256.0)+0.5;

//0.5

到

1.0

UIColor

*color

=

[UIColor

colorWithHue:hue

saturation:saturation

brightness:brightness

alpha:0.5];

[self.dataArr

addObject:color];

}5.实现UICollectionView的UICollectionViewDataSource的两个必须实现的方法#pragma

mark

-

UICollectionViewDataSource

-

(NSInteger)collectionView:(UICollectionView

*)collectionView

numberOfItemsInSection:(NSInteger)section

{

return

self.dataArr.count;

}

-

(UICollectionViewCell

*)collectionView:(UICollectionView

*)collectionView

cellForItemAtIndexPath:(NSIndexPath

*)indexPath

{

UICollectionViewCell

*cell

=

[collectionView

dequeueReusableCellWithReuseIdentifier:@"uicollectionviewcell"

forIndexPath:indexPath];

cell.backgroundColor

=

self.dataArr[indexPath.row];

return

cell;

}6.重点来了,实现长按手势方法#pragma

mark

-

长按手势

-

(void)handlelongGesture:(UILongPressGestureRecognizer

*)longPress

{

if

([[[UIDevice

currentDevice]

systemVersion]

floatValue]

<

9.0)

{

[self

action:longPress];

}

else

{

[self

iOS9_Action:longPress];

}

}7.iOS9之后的实现#pragma

mark

-

iOS9

之后的方法

-

(BOOL)collectionView:(UICollectionView

*)collectionView

canMoveItemAtIndexPath:(NSIndexPath

*)indexPath

{

//

返回YES允许row移动

return

YES;

}

-

(void)collectionView:(UICollectionView

*)collectionView

moveItemAtIndexPath:(NSIndexPath

*)sourceIndexPath

toIndexPath:(NSIndexPath

*)destinationIndexPath

{

//取出移动row数据

id

color

=

self.dataArr[sourceIndexPath.row];

//从数据源中移除该数据

[self.dataArr

removeObject:color];

//将数据插入到数据源中的目标位置

[self.dataArr

insertObject:color

atIndex:destinationIndexPath.row];

}

-

(void)iOS9_Action:(UILongPressGestureRecognizer

*)longPress

{

switch

(longPress.state)

{

case

UIGestureRecognizerStateBegan:

{

//手势开始

//判断手势落点位置是否在row上

NSIndexPath

*indexPath

=

[self.collectionView

indexPathForItemAtPoint:[longPress

locationInView:self.collectionView]];

if

(indexPath

==

nil)

{

break;

}

UICollectionViewCell

*cell

=

[self.collectionView

cellForItemAtIndexPath:indexPath];

[self.view

bringSubviewToFront:cell];

//iOS9方法

移动cell

[self.collectionView

beginInteractiveMovementForItemAtIndexPath:indexPath];

}

break;

case

UIGestureRecognizerStateChanged:

{

//

手势改变

//

iOS9方法

移动过程中随时更新cell位置

[self.collectionView

updateInteractiveMovementTargetPosition:[longPress

locationInView:self.collectionView]];

}

break;

case

UIGestureRecognizerStateEnded:

{

//

手势结束

//

iOS9方法

移动结束后关闭cell移动

[self.collectionView

endInteractiveMovement];

}

break;

default:

//手势其他状态

[self.collectionView

cancelInteractiveMovement];

break;

}

}8.iOS9之前的实现#pragma

mark

-

iOS9

之前的方法

-

(void)action:(UILongPressGestureRecognizer

*)longPress

{

switch

(longPress.state)

{

case

UIGestureRecognizerStateBegan:

{

//

手势开始

//判断手势落点位置是否在row上

NSIndexPath

*indexPath

=

[self.collectionView

indexPathForItemAtPoint:[longPress

locationInView:self.collectionView]];

self.oldIndexPath

=

indexPath;

if

(indexPath

==

nil)

{

break;

}

UICollectionViewCell

*cell

=

[self.collectionView

cellForItemAtIndexPath:indexPath];

//

使用系统的截图功能,得到cell的截图视图

UIView

*snapshotView

=

[cell

snapshotViewAfterScreenUpdates:NO];

snapshotView.frame

=

cell.frame;

[self.view

addSubview:self.snapshotView

=

snapshotView];

//

截图后隐藏当前cell

cell.hidden

=

YES;

CGPoint

currentPoint

=

[longPress

locationInView:self.collectionView];

[UIView

animateWithDuration:0.25

animations:^{

snapshotView.transform

=

CGAffineTransformMakeScale(1.05,

1.05);

snapshotView.center

=

currentPoint;

}];

}

break;

case

UIGestureRecognizerStateChanged:

{

//

手势改变

//当前手指位置

截图视图位置随着手指移动而移动

CGPoint

currentPoint

=

[longPress

locationInView:self.collectionView];

self.snapshotView.center

=

currentPoint;

//

计算截图视图和哪个可见cell相交

for

(UICollectionViewCell

*cell

in

self.collectionView.visibleCells)

{

//

当前隐藏的cell就不需要交换了,直接continue

if

([self.collectionView

indexPathForCell:cell]

==

self.oldIndexPath)

{

continue;

}

//

计算中心距

CGFloat

space

=

sqrtf(pow(self.snapshotView.center.x

-

cell.center.x,

2)

+

powf(self.snapshotView.center.y

-

cell.center.y,

2));

//

如果相交一半就移动

if

(space

<=

self.snapshotView.bounds.size.width

/

2)

{

self.moveIndexPath

=

[self.collectionView

indexPathForCell:cell];

//移动

会调用willMoveToIndexPath方法更新数据源

[self.collectionView

moveItemAtIndexPath:self.oldIndexPath

toIndexPath:self.moveIndexPath];

//设置移动后的起始indexPath

self.oldIndexPath

=

self.moveIndexPath;

break;

}

}

}

break;

default:

{

//

手势结束和其他状态

UICollectionViewCell

*cell

=

[self.collectionView

cellForItemAtIndexPath:self.oldIndexPath];

//

结束动画过程中停止交互,防止出问题

self.collectionView.userInteractionEnabled

=

NO;

//

给截图视图一个动画移动到隐藏cell的新位置

[UIView

animateWithDuration:0.25

animations:^{

self.