Emoji开源项目解读（二）自定义表情

标签：android   移动   

介绍

上一节呢，我们解读了一个系统Emoji表情，这节呢， 我们谈谈自定义表情，如QQ、微信等，正好前两天看到一个仿QQ的一个应用，虽然还是有许多需要完善的地方， 不过对于自定义Emoji表情功能，做的也是比较成熟了，这里要谢谢白玉梁同学，下面我带领大家来一起学习一下他的这个功能实现。

根据上一节的分析呢，这节我就简要的直奔主题说了，页面布局、架构和流程都不说了。 感兴趣的可以自己看代码。

源码剖析

咱们先来看看他的assets资源文件夹

g文件夹放的是gif图，如

p文件夹放的是静态图

再来看看怎么添加表情

当选中GridView的某一个表情的时候，触发事件

// 单击表情执行的操作
gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,int position, long id) {
try {
String png = ((TextView) ((LinearLayout) view).getChildAt(1)).getText().toString();
if (!png.contains("_del")) {// 如果不是删除图标
ExpressionUtil.insert(editText,ExpressionUtil.getFace(context,png));
} else {
ExpressionUtil.delete(editText);
}
} catch (Exception e) {
e.printStackTrace();
}
}
});

ExpressionUtil.insert(editText,ExpressionUtil.getFace(context,png));

先来看看是怎么组装EditText的样式的呢？

public static SpannableStringBuilder getFace(Context mContext,String png) {
SpannableStringBuilder sb = new SpannableStringBuilder();
try {
/**
 * 经过测试，虽然这里tempText被替换为png显示，但是但我单击发送按钮时，获取到輸入框的内容是tempText的值而不是png
 * 所以这里对这个tempText值做特殊处理
 * 格式：#[face/png/f_static_000.png]#，以方便判斷當前圖片是哪一個
 * */
String tempText = "[" + png + "]";
sb.append(tempText);
sb.setSpan(
new ImageSpan(mContext, BitmapFactory
.decodeStream(mContext.getAssets().open(png))), sb.length()
- tempText.length(), sb.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
 
} catch (Exception e) {
e.printStackTrace();
}
 
return sb;
}

这是设置好字符串后，又设置了ImageSpan样式，在指定的位置设置图片样式。

然后就是设置EditText的CharSequence 了

/**
 * 向输入框里添加表情
 * */
public static void insert(EditText input,CharSequence text) {
int iCursorStart = Selection.getSelectionStart((input.getText()));
int iCursorEnd = Selection.getSelectionEnd((input.getText()));
if (iCursorStart != iCursorEnd) {
((Editable) input.getText()).replace(iCursorStart, iCursorEnd, "");
}
int iCursor = Selection.getSelectionEnd((input.getText()));
((Editable) input.getText()).insert(iCursor, text);
}

然后来看看删除表情

ExpressionUtil的delete方法

/**
 * 删除图标执行事件
 * 注：如果删除的是表情，在删除时实际删除的是tempText即图片占位的字符串，所以必需一次性删除掉tempText，才能将图片删除
 * */
public static void delete(EditText input) {
if (input.getText().length() != 0) {
int iCursorEnd = Selection.getSelectionEnd(input.getText());
int iCursorStart = Selection.getSelectionStart(input.getText());
if (iCursorEnd > 0) {
if (iCursorEnd == iCursorStart) {
if (isDeletePng(input,iCursorEnd)) {
String st = "[p/_000.png]";
((Editable) input.getText()).delete(
iCursorEnd - st.length(), iCursorEnd);
} else {
((Editable) input.getText()).delete(iCursorEnd - 1,
iCursorEnd);
}
} else {
((Editable) input.getText()).delete(iCursorStart,
iCursorEnd);
}
}
}
}

这个方法的备注要明确说明了，删除是删除图片占位的字串，这里有3种情况，第1种是删除游标内的内容，这个比较简单，直接取得游标的起止位置，删除掉就好了，第2种是删除普通文字，这个只要删除最后一个字符就好了， 最后一种就比较复杂了，是删除表情，大家来想一下，是不是首先得知道我要删除的是不是表情吧？

这里用到了ExpressionUtil的isDeletePng方法

/**
 * 判断即将删除的字符串是否是图片占位字符串tempText 如果是：则讲删除整个tempText
 * **/
public static boolean  isDeletePng(EditText input,int cursor) {
String st = "[p/_000.png]";
String content = input.getText().toString().substring(0, cursor);
if (content.length() >= st.length()) {
String checkStr = content.substring(content.length() - st.length(),content.length());
String regex = "\\[[^\\]]+\\]";
Pattern p = Pattern.compile(regex);
Matcher m = p.matcher(checkStr);
return m.matches();
}
return false;
}

如果检查是表情的话，紧接着就是删除了，也就是删除的起止位置，结束位置知道了， 开始位置就是结束位置减去表情格式字符数就是喽。

到目前为止呢， 自定义表情的实现分析就已经结束了，结合上一节的系统表情，Emoji表情的分析就到此结束了。后续大家如果还有什么问题，或者有不正确的地方， 可以提出来，共同探讨。

项目地址

白玉梁的专栏 http://blog.csdn.net/baiyuliang2013/article/details/43073861

Emoji开源项目解读（二）自定义表情

标签：android   移动   

原文地址：http://blog.csdn.net/wu928320442/article/details/43561507