实现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里添加一个属性：表示当弹出软键时，程序底部自适应

android:windowSoftInputMode="stateVisible|adjustResize"

所有的AndroidManifest.xml的代码为：

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.edit_with_expression"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="8" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.example.edit_with_expression.MainActivity"            android:label="@string/app_name"             android:windowSoftInputMode="stateVisible|adjustResize">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

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

1、brow.xml

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

<?xml version="1.0" encoding="utf-8"?><brows><brow><code><![CDATA[[em:1:]]]></code><name>f001</name></brow><brow><code><![CDATA[[em:2:]]]></code><name>f002</name></brow><brow><code><![CDATA[[em:3:]]]></code><name>f003</name></brow><brows>

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

2、smile类

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

package com.example.edit_with_expression;/** * @author  harvic * @date 2014-1-14 */public class Smile {private String code; //表情代码private String name ;  //表情名字public String getName() {return name;}public void setName(String name) {this.name = name;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}}

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

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

package com.example.edit_with_expression;import java.io.InputStream;import java.util.ArrayList;import java.util.List;import org.xmlpull.v1.XmlPullParser;import android.util.Xml;/** * @author harvic * @date   2014-1-11 */public class ParserBrowXml {public  static List<Smile> getInfo(InputStream inputStream){XmlPullParser parser = Xml.newPullParser() ;int eventType = 0;List<Smile> smiles = null ;Smile smile = null ;try {parser.setInput(inputStream, "UTF-8") ;eventType = parser.getEventType();while(eventType != XmlPullParser.END_DOCUMENT){switch (eventType) {case XmlPullParser.START_DOCUMENT:smiles = new ArrayList<Smile>() ;break ;case XmlPullParser.START_TAG:if("brow".equals(parser.getName())){smile = new Smile() ;}else if("code".equals(parser.getName())){smile.setCode(parser.nextText()) ;}else if("name".equals(parser.getName())){smile.setName(parser.nextText()) ;}break ;case XmlPullParser.END_TAG:if("brow".equals(parser.getName())){smiles.add(smile) ;smile = null ;}break;default:break;}eventType = parser.next() ;}} catch (Exception e) {e.printStackTrace();}return smiles;}}

四、主程序（MainActivity.java）

先看全部代码：

package com.example.edit_with_expression;/** * @author harvic * @date   2014-1-11 */import java.io.InputStream;import java.lang.reflect.Field;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.content.Context;import android.graphics.Color;import android.graphics.drawable.ColorDrawable;import android.graphics.drawable.Drawable;import android.text.Spannable;import android.text.SpannableString;import android.text.style.ImageSpan;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.view.inputmethod.InputMethodManager;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.EditText;import android.widget.GridView;import android.widget.ImageView;import android.widget.SimpleAdapter;public class MainActivity extends Activity {private List<Smile> smiles = null; // 表情集合private EditText ET_content; //输入框private ImageView IV_face;  //表情显示按钮private GridView GV_faceView;//存放表情列表的GridViewprivate InputMethodManager inputManager;//软键盘管理类 @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 和 各个组件变量初始化InitVariable();// 初始化GridView,将其与Adapter绑定InitGridView();//表情显示图片点击监听IV_face.setOnClickListener(faceClickListener);//监听点击了表情的哪一项GV_faceView.setOnItemClickListener(gridViewFaceItemClickListener);//EditText点击监听ET_content.setOnClickListener(EditContentClickListener);}/** * 初始化变量 */private void InitVariable(){//软键盘管理类 inputManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);//其它变量GV_faceView = (GridView) this.findViewById(R.id.tweet_pub_faces); // 取得放置表情的gridView组件ET_content = (EditText) findViewById(R.id.tweet_pub_content);IV_face = (ImageView) findViewById(R.id.tweet_pub_footbar_face);}private void InitGridView() {try {InputStream inputStream = this.getResources().getAssets().open("brow.xml"); // 取得assets中的borw.xml文件smiles = ParserBrowXml.getInfo(inputStream); // 解析borw.xmladdexpression(this, smiles, GV_faceView);// 调用生情表情的方法} catch (Exception e) {e.printStackTrace();}}/** * 点击显示表情的监听器，当用户点击时显示表示列表 */private View.OnClickListener faceClickListener = new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubtry {showOrHideIMM();} catch (Exception e) {// TODO: handle exceptionLog.w("msg", e.getMessage());}}};/** * 点击EditText的监听器，当用户点击EditText的时候显示键盘 */private View.OnClickListener EditContentClickListener = new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubshowIMM();}};/** * 点击表情GRIDVIEW中的某一项的监听器 */private OnItemClickListener gridViewFaceItemClickListener=new AdapterView.OnItemClickListener(){@Overridepublic void onItemClick(AdapterView<?> arg0, View view, int position,long id) {// TODO Auto-generated method stub//首先得到当前用户点击的表情的信息Smile smile = smiles.get(position);//得到当前CURSOR位置int cursor = ET_content.getSelectionStart();Field f;try {//根据资源名字得到Resource和对应的Drawablef = (Field) R.drawable.class.getDeclaredField(smile.getName());int j = f.getInt(R.drawable.class);Drawable d = getResources().getDrawable(j);d.setBounds(0, 0, 35, 35);//设置表情图片的显示大小//显示在EditText中String str="img";SpannableString ss = new SpannableString(str);ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);ss.setSpan(span, 0, str.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);ET_content.getText().insert(cursor,ss);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}};/** * 根据SMILE列表找到对应的SORCE ID，生成simpleAdatper 传到GrideView中 * 生成表情的方法  * @param context 要传入的上下文 * @param smiles  表情集合 * @param gridView 要显示器的grildView * @throws Exception 异常 */public void addexpression(Context context,List<Smile> smiles,GridView gridView) throws Exception {// 通过反射把资源文件中的图片取出来放在GridView上ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();for (int i = 0; i < 50; i++) {Smile smile = smiles.get(i);if (smile != null) {HashMap<String, Object> map = new HashMap<String, Object>();Field f = (Field) R.drawable.class.getDeclaredField(smile.getName());int j = f.getInt(R.drawable.class);map.put("ItemImage", j);// 添加图像资源的IDlstImageItem.add(map);}}// 生成适配器的ImageItem <====> 动态数组的元素，两者一一对应SimpleAdapter saImageItems = new SimpleAdapter(context, lstImageItem,// 数据来源R.layout.brow_item,// 动态数组与ImageItem对应的子项new String[] { "ItemImage" },// ImageItem的XML文件里面的一个ImageViewnew int[] { R.id.iv_brow });gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));//解决点击GridView背景变黑的情况gridView.setAdapter(saImageItems);}//以下显示隐藏软键或表情的方法集合private void showIMM() {IV_face.setTag(1);showOrHideIMM();}private void showFace() {IV_face.setTag(1);GV_faceView.setVisibility(View.VISIBLE);}private void hideFace() {IV_face.setTag(null);GV_faceView.setVisibility(View.GONE);}private void showOrHideIMM() {if (IV_face.getTag() == null) {// 隐藏软键盘inputManager.hideSoftInputFromWindow(IV_face.getWindowToken(), 0);// 显示表情showFace();} else {// 显示软键盘inputManager.showSoftInput(ET_content, 0);// 隐藏表情hideFace();}}}

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

1、看主函数（OnCreate）

protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 和 各个组件变量初始化InitVariable();// 初始化GridView,将其与Adapter绑定InitGridView();//表情显示图片点击监听IV_face.setOnClickListener(faceClickListener);//监听点击了表情的哪一项GV_faceView.setOnItemClickListener(gridViewFaceItemClickListener);//EditText点击监听ET_content.setOnClickListener(EditContentClickListener);}

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

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

下面我们逐个函数的讲

 2、初始化变量InitVairiable()

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

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

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

private void InitGridView() {try {InputStream inputStream = this.getResources().getAssets().open("brow.xml"); // 取得assets中的borw.xml文件smiles = ParserBrowXml.getInfo(inputStream); // 解析borw.xmladdexpression(this, smiles, GV_faceView);// 调用生情表情的方法} catch (Exception e) {e.printStackTrace();}}

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

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

/** * 根据SMILE列表找到对应的SORCE ID，生成simpleAdatper 传到GrideView中 * 生成表情的方法  * @param context 要传入的上下文 * @param smiles  表情集合 * @param gridView 要显示器的grildView * @throws Exception 异常 */public void addexpression(Context context,List<Smile> smiles,GridView gridView) throws Exception {// 通过反射把资源文件中的图片取出来放在GridView上ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();for (int i = 0; i < 50; i++) {Smile smile = smiles.get(i);if (smile != null) {HashMap<String, Object> map = new HashMap<String, Object>();Field f = (Field) R.drawable.class.getDeclaredField(smile.getName());int j = f.getInt(R.drawable.class);map.put("ItemImage", j);// 添加图像资源的IDlstImageItem.add(map);}}// 生成适配器的ImageItem <====> 动态数组的元素，两者一一对应SimpleAdapter saImageItems = new SimpleAdapter(context, lstImageItem,// 数据来源R.layout.brow_item,// 动态数组与ImageItem对应的子项new String[] { "ItemImage" },// ImageItem的XML文件里面的一个ImageViewnew int[] { R.id.iv_brow });gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));//解决点击GridView背景变黑的情况gridView.setAdapter(saImageItems);}

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

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

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

（2）、生成适配器

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

4、监听部分---gridViewFaceItemClickListener

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

下面只是gridViewFaceItemClickListener的代码：

private OnItemClickListener gridViewFaceItemClickListener=new AdapterView.OnItemClickListener(){@Overridepublic void onItemClick(AdapterView<?> arg0, View view, int position,long id) {// TODO Auto-generated method stub//首先得到当前用户点击的表情的信息Smile smile = smiles.get(position);//得到当前CURSOR位置int cursor = ET_content.getSelectionStart();Field f;try {//根据资源名字得到Resource和对应的Drawablef = (Field) R.drawable.class.getDeclaredField(smile.getName());int j = f.getInt(R.drawable.class);Drawable d = getResources().getDrawable(j);d.setBounds(0, 0, 35, 35);//设置表情图片的显示大小//显示在EditText中String str="img";SpannableString ss = new SpannableString(str);ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);ss.setSpan(span, 0, str.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);ET_content.getText().insert(cursor,ss);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}

步骤：

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

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

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

请大家尊重原创者版权，转载请标明出处：http://blog.csdn.net/harvic880925/article/details/18146597 谢谢！！！！！！