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

一年好景君须记，最是橙黄橘绿时。这篇文章主要讲述Android图文混排－实现EditText图文混合插入上传相关的知识，希望能为你提供帮助。
前段时间做了一个android会议管理系统，项目需求涉及到EditText的图文混排，如图：

文章图片

在上图的”会议详情”中。须要支持文本和图片的混合插入，下图演示输入的演示样例：

文章图片

当会议创建完毕以后，保存数据到server。然后查看刚刚创建好的会议。如图：

文章图片

一、明白需求
首先。点击”会议详情”文本框中，正常输入文本，然后点击左下角的图片图标。进入系统的相冊用来选择一张图片并插入到文本框中，你还能够将光标停留在随意的文字中间，完毕图片的插入。回退建即能够逐个删除文字，也能够删除图片。

二、实现思路

假设要在一个EditText中显示图片，首先得简单了解一下SpannableString和ImageSpan的使用。在上面的图文混排的EditText中。尽管看到了生动的图文效果。可是实际上输出EditText的get Text().toString()。事实上是："插入一张图片< img src=https://www.songbingjia.com/"" + url1+ "\" /> 。再插入一张图片< img src=https://www.songbingjia.com/"" + url2+ "\" /> 。"。也就是说，当我选择图片插入到EditText中时，尽管显示了该图片，可是插入进去的事实上是这个图片的url。当我保存这条记录时，传给server的值就是："插入一张图片< img src=https://www.songbingjia.com/"" + url1+ "\" /> 。再插入一张图片< img src=https://www.songbingjia.com/"" + url2+ "\" /> 。" 这部分代码例如以下：

1.点击图片button进入系统相冊

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

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

@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(); }} ｝

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

/** * 插入图片 */ 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=https://www.songbingjia.com/"" + url + "\" /> "; 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(); }} }); }

上面的凝视写的非常具体了。即使之前不了解SpannerString和ImageSpan。相信也能够体会到它们的使用方法。
至此，android edittext的图文混合插入需求就已经完毕了。
三、补充说明
Q1: 为什么要把图片上传到server上获取url？
A1:PM要求每插入一次图片就要调接口将图片上传到server上。该接口会返回该图片的url过来。尽管这样的要求并非个好的解决方式。假设不须要保存图文混合插入的内容。那就不必运行这一步。在imageSpan替换时，能够用随意字符替换，由于对于spannebleString而言。插入的图片事实上就是一些字符而已，这一点能够输出edittext.gettext().tostring()来验证。

// 用ImageSpan对象替换 spannableString.setSpan(imageSpan, 0, "图片1", Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

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

A2: 由于项目的另外一个需求是编辑会议。也就是图文混合插入的内容支持以后的再次编辑。当调用会议编辑接口时。会返回会议详情的数据。这些数据就是："插入一张图片< img src=https://www.songbingjia.com/"" + url1+ "\" /> 。【Android图文混排－实现EditText图文混合插入上传】再插入一张图片< img src=https://www.songbingjia.com/"" + url2+ "\" /> 。" 为了让会议详情页面的图文回显到EditText中，我会对这些字符串通过正则匹配"< img src=https://www.songbingjia.com/‘‘+*+"\"> ，假设匹配到这样的格式。就代表它是一个图片。然后通过一些处理将图片回显出来。