欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现EditText图文混合插入上传功能

程序员文章站 2023-11-24 08:23:22
前段时间做了一个android会议管理系统,项目需求涉及到edittext的图文混排,如图:   在上图的”会议详情”中,需要支持文本和图片的混合插...

前段时间做了一个android会议管理系统,项目需求涉及到edittext的图文混排,如图:

Android实现EditText图文混合插入上传功能 

在上图的”会议详情”中,需要支持文本和图片的混合插入,下图演示输入的示例:

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=\''+*+"\">,如果匹配到这种格式,就代表它是一个图片,然后通过一些处理将图片回显出来。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。