在app中岭粤,我們經常可以看到評論中帶有表情(非emoji)特笋,如下圖紅色框處所示:
某條評論中有很可愛的表情
這些表情是怎么實現(xiàn)的呢绍在?
首先這些表情并不是emoji表情,是一些自定義的表情(也就是一些圖片)雹有,通過解壓apk文件偿渡,發(fā)現(xiàn)這些表情全部存放在apk安裝包中,嗯霸奕。溜宽。。本地加載质帅。适揉。。
打印一下評論的接口煤惩,看看評論內容是個什么格式
圖中第一個表情
圖中第二個表情
可以看到嫉嘀,他是直接用[xxx]來表示評論字符串中的表情的。那問題就變成如何把評論中的[xxx]還原成表情就可以了魄揉。
首先剪侮,肯定有一個對應關系表,比如[大笑] 對應的大笑這張圖片
對應Map
有了原始的評論內容核對應Map洛退,如何在文本中添加圖片呢瓣俯?看這里,大佬的文章解析的很清楚了:
用SpannableString打造絢麗多彩的文本顯示效果
這里我們用到的是:ImageSpan
由于很多地方會用到表情的轉換兵怯,因此封裝成一個工具類彩匕,直接上代碼:
public class CommentEmojiUtil {
private static Map<String, Integer> emojiMap;
/**
* 判斷表情的正則表達式 [中英文]
*/
private static final String EMOJI = "\\[[\\u4e00-\\u9fa5a-zA-Z]+]";
/**
* 獲取含有表情的spannableString
*
* @param commentString 服務器傳過來的原始string
* @return 處理過的string
*/
public static SpannableString getEmojiString(String commentString) {
SpannableString spannableString = new SpannableString(commentString);
Pattern pattern = Pattern.compile(EMOJI);
Matcher matcher = pattern.matcher(spannableString);
boolean result = matcher.find();
//循環(huán)直到匹配不到
while (result) {
//matcher.group():匹配到的字符串,作為key媒区,獲取對應的圖片
Drawable drawable = ContextCompat.getDrawable(MyApplication.getContext(), emojiMap.get(matcher.group()));
drawable.setBounds(0, 0, 42, 42);
ImageSpan imageSpan = new ImageSpan(drawable);
//matcher.start() matcher.end()是匹配到的字符串在原始字符串中的起始位置驼仪,進行替換
spannableString.setSpan(imageSpan, matcher.start(), matcher.end(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
result = matcher.find();
}
return spannableString;
}
static {
emojiMap = new HashMap<>();
//第一頁
emojiMap.put("[捂臉]", R.mipmap.emoji1_1_1);
emojiMap.put("[大笑]", R.mipmap.emoji1_1_2);
emojiMap.put("[呲牙]", R.mipmap.emoji1_1_3);
emojiMap.put("[愛慕]", R.mipmap.emoji1_1_4);
emojiMap.put("[流淚]", R.mipmap.emoji1_1_5);
emojiMap.put("[害羞]", R.mipmap.emoji1_1_6);
emojiMap.put("[靈光一閃]", R.mipmap.emoji1_1_7);
......其他圖片
}
}
直接在setText中調用寫好的工具類
tvComment.setText(CommentEmojiUtil.getEmojiString("原始的評論字符串[大笑]"));
效果圖
完成~掸犬!