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=\''+*+"\">,如果匹配到这种格式,就代表它是一个图片,然后通过一些处理将图片回显出来。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android编程之Button控件配合Toast控件用法分析
这篇文章主要介绍了Android编程之Button控件配合Toast控件用法,结合实例形式分析了Button控件及Toast控件的功能及具体使用技巧,需要的朋友可以参考下2015-12-12Android使用友盟集成QQ、微信、微博等第三方分享与登录方法详解
之前的项目第三方分享和登录一直都使用ShareSDK实现的。为了统一使用友盟的全家桶,所以三方分享和登录也就选择了友盟,这里为大家整理出详细方法2018-03-03Android OpenGL入门之GLSurfaceView
这篇文章主要介绍了OpenGL入门知识,如何在Android中使用GLSurfaceView,如果对OpenGL感兴趣的同学,可以参考下2021-04-04
最新评论