模仿 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

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