IM项目中的自定义小表情实现

Posted 2023-04-24

参考技术A

在im项目（android）中，用户发消息，喜欢在文字中嵌入一些小表情，以表达发送者当时的情感。除了系统输入法自带的emoji表情（emoji其实是特殊的文字）外。项目希望带一些更漂亮，带产品特色文化的自定义小表情（小图片）。

图片嵌入在文字中显示，很明显可以使用ImageSpan去实现该效果。

效果如图：

实现上，主要问题是，实现文字与表情的转换。因此需要定义一套对应关系。

这里采用类似微信的实现，[key]对应表情。比如： [微笑] 对应 😊。

工具类：

主要就是做一个转换功能。同时需要考虑一下性能优化，否则效率低就会卡顿。

PS：这里优化了 查询转换策略 和 Drawable复用策略，供参考。

注 ：Spannable有关的操作，少用String。使用CharSequence，因为不一定是String。用 SpannableString.valueOf(text) 代替 new SpannableString(text)

在TextView上使用，也写个BindingAdapter方法。

注：其中 TextUtils.ellipsize(emo, paint, avail, TextUtils.TruncateAt.END) 是为了解决表情在单行textView显示不下时显“...”.的问题。直接默认用TextView的 ellipsize 属性，对表情（ImageSpan）无效，会截成半个。

表情要在输入框中显示。根据输入code，自动转换成表情（ImageSpan）。

方案1：给EditView设置监听，在文字变化后将文字做个转换。这样效率超低，输入越多越卡。否决！

方案2：根据具体变化的文本设置转换。

注 ：当前输入的东西（可能是复制过来的多个字符）。可能会影响到前面或后面的几个字符。

表情选择框操作 ：

删除：模拟退格，表情需要整个整个删。

插入：将code插入到光标末尾。

转发到微信，有些表情微信里没有对应。转换成emoji代替。

要点：

iOS自定义表情的实现

现在很多App都有自己的自定义的表情，客户端可能要实现自己定表情的选择、发送和显示，这里我介绍一种简单的自定义表情的实现思路和代码。
以下介绍基本可以实现聊天中对自定义表情的需求，可结合下图来理解：

资源准备：

• 自定义表情图片的命名。
• 每个自定义表情的意思。
• emtionMeans.plist：key--表情选择器每个表情对应的tag值，value--每个表情的意思。
• emtions.plist：key--每个表情的意思，value--每个表情对应的图片。

实现逻辑：

• 初始化表情选择器，主要根据以上两个plist表格相互转换来获取需要的东西。
  创建一个EmojiView继承自UIVIew，主要代码如下：
  

实例化一个EmojView对象即可得到一个自定义表器的选择器。
接下来我们需要一个辅助器，用来判断某个字符串是不是表情字符串以及某一串字符串中是否包含表情。因为现实表情需要用到富文本，一般对内存和性能的消耗比较大，对于不含表情的字符串我们还是直接UILabel来显示更好些，特别是像聊天这样的布局。显示某条聊天消息之前，我们先判断该消息中是否包含表情字符串，在这里我用的是[]来识别的，如果包含[]，我们再进一步通过emtionMeans.plist中表情的含义来对比，看这个[]中的内容是否属于表情，如果这两者都满足，则表示该消息中含有自定义表情。
辅助器主要代码：

最后我们需要一个可以显示我们的表情的Label，iOS自带的UILabel显然不能直接用，这里我用到了一个第三方MLEmojiLabel，用它来做自定义表情的展示。直接用也会有问题，因为自定义表情的资源不同，要显示自己的话需要做修改，另外也做了一些优化（直接从网上下载的第三方在返回经过表情识别处理的Attributed字符串的方法中对表情字符串的识别度不是很精准）。
不过调用很方便，实例化MLEmojiLabel直接调用下面的方法即可显示自己的自定义表情：

[self.emojiLabel setEmojiText:self.emojiString];

做聊天的话可能需要动态改变Label的高度，需要调用上面的方法之后调用一下下面的方法即可：

CGSize textSize = [self.emojiLabel sizeThatFits:CGSizeMake(SCREEN_WIDTH - 160, size.height)];

以上的代码可根据固定的宽度来获取当前的高度。
完整代码点击这里获取。
demo效果：