在EditText中插入表情图片 (CharacterStyle&SpannableString)

EditText通常用于显示文字，但有时候也需要在文字中夹杂一些图片，比如QQ中就可以使用表情图片，又比如需要的文字高亮显示等等，如何在android中也做到这样呢？ 
记得android中有个android.text包，这里提供了对文本的强大的处理功能。 
添加图片主要用SpannableString和ImageSpan类：

Java代码  

  1. Drawable drawable = getResources().getDrawable(id);
  2. drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
  3. //需要处理的文本，[smile]是需要被替代的文本
  4. SpannableString spannable = new SpannableString(getText().toString()+"[smile]");
  5. //要让图片替代指定的文字就要用ImageSpan
  6. ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
  7. //开始替换，注意第2和第3个参数表示从哪里开始替换到哪里替换结束（start和end）
  8. //最后一个参数类似数学中的集合,[5,12)表示从5到12，包括5但不包括12
  9. spannable.setSpan(span, getText().length(),getText().length()+"[smile]".length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
  10. setText(spannable);

将需要的文字高亮显示：

Java代码  

  1. public void highlight(int start,int end){
  2. SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());//用于可变字符串
  3. ForegroundColorSpan span=new ForegroundColorSpan(Color.RED);
  4. spannable.setSpan(span, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  5. setText(spannable);
  6. }

加下划线：

Java代码  

  1. public void underline(int start,int end){
  2. SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());
  3. CharacterStyle span=new UnderlineSpan();
  4. spannable.setSpan(span, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  5. setText(spannable);
  6. }

组合运用：

Java代码  

  1. SpannableStringBuilder spannable=new SpannableStringBuilder(getText().toString());
  2. CharacterStyle span_1=new StyleSpan(android.graphics.Typeface.ITALIC);
  3. CharacterStyle span_2=new ForegroundColorSpan(Color.RED);
  4. spannable.setSpan(span_1, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  5. spannable.setSpan(span_2, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  6. setText(spannable);

Java代码  

  1. /**
  2. * 带有\n换行符的字符串都可以用此方法显示2种颜色
  3. * @param text
  4. * @param color1
  5. * @param color2
  6. * @return
  7. */
  8. public SpannableStringBuilder highlight(String text,int color1,int color2,int fontSize){
  9. SpannableStringBuilder spannable=new SpannableStringBuilder(text);//用于可变字符串
  10. CharacterStyle span_0=null,span_1=null,span_2;
  11. int end=text.indexOf("\n");
  12. if(end==-1){//如果没有换行符就使用第一种颜色显示
  13. span_0=new ForegroundColorSpan(color1);
  14. spannable.setSpan(span_0, 0, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  15. }else{
  16. span_0=new ForegroundColorSpan(color1);
  17. span_1=new ForegroundColorSpan(color2);
  18. spannable.setSpan(span_0, 0, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  19. spannable.setSpan(span_1, end+1, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  20. span_2=new AbsoluteSizeSpan(fontSize);//字体大小
  21. spannable.setSpan(span_2, end+1, text.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  22. }
  23. return spannable;
  24. }

以上实际都是Html.fromHtml(html)的代码实现形式。

另外有个问题：如何让一个TextView中的关键字高亮显示？ 
http://www.eoeandroid.com/forum.php?mod=viewthread&tid=57880&page=1&extra=#pid558440 
解决如下：

Java代码  

  1. /**
  2. * 关键字高亮显示
  3. * @param target 需要高亮的关键字
  4. */
  5. public void highlight(String target){
  6. String temp=getText().toString();
  7. SpannableStringBuilder spannable = new SpannableStringBuilder(temp);
  8. CharacterStyle span=null;
  9. Pattern p = Pattern.compile(target);
  10. Matcher m = p.matcher(temp);
  11. while (m.find()) {
  12. span = new ForegroundColorSpan(Color.RED);//需要重复！
  13. spannable.setSpan(span, m.start(), m.end(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  14. }
  15. setText(spannable);
  16. }

循环太慢，不知道有没有简单高效的方法？

下面给出一个类，专门用于将指定的文字转换成表情显示，当然使用前表情图片需要先导入drawable，另外表情图片的数量需要和数组定义的长度一致！否则抛参数异常。

Java代码  

  1. import android.content.Context;
  2. import android.text.Spannable;
  3. import android.text.SpannableStringBuilder;
  4. import android.text.style.ImageSpan;
  5. import android.util.Log;
  6. import java.util.HashMap;
  7. import java.util.regex.Matcher;
  8. import java.util.regex.Pattern;
  9. public class SmileyParser {
  10. private Context mContext;
  11. private String[] mSmileyTexts;
  12. private Pattern mPattern;
  13. private HashMap<String, Integer> mSmileyToRes;
  14. public static final int[] DEFAULT_SMILEY_RES_IDS = {
  15. R.drawable.aini,
  16. R.drawable.aoteman,
  17. R.drawable.baibai,
  18. R.drawable.baobao,
  19. R.drawable.beiju,
  20. R.drawable.beishang,
  21. R.drawable.bianbian,
  22. R.drawable.bishi,
  23. R.drawable.bizui,
  24. R.drawable.buyao,
  25. R.drawable.chanzui,
  26. };
  27. public SmileyParser(Context context) {
  28. mContext = context;
  29. mSmileyTexts = mContext.getResources().getStringArray(DEFAULT_SMILEY_TEXTS);
  30. mSmileyToRes = buildSmileyToRes();
  31. mPattern = buildPattern();
  32. }
  33. public static final int DEFAULT_SMILEY_TEXTS = R.array.default_smiley_texts;
  34. private HashMap<String, Integer> buildSmileyToRes() {
  35. if (DEFAULT_SMILEY_RES_IDS.length != mSmileyTexts.length) {
  36. //          Log.w("SmileyParser", "Smiley resource ID/text mismatch");
  37. //表情的数量需要和数组定义的长度一致！
  38. throw new IllegalStateException("Smiley resource ID/text mismatch");
  39. }
  40. HashMap<String, Integer> smileyToRes = new HashMap<String, Integer>(mSmileyTexts.length);
  41. for (int i = 0; i < mSmileyTexts.length; i++) {
  42. smileyToRes.put(mSmileyTexts[i], DEFAULT_SMILEY_RES_IDS[i]);
  43. }
  44. return smileyToRes;
  45. }
  46. //构建正则表达式
  47. private Pattern buildPattern() {
  48. StringBuilder patternString = new StringBuilder(mSmileyTexts.length * 3);
  49. patternString.append(‘(‘);
  50. for (String s : mSmileyTexts) {
  51. patternString.append(Pattern.quote(s));
  52. patternString.append(‘|‘);
  53. }
  54. patternString.replace(patternString.length() - 1, patternString.length(), ")");
  55. return Pattern.compile(patternString.toString());
  56. }
  57. //根据文本替换成图片
  58. public CharSequence replace(CharSequence text) {
  59. SpannableStringBuilder builder = new SpannableStringBuilder(text);
  60. Matcher matcher = mPattern.matcher(text);
  61. while (matcher.find()) {
  62. int resId = mSmileyToRes.get(matcher.group());
  63. builder.setSpan(new ImageSpan(mContext, resId),matcher.start(), matcher.end(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  64. }
  65. return builder;
  66. }
  67. }

在res/arrays.xml中添加数组：

Xml代码  

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <resources xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
  4. <string-array name="default_smiley_texts">
  5. <item >[爱你]</item>
  6. <item >[机器人]</item>
  7. <item >[拜拜]</item>
  8. <item >[抱抱]</item>
  9. <item >[悲剧]</item>
  10. <item >[悲伤]</item>
  11. <item >[便便]</item>
  12. <item >[鄙视]</item>
  13. <item >[闭嘴]</item>
  14. <item >[不要]</item>
  15. <item >[馋嘴]</item>
  16. </string-array>
  17. </resources>

使用：

Java代码  

  1. public void onCreate(Bundle savedInstanceState) {
  2. super.onCreate(savedInstanceState);
  3. setContentView(R.layout.main);
  4. TextView tvShow = (TextView) findViewById(R.id.tvShow);
  5. TextView tvSource = (TextView) findViewById(R.id.tvSource);
  6. SmileyParser parser = new SmileyParser(this);
  7. String text = "[鄙视][爱你][便便][馋嘴][机器人]";
  8. tvSource.setText("原文："+text);
  9. tvShow.setText(parser.replace("SmileyParser类处理后:"+text));
  10. }

效果： 

付继承关系：

扩展学习： 
android开发：TextView中显示HTML和图片 
最近有人咨询我如何在TextView中显示<img src=""/> html标签内的图片，大家都知道，在TextView中显示HTML内容的方法如下所示：

Java代码  

  1. TextView description=(TextView)findViewById(R.id.description);
  2. description.setText(Html.fromHtml(htmlStr));

如果HTML中有图片的话，显示出来的图片会被一个小框取代，那么怎么样才能看到图片呢？查看了一下API，android.text.Html还还有另一个方法：Html.fromHtml(String source,ImageGetter imageGetter,TagHandler tagHandler)，这个方法使用如下所示：

Java代码  

  1. //<img src=‘http://XXX.png‘ />的情况
  2. ImageGetter imgGetter = new Html.ImageGetter() {
  3. public Drawable getDrawable(String source) {
  4. Drawable drawable = null;
  5. Log.d("Image Path", source);
  6. URL url;
  7. try {
  8. url = new URL(source);
  9. drawable = Drawable.createFromStream(url.openStream(), "");
  10. } catch (Exception e) {
  11. return null;
  12. }
  13. drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
  14. return drawable;
  15. }
  16. };
  17. .........
  18. TextView description=(TextView)findViewById(R.id.description);
  19. description.setText(Html.fromHtml(htmlStr,imgGetter,null));

如果图片在该工程的res/drawable下，那么可以使用下面这种：

Java代码  

  1. //<img src=‘" + R.drawable.icon + "‘ />的情况
  2. ImageGetter imgGetter = new Html.ImageGetter() {
  3. @Override
  4. public Drawable getDrawable(String source) {
  5. int id = Integer.parseInt(source);
  6. Drawable drawable = getResources().getDrawable(id);
  7. //int height = fontH;
  8. //int width = (int) ((float) drawable.getIntrinsicWidth() / (float) drawable.getIntrinsicHeight()) * fontH;
  9. //drawable.setBounds(0, 0, width, height);
  10. drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
  11. return drawable;
  12. }
  13. };

怎么样？很简单，第二个参数TagHandler是干什么的呢？从名称我们就知道是处理HTML中的标签的，比如说遇到某个标签就把它替换为….之类的操作都可以通过TagHandler来处理，呵呵，我可没试过哦，瞎猜的，程序员一定要发挥充分的想像力，自己去试一下吧！ 
最后我要说的是，如果你的图片是从网络上获取的，那么你一定不要用这种方法显示一张图片，因为这是最垃圾的办法，你的程序会经常被卡死。 
那么有没有更好的方法呢？也许不是最好，但我建议您可以使用WebView来显示HTML内容。

时间： 2024-10-25 17:40:29

在EditText中插入表情图片 (CharacterStyle&SpannableString)的相关文章

Android EditText中插入图片并响应点击事件

EditText中插入图片基本就是两种方法: 1,通过Html.fromHtml(..)来实现 [mw_shl_code=java,true]eText.append(Html.fromHtml("<img src='" + R.drawable.ohoh + "'/>", imageGetter, null));[/mw_shl_code] 2,通过ImageSpan与SpannableString/SpannableStringBuilder. [m

Latex中插入.eps图片遇到的问题 (Unknown graphics extension:.eps)

问题表现为: 在Windows下使用pdflatex编译时,所有使用.eps文件的地方都会得到一条错误信息:!LaTex Error:Unknown graphics extension:.eps. 不管你用的是\epsfig.\includegraphics还是其他命令,都会遇到这个问题. 原因: pdflatex只能支持pdf.jpg.jpeg.png共4中格式的图片. 解决: 方法一(换编译链): 使用latex编译不存在这个问题. 就是麻烦和耗时一点,latex直接编译完是ps,需要再用

Android 编辑框插入表情图片

首先,把整理好的表情图片以及布局用到的一些图片导入到项目的res/drawable目录中. 然后,编辑res/layout目录下布局.xml文件,这里我把oschina客户端的布局代码贴上来,供大家参考: tweet_pub.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/a

新浪微博客户端(47)-在TextView中插入表情

DJEmotionPageView.m // 发送点击广播(和android类似,区别在于android的广播是只要有上下文对象context,就可以发送) // iOS中的通知发送和接收都是通过NSNotificationCenter完成 NSMutableDictionary *userInfo = [NSMutableDictionary dictionary]; userInfo[DJEmotionDidSelctedEmotionKey] = btn.emotion; [[NSNoti

如何在PDF文档内容中插入/添加图片文件

现在很多人都会使用PDF格式文件,但是却很少会有人知道怎么编辑这种文件,我们所见的PDF格式文档是一种及其特殊的文件,这种文不论是修改还是编辑都非常的困难,因此,如果我们需要在PDF文件中插入图片的话该怎么做呢?今天小编就来为大家详细的介绍下如何使用专业软件在PDF文件中插入图片! 需要使用的软件是迅捷PDF编辑器,是一款专业的PDF编辑软件,下载很简单,只要在浏览器上搜索到迅捷PDF编辑器是官方网站,点击软件下载后选择下路径就可以了.安装运行也极为简单,还要按照提示点击下一步就可以了,在官网下

Latex中插入矢量图片（带latex公式）

情景描述:在latex文件中,需要插入一张图片,图片内容包括几个圆圈.几条线和一些特殊的数学公式. 方案: 1.使用visio作图,然后插入数学公式.问题:导出图片的话,不是矢量,无法放大:导出pdf,进行裁剪,但是,word里的公式不是很美观,可能与latex的公式不兼容. 2.使用Inkscape,制作矢量图,在图上可以输入latex格式的公式,然后使用input将文件导入. 第2个方案保持了一致性和灵活性,因此,采用之. inkscape图片: latex源代码: 最终效果图:

关于在HTML表格中插入背景图片图片重复显示的问题

先来一段有问题的代码(其实也不能说是有问题,毕竟语法上是没问题的,只是出来的效果不是我们想要的--我们假设预期的效果是背景图片只填充一次而不是多次.) <span style="font-size:18px;"><html> <head> <title>设定表格的背景图像</title> </head> <body> <table border=3 width=400 height=100 bor

Android EditText插入表情（字符串）到光标位置

前言 之前写的一个Android应用,在回复帖子插入表情的时候存在一个BUG,就是无法在EditText中指定的光标处插入表情字符串,每次添加的表情字符串都跑到了文字末尾.分析了一下apk源码,发现是在表情盘的onClick响应事件中没有正确处理表情字符串的添加方法,这里记录一下如何在EditText指定光标处插入表情字符串. EditText光标处插入表情字符串的方法 既然是在EditText控件中插入表情字符串,那首先需要获取EditText控件对象,示例源码如下: EditText rEd

怎么在CAD图纸中插入需要的JPG图片呢？

做CAD相关工作的小伙伴们,在日常的办公工作中,我们常常会遇到这一问题,把JPG图片插入到已知的CAD图纸中,即在CAD图纸中插入JPG图片对象.这时候我们该如何才能解决呢?小编推荐大家使用迅捷CAD编辑器.今天小编就给大家具体演示一下.具体步骤如下: 步骤一:首先需要我们在电脑端下载安装迅捷CAD编辑器. 步骤二:运行迅捷CAD编辑器软件,点击"文件-打开"按钮,在"打开"弹窗中选择好我们需要处理的CAD图纸文件打开. 步骤三:打开CAD图纸文件后,在"