欢迎大家访问我的个人博客 http://www.gengzhibo.com/2018/05/05/Android自定义view之emoji键盘/
主要还是最近做了一个 emoji 键盘的需求, 感觉可以简单封装一下顺便整理下 emoji 相关的知识
Android 中的 emoji
有关 Android 中 emoji 的文章有很多了, 我就不简单罗列相关内容了, 在这记录一下开发过程中遇到的一些坑...
首先是 TextView 首次绘制中 emoji 的颜色会偏浅, 官方的 demo 中依然存在这种问题...
(详情可以参考 https://github.com/googlesamples/android-EmojiCompat) , 上图中可以看到其中两个 Textview 的 emoji 颜色偏浅, 但是 EditView 中就不会出现这个问题...
解决方法的话暂时有两种, 一是针对不能引入 EmojiCompat 的项目, 可以考虑针对 textview 多次绘制, 但是对此 Textview 设置 background 的时候会失效... 二是可以针对可以引入 EmojiCompat 的项目, 但是简单的直接设置 EmojiCompat 仍然不好用... 通过自定义 View 即 demo 中的 Custom TextView 即刻解决这个问题
原生 emoji 的适配问题
不同版本的系统中适配的 emoji 是不同的, 一般来说高版本兼容低版本的 emoji.
另一个就是国产 rom 的问题, 部分 rom 中会将 android 的 emoji 图标替换成 ios 的 emoji. 会给人一种也没什么差别的错觉... 但是, 好歹都适配了啊, 部分图标还是 android 的 emoji 风格, 就很迷
emoji 的大小问题
emoji 的大小... 是跟随 TextView 的 textSize, 所以要想调整 emoji 的大小, 需要更改 textView 的 textSize 值.
EditText 的删除问题
键盘嘛, 需要对 editText 进行操作, 其中就包括了删除的操作, 然而, emoji 有的占两个字节, 有的占一个自己. 所以再删除的时候需要验证内容再删除对应的字节
简单来说, 及时更新设备或者开发工具的话 emoji 展示并不是什么问题, 愿望是美好的, 现实却总是不进如人意.(只有我觉得 Android 的果冻人 emoji 看着还可以么...)
Emoji 键盘
先展示效果图,
一个 emoji 键盘的主要功能都实现了, 包括了 emoji 的输入及删除, 多个 emoji 标签页之间的切换及底部滑动指示器的更改. 需要展示底部标签页超过屏幕范围的效果, 所以展示的部分数据是重复的.
设计过程
最初的设计中是没有底部多个 emoji 标签页的, 感觉功能有点单薄, 所以后期加入了底部过个 item 切换的功能
整个 View 设计如下,
emoji 展示与选择区域: 主要是用于展示 emoji 的内容, 这里使用了 ViewPager, 在初始化的时候会对 emoji 展示列表进行计算, 最终填充到 ViewPager 中. 对于整个 View 来说, 在初始化 ViewPager 的 Adapter 的时候就将所有的 emoji 填入, 在滑动或者选择底部 item 的时候会根据初始化中计算好的各个页面的展示信息控制指示器及底部 item.
ViewPager 的指示器: 实际上是一个 LinearLayout, 根据设置展示对应的数量及位置, 此处展示的是当前 item 的相关指示器, 当选择新的 item 或者滑动到新的 item 后, 指示器的数量会进行更新, 而当上面的 ViewPager 滑动却没有切换到新的 item 的时候只是更新指示器指示的内容.
emoji 标签部分: 使用了一个 RecycleView, 是因为当标签比较多时候滑动效果和定位展示比较方便.
设计缺陷
暂只支持 emoji 选择, 不能提供自定义图片输入 (感觉更改完了就不只是 emoji 输入器了, 下个就做这个了)
底部指示器现在更新的过程中是全部移除 view 再根据新参数设置新 view 没有动画效果
底部 emoji 标签页再当选择的 item 手动滑动超出屏幕显示外后, 再次滑动顶部 ViewPager 页面, 底部 item 复位动画有点僵, 仍有优化的余地
代码实现
emoji 展示与选择区域:
主要是针对顶部 ViewPager 的 Adapter 处理
EditText 文本控制
再将 EditText 绑定到 view 中后, 对 view 进行操作后会更改 EditText 的内容
需要注意的是再删除的时候是要先验证后两位是否是一个完整 emoji, 如果是则删除后两个字节, 反之则只删除一个字节.
底部标签页指示器
简单的一个 LinearLayout 来展示指示器, 没有切换的动画效果, 可以优化一波.
底部标签选择器
通过一个 RecycleView 来实现的底部标签选择器
监听 ViewPager 滑动及底部标签选择
添加 ViewPager 的 addOnPageChangeListener 方法来监听滑动及底部标签选择的点击回调
相关代码可以访问我的 GitHub https://github.com/clwater/EmojiKeyboard 来获取, 欢迎大家 start 或者提供建议.
来源: https://juejin.im/post/5aed561df265da0b7156284e