时间管理类的应用中插入编辑的效果

惯例先上gif如下

yeliangchen.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

屏幕快照 2015-09-29 下午12.44.45.png

命名注意与CustomView.h名字相同

屏幕快照 2015-09-29 下午12.45.02.png

• 更改与布局CustomView.xib

选中CustomView.xib 将class 更改为 CustomView

屏幕快照 2015-09-29 下午12.57.56.png

将CutomView.xib 的 Size 改成Freeform，设置这个之后就可以自由改变大小了。

屏幕快照 2015-09-29 下午12.56.26.png

设置宽高

屏幕快照 2015-09-29 下午1.02.30.png

布局xib 如下 拉好中间的label的约束 四个约束 label的宽固定 高固定
水平中心对齐 竖直中心对齐

屏幕快照 2015-09-29 下午1.05.07.png

• 在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

屏幕快照 2015-09-29 下午3.13.15.png

• 在ViewController.h中为tableView拉属性

屏幕快照 2015-09-29 下午3.15.18.png

• 将tableView的delegate、dataSource设置为ViewController

屏幕快照 2015-09-29 下午3.16.57.png

• 设置talbeVIew的rowHeight为72(我喜欢这个数字)

屏幕快照 2015-09-29 下午3.26.38.png

• 在Main.storyboard为tableView拉入两种类型的cell，一种是用来显示信息，一种作为cell之间撕开的假象所要添加的cell

屏幕快照 2015-09-29 下午3.28.03.png

• 设置显示信息cell的Identifier为cell

屏幕快照 2015-09-29 下午3.29.52.png

• 设置用来隔开空间的cell的Identifier为space

屏幕快照 2015-09-29 下午3.31.56.png

• 在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：

代码测试xx.gif

• 文中若出现纰漏，请给作者留言，谢谢。
  -END