Android实现EditText图文混合插入上传功能
前段时间做了一个android会议管理系统，项目需求涉及到edittext的图文混排，如图：
在上图的”会议详情”中，需要支持文本和图片的混合插入，下图演示输入的示例：
当会议创建完成以后，保存数据到服务器，然后查看刚刚创建好的会议，如图：
一、明确需求
首先，点击”会议详情”文本框中，正常输入文本，然后点击左下角的图片图标，进入系统的相册用来选择一张图片并插入到文本框中，你还可以将光标停留在任意的文字中间，完成图片的插入，回退建即可以逐个删除文字，也可以删除图片。
二、实现思路
如果要在一个edittext中显示图片，首先得简单了解一下spannablestring和imagespan的使用。
在上面的图文混排的edittext中，虽然看到了生动的图文效果，但是实际上输出edittext的get text().tostring()，
其实是："插入一张图片<img src=\"" + url1+ "\" />。再插入一张图片<img src=\"" + url2+ "\" />。"。
也就是说，当我选择图片插入到edittext中时，虽然显示了该图片，但是插入进去的其实是这个图片的url。
当我保存这条记录时，传给服务器的值就是："插入一张图片<img src=\"" + url1+ "\" />。
再插入一张图片<img src=\"" + url2+ "\" />。"
这部分代码如下：
1.点击图片按钮进入系统相册
/**
* 图文详情页面选择图片
*/
public void getimage() {
intent = new intent(intent.action_get_content);
intent.addcategory(intent.category_openable);
intent.settype("image/*");
startactivityforresult(intent, 0);
}
2.获取到该图片并调用接口将图片上传到服务器，上传成功以后获取到服务器返回的该图片的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=\"" + 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: 为什么要把图片上传到服务器上获取url？
a1: pm要求每插入一次图片就要调接口将图片上传到服务器上，该接口会返回该图片的url过来，尽管这种要求并不是个好的解决方案。如果不需要保存图文混合插入的内容，那就不必执行这一步，在imagespan替换时，可以用任意字符替换，因为对于spanneblestring而言，插入的图片其实就是一些字符而已，这一点可以输出edittext.gettext().tostring()来验证。
// 用imagespan对象替换 spannablestring.setspan(imagespan, 0, "图片1", spannable.span_exclusive_exclusive);
q2: 为什么要把图片的url再次包装成带img标签的字符串？
a2: 因为项目的另外一个需求是编辑会议，也就是图文混合插入的内容支持以后的再次编辑。
当调用会议编辑接口时，会返回会议详情的数据，这些数据就是："插入一张图片<img src=\"" + url1+ "\" />。再插入一张图片<img src=\"" + url2+ "\" />。"
为了让会议详情页面的图文回显到edittext中，我会对这些字符串通过正则匹配"<img src=\''+*+"\">，如果匹配到这种格式，就代表它是一个图片，然后通过一些处理将图片回显出来。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。