EditText通常用于显示文字，但有时候也需要在文字中夹杂一些图片，比如QQ中就可以使用表情图片，又比如需要的文字高亮显示等等，如何在android中也做到这样呢？
记得android中有个android.text包，这里提供了对文本的强大的处理功能。
添加图片主要用SpannableString和ImageSpan类，具体参考sdk文档 SpannableString
这里以人人网客户端发布消息的界面为例
布局文件main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="48dip"
android:background="@drawable/v5_0_1_flipper_head_blue_background"
android:orientation="horizontal" >
<ImageView
android:id="@+id/newsfeedpublish_back"
android:layout_width="54dip"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="@drawable/v5_0_1_flipper_head_title_wrapper_background"
android:clickable="true"
android:scaleType="centerInside"
android:src="@drawable/v5_0_1_flipper_head_back" />
<ImageView
android:layout_width="2px"
android:layout_height="24dip"
android:layout_gravity="center"
android:src="@drawable/v5_0_1_flipper_head_separator" />
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="8dip"
android:text="发布新鲜事"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/newsfeedpublish_publish"
android:layout_width="54dip"
android:layout_height="fill_parent"
android:background="@drawable/v5_0_1_flipper_head_title_wrapper_background"
android:clickable="true"
android:scaleType="centerInside"
android:src="@drawable/v5_0_1_flipper_head_publish" />
</LinearLayout>
<EditText
android:id="@+id/newsfeedpublish_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dip"
android:layout_weight="1"
android:background="#00000000"
android:gravity="top"
android:hint="您正在干嘛?"
android:maxLength="140"
android:padding="8dip"
android:textColor="#000000"
android:textSize="16sp" >
<requestFocus />
</EditText>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_marginLeft="8dip"
android:layout_marginRight="8dip"
android:background="@drawable/v5_0_1_publisher_split_line" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="40dip"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_margin="5dip"
android:layout_weight="1"
android:background="@drawable/v5_0_1_publisher_poi_text_bg"
android:orientation="horizontal" >
<Button
android:id="@+id/newsfeedpublish_poi_place"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00000000"
android:drawableLeft="@drawable/v5_0_1_publisher_poi_icon"
android:drawablePadding="8dip"
android:ellipsize="start"
android:gravity="left|center_vertical"
android:singleLine="true"
android:text="正在定位..."
android:textColor="#ff005092" />
<ImageView
android:id="@+id/newsfeedpublish_poi_sperator"
android:layout_width="1dip"
android:layout_height="fill_parent"
android:src="@drawable/v5_0_1_publisher_poi_area_sperator" />
<ImageView
android:id="@+id/newsfeedpublish_poi_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/v5_0_1_publisher_poi_list_icon"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="right"
android:padding="8dip" >
<TextView
android:id="@+id/newsfeedpublish_count"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:text="0"
android:textColor="#80333333"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:text="/140"
android:textColor="#80333333"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="40dip"
android:background="@drawable/v5_0_1_publisher_buttons_area_bg"
android:orientation="horizontal" >
<ImageButton
android:id="@+id/newsfeedpublish_voice"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@drawable/v5_0_1_publisher_button_bg"
android:src="@drawable/v5_0_1_publisher_voice_button" />
<ImageButton
android:id="@+id/newsfeedpublish_poi"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@drawable/v5_0_1_publisher_button_bg"
android:src="@drawable/v5_0_1_publisher_poi_button_on" />
<ImageButton
android:id="@+id/newsfeedpublish_image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@drawable/v5_0_1_publisher_button_bg"
android:src="@drawable/v5_0_1_publisher_image_button" />
<ImageButton
android:id="@+id/newsfeedpublish_at"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@drawable/v5_0_1_publisher_button_bg"
android:src="@drawable/v5_0_1_publisher_at_button" />
<ImageButton
android:id="@+id/newsfeedpublish_emoticon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@drawable/v5_0_1_publisher_button_bg"
android:src="@drawable/v5_0_1_publisher_emotion_button" />
</LinearLayout>
<GridView
android:id="@+id/newsfeedpublish_emoticons"
android:layout_width="fill_parent"
android:layout_height="200dip"
android:background="@drawable/v5_0_1_publisher_emotion_area_bg"
android:cacheColorHint="#00000000"
android:focusableInTouchMode="true"
android:horizontalSpacing="5dip"
android:listSelector="#00000000"
android:numColumns="8"
android:stretchMode="columnWidth"
android:verticalSpacing="5dip"
android:visibility="gone" >
</GridView>
</LinearLayout>
MainActivity.java
package com.yulore.emotion;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.inputmethod.InputMethodManager;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.ImageView;
public class MainActivity extends Activity implements OnClickListener {
private static final String TAG = "MainActivity";
private ImageButton ib_emotion;
private GridView gv_emotion;
private EmotionAdapter mAdapter;
private EditText et_content;
private ImageView iv_publish;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
findViewById();
initEmotionIcons();
setListener();
mAdapter = new EmotionAdapter();
gv_emotion.setAdapter(mAdapter);
}
private void initEmotionIcons() {
String json = EmotionUtil.getInstance().readFromFile(EmotionUtil.DOWNLOAD_EMOTION_PATH, "Emoticons.json");
if(json!=null){
Log.e(TAG, json);
RenRenData.mEmotionList = new DataProvider().resolve(json);
}
}
private void findViewById() {
ib_emotion = (ImageButton) findViewById(R.id.newsfeedpublish_emoticon);
gv_emotion = (GridView) findViewById(R.id.newsfeedpublish_emoticons);
et_content = (EditText) findViewById(R.id.newsfeedpublish_content);
iv_publish = (ImageView) findViewById(R.id.newsfeedpublish_publish);
}
private void setListener() {
ib_emotion.setOnClickListener(this);
et_content.setOnClickListener(this);
gv_emotion.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
String emotion = RenRenData.mEmotionList.get(position).getEmotion();
if(et_content.getText().length()+emotion.length()<=140){ //长度小于140
// et_content.setText(et_content.getText().toString()+emotion);
CharSequence ret = EmotionUtil.getInstance().replace(getApplicationContext(), et_content.getText().toString()+emotion);
Log.e(TAG, "ret="+ret);
et_content.setText(ret);
}
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.newsfeedpublish_emoticon:
if(gv_emotion.isShown()){
gv_emotion.setVisibility(View.GONE);
ib_emotion.setImageResource(R.drawable.v5_0_1_publisher_emotion_button);
}else{
gv_emotion.setVisibility(View.VISIBLE);
ib_emotion.setImageResource(R.drawable.v5_0_1_publisher_pad_button);
//隐藏输入法界面
InputMethodManager imm = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(this.getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
}
break;
case R.id.newsfeedpublish_content:
if(gv_emotion.isShown()){
gv_emotion.setVisibility(View.GONE);
ib_emotion.setImageResource(R.drawable.v5_0_1_publisher_emotion_button);
}
break;
default:
break;
}
}
private class EmotionAdapter extends BaseAdapter{
@Override
public int getCount() {
return RenRenData.mEmotionList.size();
}
@Override
public Object getItem(int position) {
return RenRenData.mEmotionList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
ViewHolder holder;
if(convertView==null){
holder = new ViewHolder();
view = View.inflate(getApplicationContext(), R.layout.emotion_item, null);
holder.iv_emotion = (ImageView) view.findViewById(R.id.emotcons_item_img);
view.setTag(holder);
}else{
view = convertView;
holder = (ViewHolder) view.getTag();
}
EmotionIcon em = RenRenData.mEmotionList.get(position);
holder.iv_emotion.setImageBitmap(EmotionUtil.getInstance().getLocalEmotionIcon(em.getEmotion()));
return view;
}
}
public static class ViewHolder{
public ImageView iv_emotion;
}
}
EmotionUtil.java
package com.yulore.emotion;
import java.io.BufferedInputStream;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Environment;
import android.text.Spannable;
import android.text.SpannableStringBuilder;
import android.text.style.ImageSpan;
public class EmotionUtil {
public static final String DOWNLOAD_EMOTION_PATH = Environment
.getExternalStorageDirectory().getAbsolutePath()
+ "/RenRenForAndroid/Emoticons/";
private static EmotionUtil instance = new EmotionUtil();
private EmotionUtil() {
};
public static EmotionUtil getInstance() {
return instance;
}
/**
* 将文本中的表情符号替换为表情图片
*
* @param text
* 需要转换的字符
* @return 带有表情的字符
*/
public CharSequence replace(Context context,CharSequence text) {
try {
SpannableStringBuilder builder = new SpannableStringBuilder(text);
Pattern pattern = buildPattern();
Matcher matcher = pattern.matcher(text);
while (matcher.find()) {
Bitmap bitmap = getLocalEmotionIcon(matcher.group());
ImageSpan span = new ImageSpan(context, bitmap);
builder.setSpan(span, matcher.start(), matcher.end(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
return builder;
} catch (Exception e) {
return text;
}
}
/**
* 正则表达式
*
* @return
*/
private Pattern buildPattern() {
/**
* 查看表情名称数据是否存在,不存在则从本地读取Json,并解析
*/
if(RenRenData.mEmotionList==null || RenRenData.mEmotionList.size()==0){
String json = EmotionUtil.getInstance().readFromFile(EmotionUtil.DOWNLOAD_EMOTION_PATH, "Emoticons.json");
if(json!=null){
RenRenData.mEmotionList = new DataProvider().resolve(json);
}
}
StringBuilder patternString = new StringBuilder(
RenRenData.mEmotionList.size() * 3);
patternString.append('(');
for (EmotionIcon result : RenRenData.mEmotionList) {
String s = result.getEmotion();
patternString.append(Pattern.quote(s));
patternString.append('|');
}
patternString.replace(patternString.length() - 1,
patternString.length(), ")");
return Pattern.compile(patternString.toString());
}
public String readFromFile(String filePath, String fileName) {
if (fileName == null || "".equals(fileName)) {
return null;
}
String ret = "";
if (Environment.MEDIA_MOUNTED.equals(Environment
.getExternalStorageState())) {
File dir = new File(filePath);
if (dir == null || !dir.exists()) {
dir.mkdirs();
}
File targetFile = new File(filePath + fileName);
try {
if (targetFile == null || targetFile.exists()) {
targetFile.createNewFile();
}
InputStream in = new BufferedInputStream(new FileInputStream(
targetFile));
BufferedReader br = new BufferedReader(new InputStreamReader(
in, "UTF-8"));
String tmp;
while ((tmp = br.readLine()) != null) {
ret += tmp;
}
br.close();
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return ret;
}
/**
* 根据表情名称查找表情图片
* @param imageName
* @return
*/
public Bitmap getEmotionIcon(String imageName) {
File cacheDir = new File(DOWNLOAD_EMOTION_PATH);
if (!cacheDir.exists()) {
cacheDir.mkdirs();
}
File[] cacheFiles = cacheDir.listFiles();
int i = 0;
if (cacheFiles != null) {
for (; i < cacheFiles.length; i++) {
if (imageName.equals(cacheFiles[i].getName())) {
break;
}
}
}
if (i < cacheFiles.length) {
return BitmapFactory.decodeFile(DOWNLOAD_EMOTION_PATH + imageName);
}
return null;
}
/**
* 从SD卡中根据表情符号获取表情图片
*
* @param imageName
* 表情的名称
* @return 表情的Bitmap
*/
public Bitmap getLocalEmotionIcon(String imageName) {
File dir = new File(DOWNLOAD_EMOTION_PATH);
if (!dir.exists()) {
dir.mkdirs();
}
File[] cacheFiles = dir.listFiles();
int index = 0;
for (int i = 0; cacheFiles != null && i < cacheFiles.length; i++) {
if (imageName.equals(cacheFiles[i].getName())) {
index = i;
break;
}
}
Bitmap bitmap = null;
if (index < cacheFiles.length) {
/**
* 因表情图片较小,则这里返回了一个60*60的Bitmap,该数值可根据情况调整
*/
bitmap = Bitmap
.createScaledBitmap(
BitmapFactory.decodeFile(DOWNLOAD_EMOTION_PATH
+ imageName), 60, 60, true);
}
return bitmap;
}
/**
* 将文本中的表情符号转换为表情图片
*
* @param text
* @return
*/
/*public CharSequence replace02(Context context, CharSequence text, int resId) {
// SpannableString连续的字符串，长度不可变，同时可以附加一些object;可变的话使用SpannableStringBuilder，参考sdk文档
SpannableString ss = new SpannableString(text.toString() + "[smile]");
// 得到要显示图片的资源
Drawable d = context.getResources().getDrawable(resId);
// 设置高度
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
// 跨度底部应与周围文本的基线对齐
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
// 附加图片
ss.setSpan(span, text.length(), text.length() + "[smile]".length(),
Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
return ss;
}*/
}