微信表情

微信表情实现

在我们的聊天应用中，发送表情消息是非常常见的操作，一直好奇要怎么去实现这个功能，于是花时间了解了一下。废话不多说，走起！

首先我们研究一下这一块UI区域，布局实现比较简单，上面LinearLayout放EditText/ImageView/Button,中间可滑动的ViewPager,下面LinearLayout。
就功能实现也不复杂，将所有切好的表情图片放在资源目录下，使用时引入即可；下面的点可以在ondraw()里面画出来，相对麻烦的一点是点击表情图片，在EditText上面能实现图文混排，下面是实现：

public void onEmotionItemClick(String emoName,int id) {

        Drawable drawable = getResources().getDrawable(id);
        emoName = "["+emoName+"]";
        // 可以实现图文混排的类
        SpannableStringBuilder builder = new SpannableStringBuilder(emoName);
        // 设置图片的大小
        int size = getResources().getDisplayMetrics().densityDpi;
        drawable.setBounds(0, 0, size, size);
        // 包装下图片
        ImageSpan span = new ImageSpan(drawable);
        // 把文字替换成图片
        builder.setSpan(span, 0, emoName.length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE);

        Editable originalText = mEditText.getText();
        // 获取光标的位置
        int start = mEditText.getSelectionStart();
        if (start < originalText.length()) {

            // 光标不再末尾
            originalText.insert(start, builder);
        }else {

            originalText.append(builder);
        }
    }

    public void onDeleteItemClick() {

        // 删除事件，模拟实体点击的删除键
        dispatchKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL));
        dispatchKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_DEL));
    }

在发送表情后，消息列表也要显示图文混排的消息，也是通过上面类似的处理方法。

---

ps:动态表情还在研究，请看后续文章！