实现RichEdit（一）---如何在EditText中插入图片表情

前言：现在软件开发用到了这个功能，对于不会的东东，难度都是比较大的，会的不难，难的不会，反正就是学吧，这次总共分两篇，这篇讲解如何实现在EditText中插入图片，第二篇讲如何实现与服务器通信（PHP）；

效果：

 

步骤：

1、我们为了将图片与更多的信息结合起来，所以我们采用XML的形式先将图片的各信息组织起来，保存在assets/brow.xml里
2、定义一个类（class smile），用来保存从brow.xml里提取的各种信息

3、利用保存提取的信息的 List<smile> simles 变量 ，生成GridView的Adapter，加载到GridView中

4、最后是逻辑处理，定义监听函数等

一、设置AndroidManifest.xml

在MainActivity对应的Activity里添加一个属性：表示当弹出软键时，程序底部自适应

[html]  view plain copy

1. android:windowSoftInputMode="stateVisible|adjustResize"  

所有的AndroidManifest.xml的代码为：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.     package="com.example.edit_with_expression"  
4.     android:versionCode="1"  
5.     android:versionName="1.0" >  
6.   
7.     <uses-sdk  
8.         android:minSdkVersion="8"  
9.         android:targetSdkVersion="8" />  
10.   
11.     <application  
12.         android:allowBackup="true"  
13.         android:icon="@drawable/ic_launcher"  
14.         android:label="@string/app_name"  
15.         android:theme="@style/AppTheme" >  
16.         <activity  
17.             android:name="com.example.edit_with_expression.MainActivity"  
18.             android:label="@string/app_name"   
19.             android:windowSoftInputMode="stateVisible|adjustResize">  
20.             <intent-filter>  
21.                 <action android:name="android.intent.action.MAIN" />  
22.   
23.                 <category android:name="android.intent.category.LAUNCHER" />  
24.             </intent-filter>  
25.         </activity>  
26.     </application>  
27.   
28. </manifest><span style="color:#006600;"></span>  

二、保存表情信息的brow.xml和smile类

1、brow.xml

根据上面的步骤，我们先看保存表情信息的brow.xml是怎样的格式；

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <brows>  
3.     <brow>  
4.         <code><![CDATA[[em:1:]]]></code>  
5.         <name>f001</name>  
6.     </brow>  
7.     <brow>  
8.         <code><![CDATA[[em:2:]]]></code>  
9.         <name>f002</name>  
10.     </brow>  
11.     <brow>  
12.         <code><![CDATA[[em:3:]]]></code>  
13.         <name>f003</name>  
14.     </brow>  
15. <brows>     

这个就是brow.xml的完整格式，每个图片占一个<brow></brow>标签，大家可以看到在源码中不只这些<brow>标签，其实有50个，这里只是为了说明格式，所以并没有全部列出来，只是让大家看一下格式。

2、smile类

这个类只是为了保存从brow.xml里提取到了每个图片的信息，也就是CODE和图片的NAME；

[java]  view plain copy

1. package com.example.edit_with_expression;  
2. /** 
3.  * @author  harvic 
4.  * @date 2014-1-14 
5.  */  
6. public class Smile {  
7.     private String code; //表情代码  
8.       
9.     private String name ;  //表情名字  
10.   
11.     public String getName() {  
12.         return name;  
13.     }  
14.   
15.       
16.     public void setName(String name) {  
17.         this.name = name;  
18.     }  
19.   
20.       
21.     public String getCode() {  
22.         return code;  
23.     }  
24.   
25.   
26.     public void setCode(String code) {  
27.         this.code = code;  
28.     }  
29.       
30. }  

三、解析XML的类（ParserBrowXml.java）

功能：解析brow.xml，返回List<Smile>

[java]  view plain copy

1. package com.example.edit_with_expression;  
2.   
3. import java.io.InputStream;  
4. import java.util.ArrayList;  
5. import java.util.List;  
6.   
7. import org.xmlpull.v1.XmlPullParser;  
8. import android.util.Xml;  
9. /** 
10.  * @author harvic 
11.  * @date   2014-1-11 
12.  */  
13. public class ParserBrowXml {  
14. public  static List<Smile> getInfo(InputStream inputStream){  
15.           
16.         XmlPullParser parser = Xml.newPullParser() ;  
17.         int eventType = 0;  
18.         List<Smile> smiles = null ;  
19.         Smile smile = null ;  
20.         try {  
21.             parser.setInput(inputStream, "UTF-8") ;  
22.             eventType = parser.getEventType();  
23.             while(eventType != XmlPullParser.END_DOCUMENT){  
24.                   
25.                 switch (eventType) {  
26.                 case XmlPullParser.START_DOCUMENT:  
27.                       
28.                     smiles = new ArrayList<Smile>() ;  
29.                     break ;  
30.                 case XmlPullParser.START_TAG:  
31.                     if("brow".equals(parser.getName())){  
32.                         smile = new Smile() ;  
33.                           
34.                     }else if("code".equals(parser.getName())){  
35.                         smile.setCode(parser.nextText()) ;  
36.                     }else if("name".equals(parser.getName())){  
37.                         smile.setName(parser.nextText()) ;  
38.                     }  
39.                     break ;  
40.                 case XmlPullParser.END_TAG:  
41.                     if("brow".equals(parser.getName())){  
42.                         smiles.add(smile) ;  
43.                         smile = null ;  
44.                     }  
45.                     break;  
46.                       
47.                 default:  
48.                     break;  
49.                 }  
50.                   
51.                 eventType = parser.next() ;  
52.             }  
53.               
54.         } catch (Exception e) {  
55.             e.printStackTrace();  
56.         }  
57.   
58.         return smiles;  
59.         }  
60. }  

四、主程序（MainActivity.java）

先看全部代码：

[java]  view plain copy

1. package com.example.edit_with_expression;  
2. /** 
3.  * @author harvic 
4.  * @date   2014-1-11 
5.  */  
6. import java.io.InputStream;  
7. import java.lang.reflect.Field;  
8. import java.util.ArrayList;  
9. import java.util.HashMap;  
10. import java.util.List;  
11.   
12. import android.os.Bundle;  
13. import android.app.Activity;  
14. import android.content.Context;  
15. import android.graphics.Color;  
16. import android.graphics.drawable.ColorDrawable;  
17. import android.graphics.drawable.Drawable;  
18. import android.text.Spannable;  
19. import android.text.SpannableString;  
20. import android.text.style.ImageSpan;  
21. import android.util.Log;  
22. import android.view.View;  
23. import android.view.View.OnClickListener;  
24. import android.view.inputmethod.InputMethodManager;  
25. import android.widget.AdapterView;  
26. import android.widget.AdapterView.OnItemClickListener;  
27. import android.widget.EditText;  
28. import android.widget.GridView;  
29. import android.widget.ImageView;  
30. import android.widget.SimpleAdapter;  
31.   
32. public class MainActivity extends Activity {  
33.   
34.     private List<Smile> smiles = null; // 表情集合  
35.     private EditText ET_content; //输入框  
36.     private ImageView IV_face;  //表情显示按钮  
37.   
38.     private GridView GV_faceView;//存放表情列表的GridView  
39.     private InputMethodManager inputManager;//软键盘管理类   
40.       
41.     @Override  
42.     protected void onCreate(Bundle savedInstanceState) {  
43.         super.onCreate(savedInstanceState);  
44.         setContentView(R.layout.activity_main);  
45.   
46.         // 和 各个组件变量初始化  
47.         InitVariable();  
48.         // 初始化GridView,将其与Adapter绑定  
49.         InitGridView();  
50.           
51.         //表情显示图片点击监听  
52.         IV_face.setOnClickListener(faceClickListener);  
53.           
54.         //监听点击了表情的哪一项  
55.         GV_faceView.setOnItemClickListener(gridViewFaceItemClickListener);  
56.           
57.         //EditText点击监听  
58.         ET_content.setOnClickListener(EditContentClickListener);  
59.           
60.           
61.     }  
62.     /** 
63.      * 初始化变量 
64.      */  
65.     private void InitVariable(){  
66.         //软键盘管理类   
67.         inputManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);  
68.         //其它变量  
69.         GV_faceView = (GridView) this.findViewById(R.id.tweet_pub_faces); // 取得放置表情的gridView组件  
70.         ET_content = (EditText) findViewById(R.id.tweet_pub_content);  
71.         IV_face = (ImageView) findViewById(R.id.tweet_pub_footbar_face);  
72.     }  
73.   
74.     private void InitGridView() {  
75.         try {  
76.             InputStream inputStream = this.getResources().getAssets()  
77.                     .open("brow.xml"); // 取得assets中的borw.xml文件  
78.             smiles = ParserBrowXml.getInfo(inputStream); // 解析borw.xml  
79.             addexpression(this, smiles, GV_faceView);// 调用生情表情的方法  
80.         } catch (Exception e) {  
81.             e.printStackTrace();  
82.         }  
83.     }  
84.     /** 
85.      * 点击显示表情的监听器，当用户点击时显示表示列表 
86.      */  
87.     private View.OnClickListener faceClickListener = new View.OnClickListener() {  
88.   
89.         @Override  
90.         public void onClick(View v) {  
91.             // TODO Auto-generated method stub  
92.             try {  
93.                 showOrHideIMM();  
94.             } catch (Exception e) {  
95.                 // TODO: handle exception  
96.                 Log.w("msg", e.getMessage());  
97.             }  
98.         }  
99.           
100.     };  
101.     /** 
102.      * 点击EditText的监听器，当用户点击EditText的时候显示键盘 
103.      */  
104.     private View.OnClickListener EditContentClickListener = new View.OnClickListener() {  
105.   
106.         @Override  
107.         public void onClick(View v) {  
108.             // TODO Auto-generated method stub  
109.             showIMM();  
110.         }  
111.           
112.     };  
113.     /** 
114.      * 点击表情GRIDVIEW中的某一项的监听器 
115.      */  
116.     private OnItemClickListener gridViewFaceItemClickListener=new AdapterView.OnItemClickListener(){  
117.   
118.         @Override  
119.         public void onItemClick(AdapterView<?> arg0, View view, int position,  
120.                 long id) {  
121.             // TODO Auto-generated method stub  
122.             //首先得到当前用户点击的表情的信息  
123.             Smile smile = smiles.get(position);  
124.             //得到当前CURSOR位置  
125.             int cursor = ET_content.getSelectionStart();  
126.             Field f;  
127.             try {  
128.                 //根据资源名字得到Resource和对应的Drawable  
129.                 f = (Field) R.drawable.class.getDeclaredField(smile  
130.                         .getName());  
131.                 int j = f.getInt(R.drawable.class);  
132.                 Drawable d = getResources().getDrawable(j);  
133.                 d.setBounds(0, 0, 35, 35);//设置表情图片的显示大小  
134.                   
135.                 //显示在EditText中  
136.                 String str="img";  
137.                 SpannableString ss = new SpannableString(str);  
138.                 ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);  
139.                 ss.setSpan(span, 0, str.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
140.                   
141.                 ET_content.getText().insert(cursor,ss);  
142.             } catch (Exception e) {  
143.                 // TODO Auto-generated catch block  
144.                 e.printStackTrace();  
145.             }  
146.               
147.         }  
148.           
149.     };  
150.       
151.     /** 
152.      * 根据SMILE列表找到对应的SORCE ID，生成simpleAdatper 传到GrideView中 
153.      * 生成表情的方法  
154.      * @param context 要传入的上下文 
155.      * @param smiles  表情集合 
156.      * @param gridView 要显示器的grildView 
157.      * @throws Exception 异常 
158.      */  
159.         public void addexpression(Context context,List<Smile> smiles,GridView gridView) throws Exception {  
160.   
161.             // 通过反射把资源文件中的图片取出来放在GridView上  
162.             ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();  
163.             for (int i = 0; i < 50; i++) {  
164.                 Smile smile = smiles.get(i);  
165.                 if (smile != null) {  
166.                     HashMap<String, Object> map = new HashMap<String, Object>();  
167.                     Field f = (Field) R.drawable.class.getDeclaredField(smile  
168.                             .getName());  
169.                     int j = f.getInt(R.drawable.class);  
170.                     map.put("ItemImage", j);// 添加图像资源的ID  
171.                     lstImageItem.add(map);  
172.   
173.                 }  
174.             }  
175.   
176.             // 生成适配器的ImageItem <====> 动态数组的元素，两者一一对应  
177.             SimpleAdapter saImageItems = new SimpleAdapter(context, lstImageItem,// 数据来源  
178.                     R.layout.brow_item,  
179.                     // 动态数组与ImageItem对应的子项  
180.                     new String[] { "ItemImage" },  
181.                     // ImageItem的XML文件里面的一个ImageView  
182.                     new int[] { R.id.iv_brow });  
183.             gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));//解决点击GridView背景变黑的情况  
184.             gridView.setAdapter(saImageItems);  
185.         }  
186.       
187.     //以下显示隐藏软键或表情的方法集合  
188.     private void showIMM() {  
189.         IV_face.setTag(1);  
190.         showOrHideIMM();  
191.     }  
192.   
193.     private void showFace() {  
194.         IV_face.setTag(1);  
195.         GV_faceView.setVisibility(View.VISIBLE);  
196.     }  
197.   
198.     private void hideFace() {  
199.         IV_face.setTag(null);  
200.         GV_faceView.setVisibility(View.GONE);  
201.     }  
202.   
203.     private void showOrHideIMM() {  
204.         if (IV_face.getTag() == null) {  
205.             // 隐藏软键盘  
206.             inputManager.hideSoftInputFromWindow(IV_face.getWindowToken(), 0);  
207.             // 显示表情  
208.             showFace();  
209.         } else {  
210.             // 显示软键盘  
211.             inputManager.showSoftInput(ET_content, 0);  
212.             // 隐藏表情  
213.             hideFace();  
214.         }  
215.     }  
216.   
217. }  

代码有点长，这是因为我把所有相关的东东都包装成了方法，放在了这个页面，所以我们从主到次，根据逻辑慢慢来；

1、看主函数（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. }  

只看这些，就比较好理解了，这是整个程序的脉络:

(1)、初始化变量
(2)、初始化GridView
(3)、各种监听函数的设置

下面我们逐个函数的讲

 2、初始化变量InitVairiable()

[java]  view plain copy

1. /** 
2.  * 初始化变量 
3.  */  
4. private void InitVariable(){  
5.     //软键盘管理类   
6.     inputManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);  
7.     //其它变量  
8.     GV_faceView = (GridView) this.findViewById(R.id.tweet_pub_faces); // 取得放置表情的gridView组件  
9.     ET_content = (EditText) findViewById(R.id.tweet_pub_content);  
10.     IV_face = (ImageView) findViewById(R.id.tweet_pub_footbar_face);  
11. }  

这部分什么都没有，就是将资源与变量绑定起来，也就是根据资源初始化变量；

3、初始化GridView------InitGridView() 

[java]  view plain copy

1. private void InitGridView() {  
2.     try {  
3.         InputStream inputStream = this.getResources().getAssets()  
4.                 .open("brow.xml"); // 取得assets中的borw.xml文件  
5.         smiles = ParserBrowXml.getInfo(inputStream); // 解析borw.xml  
6.         addexpression(this, smiles, GV_faceView);// 调用生情表情的方法  
7.     } catch (Exception e) {  
8.         e.printStackTrace();  
9.     }  
10. }  

这部分看起来挺简单，可仔细一看并不简单：

（1）、前两句比较容易，就是利用ParserBrowXml解析XML，将返回的List<smile> 类型的变量赋值给smiles变量
（2）、最后一句是封装的方法，这个方法传进去三个变量，第一个是this，第二个List<smile>  smile，第三个是 GridView GV_faceView；单从这三个变量的类型上看应该也能猜出来这个函数的功能：将brow.xml里的smile信息传进去 ，然后生成GrideViewAdapter，初始化GrideView,下面看看这个addexpression()方法

[java]  view plain copy

1. /** 
2.  * 根据SMILE列表找到对应的SORCE ID，生成simpleAdatper 传到GrideView中 
3.  * 生成表情的方法  
4.  * @param context 要传入的上下文 
5.  * @param smiles  表情集合 
6.  * @param gridView 要显示器的grildView 
7.  * @throws Exception 异常 
8.  */  
9. public void addexpression(Context context,List<Smile> smiles,GridView gridView) throws Exception {  
10.   
11.     // 通过反射把资源文件中的图片取出来放在GridView上  
12.     ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();  
13.     for (int i = 0; i < 50; i++) {  
14.         Smile smile = smiles.get(i);  
15.         if (smile != null) {  
16.             HashMap<String, Object> map = new HashMap<String, Object>();  
17.             Field f = (Field) R.drawable.class.getDeclaredField(smile  
18.                     .getName());  
19.             int j = f.getInt(R.drawable.class);  
20.             map.put("ItemImage", j);// 添加图像资源的ID  
21.             lstImageItem.add(map);  
22.   
23.         }  
24.     }  
25.   
26.     // 生成适配器的ImageItem <====> 动态数组的元素，两者一一对应  
27.     SimpleAdapter saImageItems = new SimpleAdapter(context, lstImageItem,// 数据来源  
28.             R.layout.brow_item,  
29.             // 动态数组与ImageItem对应的子项  
30.             new String[] { "ItemImage" },  
31.             // ImageItem的XML文件里面的一个ImageView  
32.             new int[] { R.id.iv_brow });  
33.     gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));//解决点击GridView背景变黑的情况  
34.     gridView.setAdapter(saImageItems);  
35. }  

上面的代码有点部分要注意一下：

（1）、根据名称得到资源的ID

[java]  view plain copy

1. Field f = (Field) R.drawable.class.getDeclaredField(smile  
2.         .getName());  
3. int j = f.getInt(R.drawable.class);  

（2）、生成适配器

[java]  view plain copy

1. SimpleAdapter saImageItems = new SimpleAdapter(context, lstImageItem,// 数据来源  
2.         R.layout.brow_item,  
3.         // 动态数组与ImageItem对应的子项  
4.         new String[] { "ItemImage" },  
5.         // ImageItem的XML文件里面的一个ImageView  
6.         new int[] { R.id.iv_brow });  

4、监听部分---gridViewFaceItemClickListener

对于监听部分，我只讲一个gridViewFaceItemClickListener，也就是当用户点击gridView里某一项时，怎样把这个表情添加到EditView中；其它的监听函数都是些对于软键盘和表情GridView显示隐藏的问题了，就不多了，具体看下对应的代码吧。

下面只是gridViewFaceItemClickListener的代码：

[java]  view plain copy

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

步骤：

（1）、先得到用户点击的ITEM，对应的smile图片的信息
（2）、根据图片名得到该图片的Drawable;
（3）、利用SpannableString和setSpan将其加入到EditView中；

OK啦，到这就结束了，下篇讲如何与服务器通信；陪女朋友去喽

源码来啦：http://download.csdn.net/detail/harvic880925/6838373 （不要分，仅供分享）