类似微信语音上滑取消，下滑发送的效果实现

 
 

  
  
今天周五，本周工作终于完成了。早上来公司，把过去这几个月做的东西整理整理，写几篇博客。
上篇文章写了讯飞语音听写自定义UI的实现，这里讲一下具体实现中的一些交互功能的实现。
类似于微信语音的上滑取消，下滑发送。你可以用手势来做，也可以用按钮的点击事件来做。我这里介绍一下按钮的点击事件做法，因为个人觉得手势虽好，但是如果当前 页面有其他手势的话，难免会有冲突，所以用按钮来实现是最为简单的。
代码如下：

  
  
    UIButton *btnSpeak = [[UIButton alloc]init];
    [voiceView addSubview:btnSpeak];
    btnSpeak.backgroundColor = [UIColor whiteColor];
    [btnSpeak setTitle:@"按住 说话" forState:UIControlStateNormal];
    [btnSpeak setTitle:@"松开 结束" forState:UIControlStateHighlighted];
    [btnSpeak setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    btnSpeak.titleLabel.font = [UIFont systemFontOfSize:17];
    btnSpeak.layer.cornerRadius=5;
    btnSpeak.layer.borderColor=[UIColor colorWithRed:230/255.0 green:233/255.0 blue:231/255.0 alpha:1.0].CGColor;
    btnSpeak.layer.borderWidth=1;
    btnSpeak.layer.masksToBounds=YES;
    [btnSpeak mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(voiceView);
        make.left.equalTo(voiceView).offset(15);
        make.height.equalTo(@46);
        make.width.equalTo(@(ScreenW-65));
    }];
    UIButton *keyBoardBtn = [[UIButton alloc]init];
    [voiceView addSubview:keyBoardBtn];
    [keyBoardBtn setImage:[UIImage imageNamed:@"keyBoard"] forState:UIControlStateNormal];
    [keyBoardBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(btnSpeak.mas_right);
        make.right.equalTo(voiceView);
        make.centerY.equalTo(voiceView);
        make.height.equalTo(voiceView);
    }];
    //添加点击事件
    //开始监听用户的语音
    [btnSpeak addTarget:self action:@selector(touchSpeak:) forControlEvents:UIControlEventTouchDown];
    //开始停止监听 并处理用户的输入
    [btnSpeak addTarget:self action:@selector(stopSpeak:) forControlEvents:UIControlEventTouchUpInside];
    //取消这一次的监听
    [btnSpeak addTarget:self action:@selector(cancelSpeak:) forControlEvents:UIControlEventTouchUpOutside | UIControlEventTouchCancel];
    //显示上划取消的动画
    [btnSpeak addTarget:self action:@selector(remindDragExit:) forControlEvents:UIControlEventTouchDragExit];
    //显示下滑发送的动画
    [btnSpeak addTarget:self action:@selector(remindDragEnter:) forControlEvents:UIControlEventTouchDragEnter];
  
  
此思路就是吃透了UIButton的各种点击事件和状态的表现后想出来的,完美使用。