实现RichEdit（二）---实现服务器通信

前言：上一篇，我们说了如何实现了RichEdit，但现实中总会将消息发送到服务器保存起来，众所周知，服务器数据库是不可能保存图片的，所以我们要把图片转换成对应的字符保存在服务器，然后客户端在下载到服务器传来的字符以后，将对应的字符转换成图片，下面我讲讲在本地如何实现这个功能，只要这个懂了以后，对于服务器通信的东东难度不大，我就不再另写DEMO了；

例图：

实现功能：在EditText中输入表情和文字，在点击“显示在下面的TextView中”后，将EditText中的内容转换为文本，在下面的TextView中将此文本解析，显示出对应的图片；

 

这个例子是在上篇例子的基础上修改而来的，我这里只对修改的两个地方做下阐述：

一、点击表情GRIDVIEW中的某一项的监听器----gridViewFaceItemClickListener

[java]  view plain copy

1. /** 
2.  * 点击表情GRIDVIEW中的某一项的监听器 
3.  */  
4. private OnItemClickListener gridViewFaceItemClickListener = new AdapterView.OnItemClickListener() {  
5.   
6.     @Override  
7.     public void onItemClick(AdapterView<?> arg0, View view, int position,  
8.             long id) {  
9.         // TODO Auto-generated method stub  
10.         // 首先得到当前用户点击的表情的信息  
11.         Smile smile = smiles.get(position);  
12.         // 得到当前CURSOR位置  
13.         int cursor = ET_content.getSelectionStart();  
14.         Field f;  
15.         try {  
16.             // 根据资源名字得到Resource和对应的Drawable  
17.             f = (Field) R.drawable.class.getDeclaredField(smile.getName());  
18.             int j = f.getInt(R.drawable.class);  
19.             Drawable d = getResources().getDrawable(j);  
20.             d.setBounds(0, 0, 35, 35);// 设置表情图片的显示大小  
21.   
22.             // 显示在EditText中  
23.             String str = null;  
24.             int pos = position + 1;  
25.             if (pos < 10) {  
26.                 str = "f00" + pos;  
27.             } else if (pos < 100) {  
28.                 str = "f0" + pos;  
29.             } else {  
30.                 str = "f" + pos;  
31.             }  
32.             SpannableString ss = new SpannableString(str);  
33.             ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);  
34.             ss.setSpan(span, 0, str.length(),  
35.                     Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
36.             ET_content.getText().insert(cursor, ss);  
37.   
38.         } catch (Exception e) {  
39.             // TODO Auto-generated catch block  
40.             e.printStackTrace();  
41.         }  
42.   
43.     }  
44.   
45. };  

注意这里的修改位置：

[java]  view plain copy

1. String str = null;  
2. int pos = position + 1;  
3. if (pos < 10) {  
4.     str = "f00" + pos;  
5. } else if (pos < 100) {  
6.     str = "f0" + pos;  
7. } else {  
8.     str = "f" + pos;  
9. }  
10. SpannableString ss = new SpannableString(str);  

在上一篇中，我们在实例话String str="img";而这里实例化为了对应的表情图片的名字；这么做有什么用么；这就是SpannableString功能了，当我们用EditText.getText().toString()显示EditText中的字符时，那么对于图片是没有办法显示的，那怎么办，总不能不显示什么东东来替代图片的位置吧，而这里的传进SpannableString的str就是当调用EditText.getText().toString()时替代所要显示的图片的；

二、然后是OnCreate（）函数里

[java]  view plain copy

1. protected void onCreate(Bundle savedInstanceState) {  
2.     super.onCreate(savedInstanceState);  
3.     setContentView(R.layout.activity_main);  
4.   
5.     // 和 各个组件变量初始化  
6.     InitVariable();  
7.     // 初始化GridView,将其与Adapter绑定  
8.     InitGridView();  
9.       
10.     //表情显示图片点击监听  
11.     IV_face.setOnClickListener(faceClickListener);  
12.       
13.     //监听点击了表情的哪一项  
14.     GV_faceView.setOnItemClickListener(gridViewFaceItemClickListener);  
15.       
16.     //EditText点击监听  
17.     ET_content.setOnClickListener(EditContentClickListener);  
18.       
19.       
20.     Button btn=(Button)findViewById(R.id.getText);  
21.     final TextView tv=(TextView)findViewById(R.id.text);  
22.     btn.setOnClickListener(new OnClickListener() {  
23.           
24.         @Override  
25.         public void onClick(View v) {  
26.             // TODO Auto-generated method stub  
27.             String str=ET_content.getText().toString();  
28.             String zhengze = "f0[0-9]{2}|f10[0-7]"; // 正则表达式，用来判断消息内是否有表情  
29.             SpannableString spannableString = ExpressionUtil  
30.                     .getExpressionString(getApplicationContext(),str, zhengze);  
31.               
32.             tv.setText(spannableString);  
33.         }  
34.     });   
35. }  

在OnCreate（）函数里，增加了几句话，如下：

[java]  view plain copy

1. Button btn=(Button)findViewById(R.id.getText);  
2. final TextView tv=(TextView)findViewById(R.id.text);  
3. btn.setOnClickListener(new OnClickListener() {  
4.       
5.     @Override  
6.     public void onClick(View v) {  
7.         // TODO Auto-generated method stub  
8.         String str=ET_content.getText().toString();  
9.         String zhengze = "f0[0-9]{2}|f10[0-7]"; // 正则表达式，用来判断消息内是否有表情  
10.         SpannableString spannableString = ExpressionUtil  
11.                 .getExpressionString(getApplicationContext(),str, zhengze);  
12.           
13.         tv.setText(spannableString);  
14.     }  
15. });   

这就是对“显示在下面TextView中”按钮的实例化和监听函数，这里最重要的是onClick()里的几句话：

第一句：String str=ET_content.getText().toString(); 获得当前EditText中的字符；
第二句：String zhengze = "f0[0-9]{2}|f10[0-7]";  是一个正则表达式，用来判断消息内是否有表情
第三句：SpannableString spannableString = ExpressionUtil.getExpressionString(getApplicationContext(),str, zhengze);这句是一个函数，正是我们下面要讲的，这句的功能是将传进去的字符，经过正则表达式匹配，找到对应字符的图片，最后返回SpannableString对象的实例；
第四句：tv.setText(spannableString);将返回的图文混排的文字设置到TextView中；

下面我们看看getExpressionString（）函数

三、字符解析类----ExpressionUtil

这个类里总共有两个函数，其实主要就一个，另一个只是在内部被调用的，先看看上面被调用到的getExpressionString（）函数

[java]  view plain copy

1. /** 
2.  * 得到一个SpanableString对象，通过传入的字符串,并进行正则判断 
3.  * @param context 
4.  * @param str 
5.  * @return 
6.  */  
7. public static SpannableString getExpressionString(Context context,String str,String zhengze){  
8.     SpannableString spannableString = new SpannableString(str);  
9.     Pattern sinaPatten = Pattern.compile(zhengze, Pattern.CASE_INSENSITIVE);        //通过传入的正则表达式来生成一个pattern  
10.     try {  
11.         dealExpression(context,spannableString, sinaPatten, 0);  
12.     } catch (Exception e) {  
13.         Log.e("dealExpression", e.getMessage());  
14.     }  
15.     return spannableString;  
16. }  

这个没什么实际功能，就是将传进来的字符和正则表达式进行封装，传到dealExpression（）这个函数里面去，我们看看这个函数是什么功能；

[java]  view plain copy

1. /** 
2.  * 对spanableString进行正则判断，如果符合要求，则以表情图片代替 
3.  * @param context 
4.  * @param spannableString 
5.  * @param patten 
6.  * @param start 
7.  * @throws SecurityException 
8.  * @throws NoSuchFieldException 
9.  * @throws NumberFormatException 
10.  * @throws IllegalArgumentException 
11.  * @throws IllegalAccessException 
12.  */  
13. public static void dealExpression(Context context,SpannableString spannableString, Pattern patten, int start) throws Exception {  
14.     Matcher matcher = patten.matcher(spannableString);  
15.     while (matcher.find()) {  
16.         String key = matcher.group();//得到整个匹配，也就是文件名，比如f001  
17.         if (matcher.start() < start) {  
18.             continue;  
19.         }  
20.         Field field = R.drawable.class.getDeclaredField(key); //根据得到的名字获得资源  
21.         int resId = Integer.parseInt(field.get(null).toString());       //通过上面匹配得到的字符串来生成图片资源id  
22.         if (resId != 0) {  
23.             Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resId);      
24.             ImageSpan imageSpan = new ImageSpan(bitmap);                //通过图片资源id来得到bitmap，用一个ImageSpan来包装  
25.             int end = matcher.start() + key.length();                   //计算该图片名字的长度，也就是要替换的字符串的长度  
26.             spannableString.setSpan(imageSpan, matcher.start(), end, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);   //将该图片替换字符串中规定的位置中  
27.             if (end < spannableString.length()) {                        //如果整个字符串还未验证完，则继续。。  
28.                 dealExpression(context,spannableString,  patten, end);  
29.             }  
30.             break;  
31.         }  
32.     }  
33. }  

1、首先将字符与正则表达式匹配：Matcher matcher = patten.matcher(spannableString);
2、对于匹配的结果： String key = matcher.group();得到整个匹配，因为我们定义的正则表达式只是匹配的文件句，匹配的结果肯定也就是文件名比如：f001;
3、下面的几句就是根据文件名，得图片资源然后放到spannableString中，替代这个文件名

参考文章：《完整实例实现QQ表情的发送和接收》：http://blog.csdn.net/duancanmeng/article/details/7677144

源码内容：在源码中除了我上面讲的例子的源码外，还有我参考的这篇博客的源码；向博主致敬！因为您让我们这些初接触者少走了弯路，谢谢！

源码地址：http://download.csdn.net/detail/harvic880925/6842393