期望效果
JXMovableCellTableView.gif
1.長按即可觸發(fā)移動(dòng)cell攒岛，操作邏輯簡單；
2.移動(dòng)cell時(shí)越靠近屏幕邊緣，速度越快萄喳；
3.被移動(dòng)cell的樣式可以自定義；
github地址
JXMovableCellTableView,如果你喜歡蹋半，不妨給顆星吧_~
調(diào)研
如果只是實(shí)現(xiàn)移動(dòng)UITableViewCell他巨，系統(tǒng)自帶的API即可搞定。
調(diào)用下面的方法[tableView setEditing:YES animated:YES];即可進(jìn)入編輯模式减江。然后實(shí)現(xiàn)下面的方法即可開啟移動(dòng)cell染突。
//默認(rèn)編輯模式下，每個(gè)cell左邊有個(gè)紅色的刪除按鈕辈灼，設(shè)置為None即可去掉
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
return UITableViewCellEditingStyleNone;
}
//是否允許indexPath的cell移動(dòng)
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
{
//更新數(shù)據(jù)源
}
用系統(tǒng)的方法有幾個(gè)缺點(diǎn)：
1.需要用一個(gè)開關(guān)去控制編輯狀態(tài)觉痛，不方便；
2.移動(dòng)cell的時(shí)候cell右邊有個(gè)指示圖標(biāo)茵休，看著不爽薪棒；
3.被移動(dòng)cell的樣式不能自己定制。
綜上所述榕莺，需要自己去寫效果了俐芯。
實(shí)現(xiàn)原理
大概原理：為UITableView添加一個(gè)長按手勢(shì)，然后給選中的cell截圖钉鸯；讓截圖隨著手勢(shì)移動(dòng)吧史，同時(shí)記錄選中的indexPath，方便位置互換唠雕。
1.添加長按手勢(shì)
- (void)jx_addGesture
{
_gesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(jx_processGesture:)];
_gesture.minimumPressDuration = _gestureMinimumPressDuration;
[self addGestureRecognizer:_gesture];
}
2.處理手勢(shì)開始贸营，需要通過dataSource方法獲取數(shù)據(jù)源
- (void)jx_gestureBegan:(UILongPressGestureRecognizer *)gesture
{
CGPoint point = [gesture locationInView:gesture.view];
NSIndexPath *selectedIndexPath = [self indexPathForRowAtPoint:point];
if (!selectedIndexPath) {
return;
}
if (self.delegate && [self.delegate respondsToSelector:@selector(tableView:willMoveCellAtIndexPath:)]) {
[self.delegate tableView:self willMoveCellAtIndexPath:selectedIndexPath];
}
if (_canEdgeScroll) {
//開啟邊緣滾動(dòng)
[self jx_startEdgeScroll];
}
//每次移動(dòng)開始獲取一次數(shù)據(jù)源
if (self.dataSource && [self.dataSource respondsToSelector:@selector(dataSourceArrayInTableView:)]) {
_tempDataSource = [self.dataSource dataSourceArrayInTableView:self].mutableCopy;
}
_selectedIndexPath = selectedIndexPath;
UITableViewCell *cell = [self cellForRowAtIndexPath:selectedIndexPath];
_tempView = [self jx_snapshotViewWithInputView:cell];
if (_drawMovalbeCellBlock) {
//將_tempView通過block讓使用者自定義
_drawMovalbeCellBlock(_tempView);
}else {
//配置默認(rèn)樣式
_tempView.layer.shadowColor = [UIColor grayColor].CGColor;
_tempView.layer.masksToBounds = NO;
_tempView.layer.cornerRadius = 0;
_tempView.layer.shadowOffset = CGSizeMake(-5, 0);
_tempView.layer.shadowOpacity = 0.4;
_tempView.layer.shadowRadius = 5;
}
_tempView.frame = cell.frame;
[self addSubview:_tempView];
//隱藏cell
cell.hidden = YES;
[UIView animateWithDuration:kJXMovableCellAnimationTime animations:^{
_tempView.center = CGPointMake(_tempView.center.x, point.y);
}];
}
3.處理手勢(shì)變化，移動(dòng)成功之后用delegate告訴使用者
- (void)jx_gestureChanged:(UILongPressGestureRecognizer *)gesture
{
CGPoint point = [gesture locationInView:gesture.view];
NSIndexPath *currentIndexPath = [self indexPathForRowAtPoint:point];
if (currentIndexPath && ![_selectedIndexPath isEqual:currentIndexPath]) {
//交換數(shù)據(jù)源和cell
[self jx_updateDataSourceAndCellFromIndexPath:_selectedIndexPath toIndexPath:currentIndexPath];
if (self.delegate && [self.delegate respondsToSelector:@selector(tableView:didMoveCellFromIndexPath:toIndexPath:)]) {
[self.delegate tableView:self didMoveCellFromIndexPath:_selectedIndexPath toIndexPath:currentIndexPath];
}
_selectedIndexPath = currentIndexPath;
}
//讓截圖跟隨手勢(shì)
_tempView.center = CGPointMake(_tempView.center.x, point.y);
}
交換數(shù)據(jù)源和cell
- (void)jx_updateDataSourceAndCellFromIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath
{
if ([self numberOfSections] == 1) {
//只有一組
[_tempDataSource exchangeObjectAtIndex:fromIndexPath.row withObjectAtIndex:toIndexPath.row];
//交換cell
[self moveRowAtIndexPath:fromIndexPath toIndexPath:toIndexPath];
}else {
//有多組
id fromData = _tempDataSource[fromIndexPath.section][fromIndexPath.row];
id toData = _tempDataSource[toIndexPath.section][toIndexPath.row];
NSMutableArray *fromArray = [_tempDataSource[fromIndexPath.section] mutableCopy];
NSMutableArray *toArray = [_tempDataSource[toIndexPath.section] mutableCopy];
[fromArray replaceObjectAtIndex:fromIndexPath.row withObject:toData];
[toArray replaceObjectAtIndex:toIndexPath.row withObject:fromData];
[_tempDataSource replaceObjectAtIndex:fromIndexPath.section withObject:fromArray];
[_tempDataSource replaceObjectAtIndex:toIndexPath.section withObject:toArray];
//交換cell
[self beginUpdates];
[self moveRowAtIndexPath:fromIndexPath toIndexPath:toIndexPath];
[self moveRowAtIndexPath:toIndexPath toIndexPath:fromIndexPath];
[self endUpdates];
}
}
4.處理手勢(shì)結(jié)束或取消岩睁，結(jié)束之后通過dataSource代理返回交換后的數(shù)據(jù)源钞脂。
- (void)jx_gestureEndedOrCancelled:(UILongPressGestureRecognizer *)gesture
{
if (_canEdgeScroll) {
[self jx_stopEdgeScroll];
}
//返回交換后的數(shù)據(jù)源
if (self.dataSource && [self.dataSource respondsToSelector:@selector(tableView:newDataSourceArrayAfterMove:)]) {
[self.dataSource tableView:self newDataSourceArrayAfterMove:_tempDataSource.copy];
}
if (self.delegate && [self.delegate respondsToSelector:@selector(tableView:endMoveCellAtIndexPath:)]) {
[self.delegate tableView:self endMoveCellAtIndexPath:_selectedIndexPath];
}
UITableViewCell *cell = [self cellForRowAtIndexPath:_selectedIndexPath];
[UIView animateWithDuration:kJXMovableCellAnimationTime animations:^{
_tempView.frame = cell.frame;
} completion:^(BOOL finished) {
cell.hidden = NO;
[_tempView removeFromSuperview];
_tempView = nil;
}];
}
5.開啟邊緣滾動(dòng)
用CADisplayLink實(shí)現(xiàn)，1/60秒刷新一次捕儒，和屏幕刷新頻率一樣冰啃。
- (void)jx_startEdgeScroll
{
_edgeScrollTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(jx_processEdgeScroll)];
[_edgeScrollTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
6.處理邊緣滾動(dòng)
- (void)jx_processEdgeScroll
{
[self jx_gestureChanged:_gesture];
CGFloat minOffsetY = self.contentOffset.y + _edgeScrollRange;
CGFloat maxOffsetY = self.contentOffset.y + self.bounds.size.height - _edgeScrollRange;
CGPoint touchPoint = _tempView.center;
//處理上下達(dá)到極限之后不再滾動(dòng)tableView邓夕，其中處理了滾動(dòng)到最邊緣的時(shí)候，當(dāng)前處于edgeScrollRange內(nèi)阎毅，但是tableView還未顯示完焚刚，需要顯示完tableView才停止?jié)L動(dòng)
if (touchPoint.y < _edgeScrollRange) {
if (self.contentOffset.y <= 0) {
return;
}else {
if (self.contentOffset.y - 1 < 0) {
return;
}
[self setContentOffset:CGPointMake(self.contentOffset.x, self.contentOffset.y - 1) animated:NO];
_tempView.center = CGPointMake(_tempView.center.x, _tempView.center.y - 1);
}
}
if (touchPoint.y > self.contentSize.height - _edgeScrollRange) {
if (self.contentOffset.y >= self.contentSize.height - self.bounds.size.height) {
return;
}else {
if (self.contentOffset.y + 1 > self.contentSize.height - self.bounds.size.height) {
return;
}
[self setContentOffset:CGPointMake(self.contentOffset.x, self.contentOffset.y + 1) animated:NO];
_tempView.center = CGPointMake(_tempView.center.x, _tempView.center.y + 1);
}
}
//處理滾動(dòng)
CGFloat maxMoveDistance = 20;
if (touchPoint.y < minOffsetY) {
//cell在往上移動(dòng), moveDistance越大移動(dòng)越快
CGFloat moveDistance = (minOffsetY - touchPoint.y)/_edgeScrollRange*maxMoveDistance;
[self setContentOffset:CGPointMake(self.contentOffset.x, self.contentOffset.y - moveDistance) animated:NO];
_tempView.center = CGPointMake(_tempView.center.x, _tempView.center.y - moveDistance);
}else if (touchPoint.y > maxOffsetY) {
//cell在往下移動(dòng), moveDistance越大移動(dòng)越快
CGFloat moveDistance = (touchPoint.y - maxOffsetY)/_edgeScrollRange*maxMoveDistance;
[self setContentOffset:CGPointMake(self.contentOffset.x, self.contentOffset.y + moveDistance) animated:NO];
_tempView.center = CGPointMake(_tempView.center.x, _tempView.center.y + moveDistance);
}
}
使用
直接繼承JXMovableCellTableView就可以使用了，然后通過公開屬性進(jìn)行自定義：
/**
* 長按手勢(shì)最小觸發(fā)時(shí)間扇调，默認(rèn)1.0矿咕，最小0.2
*/
@property (nonatomic, assign) CGFloat gestureMinimumPressDuration;
/**
* 自定義可移動(dòng)cell的截圖樣式
*/
@property (nonatomic, copy) void(^drawMovalbeCellBlock)(UIView *movableCell);
/**
* 是否允許拖動(dòng)到屏幕邊緣后，開啟邊緣滾動(dòng)狼钮，默認(rèn)YES
*/
@property (nonatomic, assign) BOOL canEdgeScroll;
/**
* 邊緣滾動(dòng)觸發(fā)范圍痴腌，默認(rèn)150，越靠近邊緣速度越快
*/
@property (nonatomic, assign) CGFloat edgeScrollRange;
總結(jié)
通過截圖大法實(shí)現(xiàn)以假亂真燃领，自由移動(dòng)截圖產(chǎn)生的"cell"士聪；交換的時(shí)候，首先要交換數(shù)據(jù)源猛蔽，再交換cell剥悟；處理邊緣滾動(dòng)的時(shí)候，需要小心各種邊界條件曼库。
既然UITableViewCell可以自由移動(dòng)了区岗，那么UICollectionViewCell同理也可以實(shí)現(xiàn)。下篇文章就講可移動(dòng)UICollectionViewCell的實(shí)現(xiàn)毁枯。
