最近有个需求,语音识别成文字并发送,比较了一圈,微信发语音的效果比较适合我们的场景。
但搜了一圈只有老版的效果,只能自己弄了,弄完整理下,希望大家一起帮忙查缺补漏。
效果基于自定义view来实现的。
主要机制流程实现大概如下
1.聊天页面,点击按钮,监听事件 分发给 VoiceView(自定义的view, 全屏,透明度20-30样子)
- 根据event 坐标 ,在VoiceView 绘制对应的图
- 手指松开时候,根据语音引擎识别的文案,VoiceView中add一个EditText
- 点击对应的区域,发送或者取消
遇到的一些坑
- 绘制底部的弧,本想尝试通过 PorterDuff.Mode 取 rect 和 arc的交集的,但没成功(原因暂未排查),
只能退求其次手动绘制圆来代替。 - touch事件move时,左右两个圆圈,里面的icon是跟随着下面的圆弧度rotate过的,
角度是通过path换算出来的(PathMeasure这个需要了解下)
path的画圆或弧时,起点是对应的rect右边的中点 - 添加EditText时候,不展示出来,因为onLayout未作布局。
已知问题
- 没作适配,(试了手头三星,华为,小米几款机器还行)
- 没作动效
- 没有美工切图,用的都是官方提供的矢量图
- 没深度测试,hiahiahia ☺
没集成语音相关的,效果图 如下
网友评论