時間管理類的應用中插入編輯的效果
慣例先上gif如下
思路
1.拖拽視圖效果的實現######
2.列表中的cell隔開效果實現########
判斷視圖移動位置并在視圖對應的cell的位置下插入一個新的cell，并刪除上一個用來隔開空間的cell########
Begin
工具：Xcode 7.0 模擬器 9.0
新建一個工程文件
自定義信息欄（頂部的一個view 或者 各種控件）
-
新建一個CustomView 繼承于 UIView
屏幕快照 2015-09-29 下午12.41.59.png -
新建一個CustomView.xib文件流程如下
屏幕快照 2015-09-29 下午12.44.31.png
選中newFile
命名注意與CustomView.h名字相同
- 更改與布局CustomView.xib
選中CustomView.xib 將class 更改為 CustomView
將CutomView.xib 的 Size 改成Freeform凌节，設置這個之后就可以自由改變大小了傍睹。
設置寬高
布局xib 如下 拉好中間的label的約束 四個約束 label的寬固定 高固定
水平中心對齊 豎直中心對齊
-
在ViewController.m中
<pre><code>#import "CustomView.h"</code></pre><pre>
@interface ViewController ()
{
CustomView *_liangchen;
BOOL _flag;
CGPoint _beginPoint;
}
@end
</pre> -
創(chuàng)建_liangchen姨俩；
<pre>- (void)viewDidLoad {
[super viewDidLoad];
[self creatLiangChenView];
}</pre>
<pre>- (void)creatLiangChenView{
_liangchen = [[[NSBundle mainBundle] loadNibNamed:@"CustomView" owner:self options:nil] lastObject];
_liangchen.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/2 - 120, 48, 240, 72);
_liangchen.tag = 10;
_liangchen.layer.cornerRadius = 5;
_liangchen.clipsToBounds = YES;
[self.view addSubview:_liangchen];
}</pre> -
利用UITouch實現_liangchen拖拽效果
<pre>- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
//判斷觸摸的view是否為_langchen
if (touch.view.tag == 10) {
_flag = YES;
}else{
_flag = NO;
}
//獲取觸摸開始時的觸摸位置
_beginPoint = [touch locationInView:_liangchen];
[super touchesBegan:touches withEvent:event];
}</pre>
<pre>- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
if (!_flag) {
return;
}
UITouch *touch = [touches anyObject];
//觸摸過程中的觸摸位置
CGPoint currentPosition = [touch locationInView:_liangchen];
CGPoint viewPoint = _liangchen.center;
//計算偏移量
float offsetX = currentPosition.x - _beginPoint.x;
float offsetY = currentPosition.y - _beginPoint.y;//移動_liangchen
[_liangchen setCenter:CGPointMake(viewPoint.x + offsetX, viewPoint.y + offsetY)];
}</pre> 這個時候運行程序球散，_liangchen就可以跟隨你的手指拖拽了
-建立列表（tableView）
-打開Main.storyboard,拖入一個tableVIew强缘，布局好欣鳖，并拉好autolayout
- 在ViewController.h中為tableView拉屬性
- 將tableView的delegate察皇、dataSource設置為ViewController
- 設置talbeVIew的rowHeight為72(我喜歡這個數字)
- 在Main.storyboard為tableView拉入兩種類型的cell，一種是用來顯示信息泽台，一種作為cell之間撕開的假象所要添加的cell
- 設置顯示信息cell的Identifier為cell
- 設置用來隔開空間的cell的Identifier為space
在ViewController.m中增加一個數據源成員變量_dataArray,并添加tableVIew協議
<pre>@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
{
CustomView *_liangchen;
BOOL _flag;
CGPoint _beginPoint;
NSMutableArray *_dataArray;
}
@end
</pre>創(chuàng)建列表的數據源(利用字典的isAdd的鍵值來判斷是否開啟cell之間的空隙)
<pre>- (void)viewDidLoad {
[super viewDidLoad];
[self creatLiangChenView];
[self addDataArray];
[_tableView setContentInset:UIEdgeInsetsMake(0, 0, _tableView.rowHeight, 0)];
}</pre>
<pre>- (void)addDataArray{
NSDictionary *dic = @{@"Cell":@"cell",@"isAdd":@(NO)};
_dataArray = [[NSMutableArray alloc] initWithCapacity:0];
for (NSInteger i = 0; i < 7; i++) {
[_dataArray addObject:dic];
}
}</pre>實現tableView代理的兩個必須方法
<pre>- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return _dataArray.count;
}</pre>
<pre> - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
if ([[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"cell"]) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
return cell;
}
if ([[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"space"]) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"space"];
return cell;
}
return nil;
}
</pre>開關cell之間的間隙的方法（關鍵）什荣，通過indexPath判斷字典中的值進行開關操作
<pre>- (void)addSpace:(NSIndexPath *)indexPath{
NSIndexPath *path = nil;
if ([[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"cell"] || [[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"space"]) {
path = [NSIndexPath indexPathForItem:(indexPath.row+1) inSection:indexPath.section];
}else{
path = indexPath;
}
if ([[_dataArray[indexPath.row] objectForKey:@"isAdd"] boolValue]) {
//close Space
if ([[_dataArray[indexPath.row ] objectForKey:@"Cell"] isEqualToString:@"cell"]) {
NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:_dataArray[indexPath.row]];
[dic setValue:@(NO) forKey:@"isAdd"];
_dataArray[(path.row - 1)] = dic;
}else{
NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:_dataArray[indexPath.row]];
[dic setValue:@(NO) forKey:@"isAdd"];
_dataArray[(path.row - 1)] = dic;
}
[_dataArray removeObjectAtIndex:path.row];
[self.tableView beginUpdates];
[self.tableView deleteRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationFade];
[self.tableView endUpdates];
}else{
// open Space
if ([[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"space"]) {
NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:_dataArray[indexPath.row]];
[dic setValue:@(YES) forKey:@"isAdd"];
_dataArray[(path.row - 1)] = dic;
}else if([[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"cell"]){
NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:_dataArray[indexPath.row]];
[dic setValue:@(YES) forKey:@"isAdd"];
_dataArray[(path.row - 1)] = dic;
}
NSDictionary * addDic = @{@"Cell": @"space",@"isAdd":@(YES),};
[_dataArray insertObject:addDic atIndex:path.row];
[self.tableView beginUpdates];
[self.tableView insertRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationFade];
[self.tableView endUpdates];
}
}
</pre>添加_height 及 _tempIndex 兩個成員變量，_height是_liangchen在列表中拖拽響應范圍的高度怀酷，_tempIndex是_liangchen拖拽過程中經過的上一個cell的indexPath稻爬，并給_tempIndex賦初值
<pre>@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
{
CustomView *_liangchen;
BOOL _flag;
CGPoint _beginPoint;
NSMutableArray *_dataArray;
CGFloat _height;
NSIndexPath *_tempIndex;
}
@end</pre>
<pre>- (void)viewDidLoad {
[super viewDidLoad];
[self creatLiangChenView];
[self addDataArray];
[_tableView setContentInset:UIEdgeInsetsMake(0, 0, _tableView.rowHeight, 0)];
_tempIndex = [NSIndexPath indexPathForRow:100 inSection:0];
}
</pre>計算_height
<pre>- (void)calculateHeight{
if (_dataArray.count * _tableView.rowHeight > _tableView.bounds.size.height) {
_height = _tableView.center.y + _tableView.bounds.size.height / 2;
}else{
_height = _tableView.center.y - _tableView.bounds.size.height / 2 + _dataArray.count * _tableView.rowHeight;
}
}</pre>-
在 touchMoved: 方法中開關cell的間隙
<pre>- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
if (!_flag) {
return;
}
UITouch *touch = [touches anyObject];
//觸摸過程中的觸摸位置
CGPoint currentPosition = [touch locationInView:_liangchen];
CGPoint viewPoint = _liangchen.center;
//計算偏移量
float offsetX = currentPosition.x - _beginPoint.x;
float offsetY = currentPosition.y - _beginPoint.y;
//移動_liangchen
[_liangchen setCenter:CGPointMake(viewPoint.x + offsetX, viewPoint.y + offsetY)];[self calculateHeight];
if (viewPoint.y > (_tableView.center.y - _tableView.bounds.size.height / 2) && viewPoint.y < _height ) {
NSIndexPath *fristPath = [_tableView indexPathForCell:_tableView.visibleCells[0]];NSIndexPath *path = [_tableView indexPathForRowAtPoint:CGPointMake(_liangchen.center.x , _liangchen.center.y - 175)]; NSIndexPath *lastPath = [NSIndexPath indexPathForRow:fristPath.row + path.row inSection:0]; if (_tempIndex.row != 100 && _tempIndex.row < _dataArray.count - 1 && _tempIndex.row != lastPath.row ) { [self addSpace:_tempIndex]; } if (lastPath.row != _tempIndex.row && lastPath.row < _dataArray.count ) { [self addSpace:lastPath]; _tempIndex = lastPath; }}
}
</pre> 這一步就實現了了拖拽_liangchen進入tableview中cell會根據_liangchen所在的位置開關間隙
最后一步，拖拽停止后_liangchen以動畫的方式加入到列表中胰坟，首先要知道插入位置的indexPath因篇，因此增加一個成員變量_endIndex,并在addSpace:這個方法中給_endIndex賦值(addSpace：中最后一行代碼)
<pre>@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
{
CustomView *_liangchen;
BOOL _flag;
CGPoint _beginPoint;
NSMutableArray *_dataArray;
CGFloat _height;
NSIndexPath *_tempIndex;
NSIndexPath *_endIndex;
}
@end</pre>
<pre>- (void)addSpace:(NSIndexPath *)indexPath{
NSIndexPath *path = nil;
if ([[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"cell"] || [[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"space"]) {
path = [NSIndexPath indexPathForItem:(indexPath.row+1) inSection:indexPath.section];
}else{
path = indexPath;
}
if ([[_dataArray[indexPath.row] objectForKey:@"isAdd"] boolValue]) {
//close Space
if ([[_dataArray[indexPath.row ] objectForKey:@"Cell"] isEqualToString:@"cell"]) {
NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:_dataArray[indexPath.row]];
[dic setValue:@(NO) forKey:@"isAdd"];
_dataArray[(path.row - 1)] = dic;
}else{
NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:_dataArray[indexPath.row]];
[dic setValue:@(NO) forKey:@"isAdd"];
_dataArray[(path.row - 1)] = dic;
}
[_dataArray removeObjectAtIndex:path.row];
[self.tableView beginUpdates];
[self.tableView deleteRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationFade];
[self.tableView endUpdates];
}else{
// open Space
if ([[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"space"]) {
NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:_dataArray[indexPath.row]];
[dic setValue:@(YES) forKey:@"isAdd"];
_dataArray[(path.row - 1)] = dic;
}else if([[_dataArray[indexPath.row] objectForKey:@"Cell"] isEqualToString:@"cell"]){
NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:_dataArray[indexPath.row]];
[dic setValue:@(YES) forKey:@"isAdd"];
_dataArray[(path.row - 1)] = dic;
}
NSDictionary * addDic = @{@"Cell": @"space",@"isAdd":@(YES),};
[_dataArray insertObject:addDic atIndex:path.row];
[self.tableView beginUpdates];
[self.tableView insertRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationFade];
[self.tableView endUpdates];
_endIndex = path;
}
}
</pre>以動畫的方式插入列表中，touch事件結束的時候會觸發(fā)方法：(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event 在這個方法中實現動畫插入,插入前要對_liangchen的所在坐標系進行轉換具體看代碼
<pre>- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CGPoint viewPositon = _liangchen.center;
CGRect rect = [self.tableView rectForRowAtIndexPath:_endIndex];
CGPoint newPositon = [_liangchen.superview convertPoint:viewPositon toView:_tableView];
[self calculateHeight];
if (viewPositon.y > (_tableView.center.y - _tableView.bounds.size.height / 2) && viewPositon.y < _height ) {
_liangchen.center = newPositon;
[_tableView addSubview:_liangchen];
[UIView animateWithDuration:0.40f animations:^{
[_liangchen setFrame:CGRectMake(rect.origin.x, rect.origin.y, [UIScreen mainScreen].bounds.size.width, _liangchen.frame.size.height)];
_liangchen.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
NSLog(@"請記住我叫 葉良辰");
}];
}
}</pre>
- 在我的github增加了刪除添加功能笔横，gif：
- 文中若出現紕漏竞滓，請給作者留言，謝謝吹缔。
-END
