类似qq聊天表情实现

来源：互联网发布：remote desktop mac 8 编辑：程序博客网时间：2024/05/16 02:12

android qq上有这样的功能，点击表情，然后输入框EditText上显示表情，博客，论坛上也有这样的功能。有些是显示qq表情的代表符号洳：“：（）”这样的符号

先是从网上搜索了一下，有好几种，不过我采取ImageSapn和SpannableString来实现的。

像qq一样，先点击表情按钮，弹出表情选择view（GridView）

然后点击某一个表情，EditText上显示表情图片。

看代码：

传入参数：position，是表情选择GridView的position

ChatEmotion 是一个内部类，封装了图片R.drawable.xxxx数组EMO_IMAGES，还有每个聊天表情的文字代表EMO_SYMBOLS：（）#@：；这样一堆符号

这个函数返回的是SpanableString

       private SpannableString getImageSpannableString(int position){

       Drawable drawable = getResources().getDrawable(ChatEmotion.EMO_IMAGES[position]);
       drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
       //需要处理的文本，ChatEmotion.EMO_SYMBOLS[position]是需要被替代的文本
       SpannableString ss = new SpannableString(ChatEmotion.EMO_SYMBOLS[position]);
       //要让图片替代指定的文字就要用ImageSpan
       ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
       //开始替换，注意第2和第3个参数表示从哪里开始替换到哪里替换结束（start和end）
       //最后一个参数类似数学中的集合,[5,12)表示从5到12，包括5但不包括12
       Log.d(TAG, String.valueOf(ChatEmotion.EMO_SYMBOLS[position].length()));
       ss.setSpan(imageSpan, 0, ChatEmotion.EMO_SYMBOLS[position].length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
       return ss;
   }

然后调用EditText的setText（getImageSpannableSting（position））就可以显示表情了，是不是很兴奋，哈哈

在GridView也就是表情选择View，表象上看上去像个dialog，其实是个GridView

mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

           @Override
           public void onItemClick(AdapterView<?> parent, View view,
                   int position, long id) {
               // TODO Auto-generated method stub
               int currentPos = mEditView.getSelectionStart();
                SpannableStringBuilder ssb = new SpannableStringBuilder();
             ssb.append(getImageSpannableString(position));
             mEditView.getText().insert(currentPos, SpannableString.valueOf(ssb));
               mEditView.invalidate();
           }

       });

打工告成