这篇博文主要讲表情发送的一些东西。
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;
}