TextView+Emoji

背景

21世纪最受欢迎的交流方式------------表情！

思路

1. 解析表情
2. 匹配表情
3. 显示表情

解析表情，使用正则表达式解析表情规则。
匹配表情，将表情匹配我们本地的资源 。
显示表情，有两种方式可以为TextView增加表情显示，一种是使用SpannableString配置ImageSpan，另一种是使用Html的方式。

开始

规则：#(文字或符号)

粘贴代码有bug，只能粘贴图了.png

就这上面的图，结果把

Paste_Image.png

转换成了

Paste_Image.png

如下：

Pattern p = Pattern.compile("(#\\(([^#\\(\\) ]*?)\\))");
Matcher m = p.matcher(originString);

注意：
1、对于()要使用\\转义，因为()在Pattern里是关键符号，表示分组，如上最外层的括号就是一个分组，对于正则表达式，每次使用的时候都得查下api，相关定义查阅。
2、请已第一张图为准（还是agroup好用哇~）。

值得提一下的是，Matcher的方法有个groupCount，用来获取表达式有多少个分组，这个分组不是匹配正则的数量分组，而是前面说的以()括起来的分组，千万别进入误区。

匹配：我们将表情匹配对应本地的资源，比如#(高兴)对应成该表情的本地路径或资源名称

我将表情存放到assets文件夹中，表情对应路径按照有序规则存放，这样方便遍历赋值。

private String[] emojiTextArray = {"呵呵", "哈哈", "吐舌", "啊？", "酷"};
<string-array name="emoji_text_array">
    <item>呵呵</item>
    <item>哈哈</item>
    <item>吐舌</item>
    <item>啊？</item>
    <item>酷</item>
</string-array>

我这里简便的硬编码了，最好抽成资源到string.xml中。

private final String PREFIX = "emoji/face/image_editoricon";
private final String SUFFIX = "@2x.png";

由于我的资源规则一定的，所以我定义规则，方便遍历。

public List<EmojiData> getEmojiList() {
    List<EmojiData> emojiDatas = new ArrayList<>();
    EmojiData emojiData;
    int index = 1;
    for (String text : emojiTextArray) {
        emojiData = new EmojiData();
        emojiData.text = text;
        emojiData.path = PREFIX + index + SUFFIX;
        emojiDatas.add(emojiData);
        index++;
    }
    return emojiDatas;
}

一定要保证你的字符串资源与存放到本地的资源数量相同，否则会出现找不到资源的问题，这里最好也增加对应本地资源数量的判断。

显示

ImageSpan

主要是采用下标及drawable替换下标范围内的文字为drawable。

List<EmojiData> emojiDatas = getEmojiList();
    String key;

    SpannableString destString = new SpannableString(originString);
    while (m.find()) {
        key = originString.substring(m.start(), m.end());
        String innerKey = key.substring(2, key.length() -1);
        ImageSpan imageSpan = null;
        for (EmojiData emojiData : emojiDatas) {
            if (innerKey.equals(emojiData.text)) {
                Drawable drawable =          getImageFromAssetsFile(emojiData.path);
                if (drawable != null) {
                    drawable.setBounds(0, 0, BaseApplication.getInst().getResources().getDimensionPixelSize(R.dimen.ds40),
                            BaseApplication.getInst().getResources().getDimensionPixelSize(R.dimen.ds40));
                    imageSpan = new ImageSpan(drawable);
                }
                break;
            }
        }
        if (imageSpan != null) {
            destString.setSpan(imageSpan, m.start(), m.end(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        }
    }

Html

主要是使用html的<img>标签

List<EmojiData> emojiDatas = getEmojiList();
    String key;
    Map<String, String> map = new HashMap<>();
    String value = "";
    while (m.find()) {
        key = originString.substring(m.start(), m.end());
        String innerKey = key.substring(2, key.length() -1);
        for (EmojiData emojiData : emojiDatas) {
            if (innerKey.equals(emojiData.text)) {
                value = key.replace(key, "![](" + emojiData.path + ")");
                break;
            }
        }
        map.put(key, value);
    }

    for (String tempKey : map.keySet()) {
        originString = originString.replace(tempKey, map.get(tempKey));
    }

    CharSequence destString = Html.fromHtml(originString, new Html.ImageGetter() {
        @Override
        public Drawable getDrawable(String source) {
            Drawable drawable = getImageFromAssetsFile(source);
            drawable.setBounds(0, 0, BaseApplication.getInst().getResources().getDimensionPixelSize(R.dimen.ds40),
                    BaseApplication.getInst().getResources().getDimensionPixelSize(R.dimen.ds40));
            return drawable;
        }
    }, null);

两者的差别在于Html多了一步解析的过程。