微信表情实现
在我们的聊天应用中,发送表情消息是非常常见的操作,一直好奇要怎么去实现这个功能,于是花时间了解了一下。废话不多说,走起!
首先我们研究一下这一块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:动态表情还在研究,请看后续文章!