美文网首页
android 仿微信语音界面

android 仿微信语音界面

作者: heheworld | 来源:发表于2020-06-13 00:53 被阅读0次

    最近有个需求,语音识别成文字并发送,比较了一圈,微信发语音的效果比较适合我们的场景。
    但搜了一圈只有老版的效果,只能自己弄了,弄完整理下,希望大家一起帮忙查缺补漏。

    代码链接点这里

    效果基于自定义view来实现的。

    主要机制流程实现大概如下
    1.聊天页面,点击按钮,监听事件 分发给 VoiceView(自定义的view, 全屏,透明度20-30样子)

    1. 根据event 坐标 ,在VoiceView 绘制对应的图
    2. 手指松开时候,根据语音引擎识别的文案,VoiceView中add一个EditText
    3. 点击对应的区域,发送或者取消

    遇到的一些坑

    1. 绘制底部的弧,本想尝试通过 PorterDuff.Mode 取 rect 和 arc的交集的,但没成功(原因暂未排查),
      只能退求其次手动绘制圆来代替。
    2. touch事件move时,左右两个圆圈,里面的icon是跟随着下面的圆弧度rotate过的,
      角度是通过path换算出来的(PathMeasure这个需要了解下)
      path的画圆或弧时,起点是对应的rect右边的中点
    3. 添加EditText时候,不展示出来,因为onLayout未作布局。

    已知问题

    1. 没作适配,(试了手头三星,华为,小米几款机器还行)
    2. 没作动效
    3. 没有美工切图,用的都是官方提供的矢量图
    4. 没深度测试,hiahiahia ☺

    没集成语音相关的,效果图 如下

    z3dfi-znd28.gif

    相关文章

      网友评论

          本文标题:android 仿微信语音界面

          本文链接:https://www.haomeiwen.com/subject/kyqntktx.html