Android基于XMPP的即时通讯3-表情发送

这篇博文主要讲表情发送的一些东西。

参考：Android基于XMPP的即时通讯1-基本对话

1、准备好资源文件

采用的是emoji的表情，我打包好了，下载地址：http://files.cnblogs.com/files/pear-lemon/drawable.zip

2、表情布局文件layout_send_emotion.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_send_emotion"
    android:layout_width="match_parent"
    android:layout_height="260dp"
    android:orientation="vertical"
    android:visibility="gone" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pager_emotion"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/ll_emotion_dot"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal" >
    </LinearLayout>

</RelativeLayout>

3、用于和图片资源对应的字符array.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string-array name="emoji">
        <item>01</item>
        <item>02</item>
        <item>03</item>
        <item>04</item>
        <item>05</item>
        <item>06</item>
        <item>07</item>
        <item>08</item>
        <item>09</item>
        <item>10</item>
        <item>11</item>
        ...
 </string-array>

</resources>

4、获取表情资源文件（资源文件命名为"emoji_XX"，所以key我自定义一个静态AppDefine.EMOJI = "emoji_"）

private List<Integer> emotionImgs;//表情图片

private String[] emotionText;//表情文字

String packageName = activity.getPackageName();
Resources resource = activity.getResources();

emotionImgs = new ArrayList<Integer>();
//获取所有的表情
emotionText = resource.getStringArray(R.array.emoji);
for(String emution :emotionText) {
    String key = AppDefine.EMOJI + emution;
    int resId = resource.getIdentifier(key, "drawable", packageName);
    emotionImgs.add(resId);
}

5、初始化views

ViewPager viewPager = (ViewPager) findViewById(R.id.vp_pager_emotion);
LinearLayout llDots = (LinearLayout) findViewById(R.id.ll_emotion_dot);
//初始化表情格子
for(int i = 0;i < pageCount;i ++){
    gridViews[i] = new GridView(activity);
    gridViews[i].setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
    gridViews[i].setNumColumns(5);
    gridViews[i].setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
    gridViews[i].setGravity(Gravity.CENTER);
    gridViews[i].setAdapter(new EmotionGridAdapter(activity, emotionImgs, pageCount, i));
    gridViews[i].setOnItemClickListener(mOnItemClickListener);
    gridViews[i].setSelector(new ColorDrawable(Color.TRANSPARENT));
}
//初始化下面的点
for(int i=0;i<pageCount;i++){
    viewDots[i]=new View(activity);
    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(10, 10);
    lp.setMargins(10, 0, 10, 0);
    viewDots[i].setLayoutParams(lp);
    if(i!=currentIndex){
        viewDots[i].setBackgroundResource(R.drawable.icon_dot_normal);
    }else{
        viewDots[i].setBackgroundResource(R.drawable.icon_dot_focused);
    }
    llDots.addView(viewDots[i]);
}
viewPager.setAdapter(new EmotionPagerAdapter(gridViews, pageCount));

6、界面上边的内容没什么难度，写好基本这个效果

7、处理点击事件，加载到发送框里边

OnItemClickListener mOnItemClickListener = new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) {
        // 获取图片对应的字符，资源ID
        String emotion = AppDefine.EMOJI + emotionText[currentIndex * 15 + position];
        int resId = emotionImgs.get(currentIndex * 15 + position);
        Drawable drawable = getResources().getDrawable(resId);
        int length = (int) getResources().getDimension(R.dimen.emotion_icon);
        drawable.setBounds(0, 0, length, length);
        // 根据字符创建SpannableString
        SpannableString spannable = new SpannableString(emotion);
        // 根据drawable创建ImageSpan
        ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
        spannable.setSpan(span, 0, emotion.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        // 设置输入框内容
        etSend.append(spannable);
        etSend.setSelection(etSend.getText().toString().length());
    }
};

8、列表中也要显示表情，做法如下：

private final String[] emotionText;//表情文字

private final int [] emotionImgs;//表情图片

private final HashMap<String, Integer> emotionToText;//文字图片对应

private final Pattern mPattern;//正则匹配

一步一步初始化需要的数据

String packageName = context.getPackageName();
Resources resource = context.getResources();
emotionText = context.getResources().getStringArray(R.array.emoji);
int length = emotionText.length;
emotionImgs = new int[length];
emotionToText = new HashMap<String, Integer>();
for(int i = 0;i < length;i ++) {
    String key = AppDefine.EMOJI + emotionText[i];
    int resId = resource.getIdentifier(key, "drawable", packageName);
    emotionImgs[i] = resId;
    emotionToText.put(key, resId);
}

初始化正则匹配字符（百度找的）

StringBuilder patternString = new StringBuilder(emotionText.length * 3);
patternString.append('(');
for (String str : emotionText) {
        patternString.append(Pattern.quote(AppDefine.EMOJI + str));
        patternString.append('|');
}
patternString.replace(patternString.length() - 1,
                patternString.length(), ")");
mPattern = Pattern.compile(patternString.toString());

主要的文字转换图片方法

public SpannableString textToEmotion(Context context, String text){
    Matcher matcher = mPattern.matcher(text);
    SpannableString spannable = new SpannableString(text);
    while (matcher.find()) {//找到匹配的字符
        String findText = matcher.group();
        //根据对应关系找到资源ID
        int resId = emotionToText.get(findText);
        Drawable drawable = context.getResources().getDrawable(resId);
        int length = (int) context.getResources().getDimension(R.dimen.emotion_icon);
        drawable.setBounds(0, 0, length, length);
        ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
        spannable.setSpan(span, matcher.start(), matcher.end(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    }
    return spannable;
}

源码送上：https://github.com/PearLemon/XmppTest.git