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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android使用动画动态添加商品进购物车

    本文实例为大家分享了Android添加商品进购物车的具体代码,供大家参考,具体内容如下

    砸漏
  • python使用PIL剪切和拼接图片

    本文实例为大家分享了python使用PIL剪切图片和拼接图片的具体代码,供大家参考,具体内容如下

    砸漏
  • PS如何实现拉伸图片不变形?

    ps是我们常用的一款处理平面图像的软件,其功能十分强大能够制作出逼真的效果。那么在ps中我们如何实现拉伸图片时不变形?

    砸漏
  • 快速入门开发实现订单类图片识别结果抽象解析

    摘要:本文主要介绍一种针对订单类图片识别结果进行行列解析的抽象流程和方案,帮助提高开发效率。

    宜信技术学院
  • android-async-http详解

    android-async-http开源项目可以是我们轻松的获取网络数据或者向服务器发送数据,使用起来非常简单,关于android-async-http开源项...

    xiangzhihong
  • 《Prometheus监控实战》第8章 监控应用程序

    yeedomliu
  • 图片风格转移Let there be Color!: Joint End-to-end Learning of Global and Local Image Priors for Automatic

    这就是论文的目的,将一张黑白图片着色为一张彩色图片 再看这篇文章前,最好是对神经网络有了初步的了解。文章第三部分,很大篇幅在介绍神经网络的一些基础知识。演示de...

    水球喵子
  • Java基础之IO流(二)

    在上一篇中,我们一直都是在操作文件或者文件夹,并没有给文件中写任何数据。现在我们就要开始给文件中写数据,或者读取文件中的数据

    Remember_Ray
  • JDBC(八)批量处理

    当需要成批插入或者更新记录时。可以采用Java的批量更新机制,这一机制允许多条语句一次性提交给数据库批量处理。通常情况下比单独提交处理更有效率

    leeqico
  • PC微信逆向:实现自动保存加密的聊天图片

    本文基于 anhkgg 大佬的文章《微信 PC 端技术研究(2)-拿下语音》,原文链接:

    信安之路

扫码关注云+社区

领取腾讯云代金券