Android图文混排-实现EditText图文混合插入上传
Posted liguangsunls
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android图文混排-实现EditText图文混合插入上传相关的知识,希望对你有一定的参考价值。
前段时间做了一个android会议管理系统,项目需求涉及到EditText的图文混排,如图:
在上图的”会议详情”中。须要支持文本和图片的混合插入,下图演示输入的演示样例:
当会议创建完毕以后,保存数据到server。然后查看刚刚创建好的会议。如图:
一、明白需求
首先。点击”会议详情”文本框中,正常输入文本,然后点击左下角的图片图标。进入系统的相冊用来选择一张图片并插入到文本框中,你还能够将光标停留在随意的文字中间,完毕图片的插入。回退建即能够逐个删除文字,也能够删除图片。
二、实现思路
假设要在一个EditText中显示图片,首先得简单了解一下SpannableString和ImageSpan的使用。
在上面的图文混排的EditText中。尽管看到了生动的图文效果。可是实际上输出EditText的get Text().toString()。
事实上是:"插入一张图片<img src=\"" + url1+ "\" />。再插入一张图片<img src=\"" + url2+ "
\" />。"。
也就是说,当我选择图片插入到EditText中时,尽管显示了该图片,可是插入进去的事实上是这个图片的url。
当我保存这条记录时,传给server的值就是:"插入一张图片<img src=\"" + url1+ "\" />。
再插入一张图片<img src=\"" + 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=\"" + 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=\"" + url1+ "\" />。
再插入一张图片<img src=\"" + url2+ "\" />。"
为了让会议详情页面的图文回显到EditText中,我会对这些字符串通过正则匹配"<img src=\‘‘+*+"\">,
假设匹配到这样的格式。就代表它是一个图片。然后通过一些处理将图片回显出来。