Android图文混排（一）－实现EditText图文混合插入上传

前段时间做了一个Android会议管理系统，项目需求涉及到EditText的图文混排，如图：

在上图的”会议详情”中，需要支持文本和图片的混合插入，下图演示输入的示例：
当会议创建完成以后，保存数据到服务器，然后查看刚刚创建好的会议，如图：

---

一、明确需求
首先，点击”会议详情”文本框中，正常输入文本，然后点击左下角的图片图标，进入系统的相册用来选择一张图片并插入到文本框中，你还可以将光标停留在任意的文字中间，完成图片的插入，回退建即可以逐个删除文字，也可以删除图片。<喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxzdHJvbmc+tv6hosq1z9bLvMK3PC9zdHJvbmc+PC9wPg0KPHByZSBjbGFzcz0="brush:java;">如果要在一个EditText中显示图片，首先得简单了解一下SpannableString和ImageSpan的使用。 在上面的图文混排的EditText中，虽然看到了生动的图文效果，但是实际上输出EditText的get Text().toString()， 其实是："插入一张图片。再插入一张图片。"。 也就是说，当我选择图片插入到EditText中时，虽然显示了该图片，但是插入进去的其实是这个图片的url。 当我保存这条记录时，传给服务器的值就是："插入一张图片。 再插入一张图片。" 这部分代码如下：

1.点击图片按钮进入系统相册

?

1 2 3 4 5 6 7 8 9

<code class = "hljs java" >    /**       * 图文详情页面选择图片       */      public void getImage() {          intent = new Intent(Intent.ACTION_GET_CONTENT);          intent.addCategory(Intent.CATEGORY_OPENABLE);          intent.setType( "image/*" );          startActivityForResult(intent, 0 );      }</code>

2.获取到该图片并调用接口将图片上传到服务器，上传成功以后获取到服务器返回的该图片的url

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<code class = "hljs java" >    @Override      protected void onActivityResult( int requestCode, int resultCode, Intent data) {          if (resultCode == RESULT_OK && requestCode == 0 ) {              ContentResolver resolver = getContentResolver();              // 获得图片的uri              Uri originalUri = data.getData();              bitmap = null ;              try {                  Bitmap originalBitmap = BitmapFactory.decodeStream(resolver.openInputStream(originalUri));                  bitmap = ImageUtils.resizeImage(originalBitmap, 600 );                  // 将原始图片的bitmap转换为文件                  // 上传该文件并获取url                  new Thread( new Runnable() {                      @Override                      public void run() {                          insertPic(bitmap, 0 );                      }                  }).start();              } catch (FileNotFoundException e) {                  e.printStackTrace();              }            } ｝</code>

3.通过执行insertPic()方法，获取到url并做一些处理，让其在edittext中显示

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<code class = "hljs java" >    /**       * 插入图片       */      private void insertPic(Bitmap bm, final int index) {          AjaxParams params = new AjaxParams();          try {              params.put( "image" , LeoUtils.saveBitmap(bm));          } catch (FileNotFoundException e) {              e.printStackTrace();          }          FinalHttp fh = new FinalHttp();          System.out.println( "params=" + params.toString());          fh.post(HttpUrlConstant.UPLOAD_PIC, params, new AjaxCallBack<object>() {              @Override              public void onFailure(Throwable t, int errorNo, String strMsg) {                  super .onFailure(t, errorNo, strMsg);                  ToastUtil.show(getApplicationContext(), "图片上传失败，请检查网络" )；              }                @Override              public void onSuccess(Object t) {                  super .onSuccess(t);                    System.out.println(t.toString());                  try {                      JSONObject jsonObject = new JSONObject(t.toString());                      String url = jsonObject.getString( "recordName" );                      switch (index) {                        case 0 :                          // 根据Bitmap对象创建ImageSpan对象                          ImageSpan imageSpan = new ImageSpan(CreateMeetingActivity. this , bitmap);                          // 创建一个SpannableString对象，以便插入用ImageSpan对象封装的图像                          String tempUrl = "<img src=" " url=" " style=" display: none; "><img alt=" 加载中... " title=" 图片加载中... " src=" http: //www.2cto.com/statics/images/s_nopic.gif">";                          SpannableString spannableString = new SpannableString(tempUrl);                          // 用ImageSpan对象替换你指定的字符串                          spannableString.setSpan(imageSpan, 0 , tempUrl.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);                          // 将选择的图片追加到EditText中光标所在位置                          int index = et_detail.getSelectionStart(); // 获取光标所在位置                          Editable edit_text = et_detail.getEditableText();                          if (index < 0 || index >= edit_text.length()) {                              edit_text.append(spannableString);                          } else {                              edit_text.insert(index, spannableString);                          }                          System.out.println( "插入的图片：" + spannableString.toString());                            break ;                        case 1 :                          // 与本案例无关的代码                          break ;                        }                  } catch (JSONException e) {                      e.printStackTrace();                  }                }          });        }</object></code>

上面的注释写的很详细了，即使之前不了解SpannerString和ImageSpan，相信也能够体会到它们的用法。至此，android edittext的图文混合插入需求就已经完成了。

三、补充说明
Q1: 为什么要把图片上传到服务器上获取url？
A1: PM要求每插入一次图片就要调接口将图片上传到服务器上，该接口会返回该图片的url过来，尽管这种要求并不是个好的解决方案。如果不需要保存图文混合插入的内容，那就不必执行这一步，在imageSpan替换时，可以用任意字符替换，因为对于spannebleString而言，插入的图片其实就是一些字符而已，这一点可以输出edittext.gettext().tostring()来验证。

?

1 2	<code class = "hljs avrasm" > // 用ImageSpan对象替换 spannableString.setSpan(imageSpan, 0 , "图片1" , Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);</code>

Q2: 为什么要把图片的url再次包装成带img标签的字符串？

?

1 2 3 4 5

<code class = "hljs 1c" >A2: 因为项目的另外一个需求是编辑会议，也就是图文混合插入的内容支持以后的再次编辑。 当调用会议编辑接口时，会返回会议详情的数据， 这些数据就是： "插入一张图片<img src=" " style=" display: none; "><img alt=" 加载中... " title=" 图片加载中... " src=" http: //www.2cto.com/statics/images/s_nopic.gif">。再插入一张图片<img src="" style="display: none;"><img alt="加载中..." title="图片加载中..." src="http://www.2cto.com/statics/images/s_nopic.gif">。" 为了让会议详情页面的图文回显到EditText中，我会对这些字符串通过正则匹配 "<img src=" " style=" display: none; "><img alt=" 加载中... " title=" 图片加载中... " src=" http: //www.2cto.com/statics/images/s_nopic.gif">， 如果匹配到这种格式，就代表它是一个图片，然后通过一些处理将图片回显出来。</