时间管理类的应用中插入编辑的效果
惯例先上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> -
创建_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>创建列表的数据源(利用字典的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事件结束的时候会触发方法：(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
