模仿 QQ 消息页面 cell 的滑动效果

QQ 的消息界面，cell 滑动出现删除、标记已读、置顶按钮，这里只是做一个高仿的布局页面。

拆解

分析 QQ 消息页面滑动的动画，将其拆解成一下几步：

1. 向左拖动，效果类似表的滑动删除，但又不一样，cell 左滑的距离与手指拖动的距离相等；拖动的最大距离为按钮宽度之和。
2. 当拖动结束或取消时，若此时拖动的距离小于按钮宽度之和的一半，则cell 回到原点，否则滑动到左侧，宽度为按钮宽度之和。
3. 若 cell 此时的状态是已经打开的状态，拖动则关闭 cell。
4. 点击 cell，若 cell 是打开状态，则关闭 cell。
5. 当滑动表的时候，若有 cell 呈打开状态，则关闭。
6. 当有 cell 的状态是打开状态，此时拖动其他 cell，则关闭打开状态下的 cell，拖动的这个 cell 不做打开操作。

思路

因为要实现的功能并非是 tableView 的滑动操作，虽然动画效果很类似，实现思路是在 cell 上添加所需要的按钮，然后在叠加一层 容器，用来显示消息相关的组件。UI 与约束方面的东西这里就不做赘述。值得注意的一点是，这里将 容器 的 leading 约束作为动画的切入点。

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftContraint; 

实现

• 从拆解部分看，这里需要两种手势：UIPanGestureRecognizer 和 UITapGestureRecognizer, 将手势添加在 容器 视图上

  - (void)addGestures {
      //添加点击手势
      _tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(backToOrginPoint)];
      _tap.enabled = NO;
      [self.swipeView addGestureRecognizer:_tap];
      
      //拖动手势
      UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
      panGesture.delegate = self;
      panGesture.delaysTouchesBegan = 0.5;
      [self.swipeView addGestureRecognizer:panGesture];
      [panGesture requireGestureRecognizerToFail:_tap];
  }
  

• 这里将 点击手势 作为全局变量待会再做解释。
  重点其实是在怎么拖动手势上，那么怎么实现手势的处理方法呢？

  - (void)pan:(UIPanGestureRecognizer *)gesture  {
          self.swipedBlock(self.row); //回调方法，通知主界面现在被滑动的 cell 所在的行数
      
          CGFloat offsetX = [gesture translationInView:self.swipeView].x;
          CGFloat maxOffsetX = [self maxOffsetX];
  
          if (offsetX < 0) {
                  if (self .isOnLeft) {  // isOnLeft 表示此时该 cell 的状态是打开还是关闭
                        self.leftContraint.constant += 0;
                   } else if (fabs(offsetX) < maxOffsetX ) {
                       self.leftContraint.constant = -8 + offsetX;
                   } else if (fabs(offsetX) >= maxOffsetX){
                       self.leftContraint.constant = -(8 + maxOffsetX);
                  }
        }
        
      if (gesture.state == UIGestureRecognizerStateEnded || gesture.state == UIGestureRecognizerStateCancelled) {
          if (offsetX <= -maxOffsetX / 2) {
                 [self swipeToEndPoint];
                 self.isOnLeft = YES;  //isOnLeft 相当于一个标志位，标记 cell 的状态
            } else {
                  [self backToOrginPoint];
                  self.isOnLeft = NO;
            }
        }
  }
  

• 回调方法，判断当前是否有 cell 是打开状态，是则关闭

  - (void)showCellOfRow:(NSInteger)row
  {
      if (self.lastRow != row && self.lastRow != -1) { // -1 表示没有任何 cell 处于打开状态
          TableViewCell *cell = (TableViewCell *)[self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:self.lastRow inSection:0]];
          [cell backToOrginPoint];
      }
      self.lastRow = row;
  }
  

• 滚动 tableView 时如果有 cell 呈打开状态，则关闭，此时需要引入 UIScrollViewDelegate

  #pragma mark - UIScrollViewDelegate
  - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
  {
      if (self.lastRow != -1) {
          TableViewCell *lastCell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:self.lastRow inSection:0]];
          [lastCell backToOrginPoint];
  
          self.lastRow = -1;
      }
  }
  

• 动画的处理方法

  - (void)swipeToEndPoint
  {
      CGFloat offsetX = self.markReadButton.bounds.size.height + self.topBtnWidthContraint.constant;
      if (!self.markReadButton.hidden) {
          offsetX += self.markReadButton.bounds.size.width;
      }
      self.leftContraint.constant = -(8 + offsetX);
      [UIView animateWithDuration:0.1 animations:^{
          [self.swipeView layoutIfNeeded];
      } completion:^(BOOL finished) {
          _tap.enabled = YES;  //cell 滑动到左边，此时点击手势可用
      }]；
  }
  
  - (void)backToOrginPoint
  {
      self.leftContraint.constant = -8;
      [UIView animateWithDuration:0.3 animations:^{
          [self.swipeView layoutIfNeeded];
      } completion:^(BOOL finished) {
          _tap.enabled = NO; //cell 处于正常状态，点击手势不可用，否则会拦截系统的点选择效果 didSelected 代理
      }];
  }
  

• 因为 cell 打开状态下显示的按钮数量是不一定的，那么 cell 向左滑动的最大距离也是不一样的，so

  - (CGFloat)maxOffsetX {
      CGFloat maxOffsetX = self.markReadButton.bounds.size.height + self.topBtnWidthContraint.constant;
      if (!self.markReadButton.hidden) {
          maxOffsetX += self.markReadButton.bounds.size.width;
      }
  
       return maxOffsetX;
  }
  

• 从上面的注释也可以看出来，将 点击手势 作为全局变量的原因就是为了避免与系统的手势冲突，控制点击手势可用的时间，这样当点击 cell 会触发 tableView 的代理方法，此时

  - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
  {
      if (self.lastRow != -1) {
          TableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:self.lastRow inSection:0]];
          [cell backToOrginPoint];
          self.lastRow = -1;
          return;
      }
  
      NSLog(@"cell 被点击了");
  }
  

• 最后一点不要忘了，那就是我们添加的 拖动手势 会与 tableView 的滚动手势冲突，感觉像是拖不动似的，这时需要我们引入手势的代理，并实现方法

  #pragma mark - UIGestureRecognizerDelegate
  - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer  shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
      return YES;  //告知各手势识别器，它们可以同时工作。
  }
  

至此功能基本上实现了，细心的话也许能够发现，拆解6并没有实现，虽然有点模糊的想法，但是觉得效果并不是很好，而且这里取巧了一点，就是将 cell 的 selectionStyle 设为 none 了，否则点击 cell 的时候会透出地下三个按钮的标题。
对比 QQ 的消息页面，感觉还是不太一样的，感觉他用的就像是系统的“滑动删除”，因为他的动画效果和“删除”按钮出现和消失的时机都是相同的，如果有大神知道他的实现方式，请不吝赐教。
代码存在的漏洞之处，欢迎指正。

效果图

最后来一发效果图（我果然还是图控，没图总感觉少了点啥 ）。

QQ2.gif

代码请戳这里。
参考请点击链接。