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

Android图文混排(一)-实现EditText图文混合插入上传的相关文章

Android图文混排-实现EditText图文混合插入上传

前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中.须要支持文本和图片的混合插入,下图演示输入的演示样例: 当会议创建完毕以后,保存数据到server.然后查看刚刚创建好的会议.如图: 一.明白需求 首先.点击"会议详情"文本框中,正常输入文本,然后点击左下角的图片图标.进入系统的相冊用来选择一张图片并插入到文本框中,你还能够将光标停留在随意的文字中间,完毕图片的插入.回退建即能够逐个删除文字,也能够

静态页面制作:8HTML浮动腾挪概念(铺垫二:图文混排)

.paragraph { width: 80%; margin: 50px auto; color: #666; font-size: 20px; text-align: left; line-height: 200%; padding: 30px } 现在那我们来说说第二个铺垫. 第二个铺垫叫做图文混排.什么是图文混排呢,这个东西我们还需要花些时间来分析一下的.首先看下图: 其实上图就是一个例子,然而这个例子其实在我们浏览网页,或者看一些微博.博客等文章时,我们发现这种格式很常见.这种有内容.

NGUI研究之有点坑爹的图文混排

 最近研究了了一下NGUI的图文混排工具,得出的结论是有点坑爹..大家看看我的测试步骤,我用的是目前NGUI的版本3.6.6 . 当我在 Open BitMapFont Marker 的时候界面上出现Assets/NGUI/Editor/FreeType.dylib is missing 的字样.于是查了一下,大概意思是必须要把FreeType.dylib 文件拷贝在/usr/local/lib/FreeType.dylib路径下面.FreeType.dylib 文件在NGUI/Editor

Office操作:图文混排三步曲

我们在编辑Word文档的时候,图片和文字的混排编辑可能是我们遇到的最为主要的情况,恰到好处的图文混排不仅可以起到美化文档的效果,对于阅读者阅读并理解文档内容也是大有裨益.因此,熟练掌握Word的图文混排是我们制作比如海报.杂志.刊物.贺卡等这类非纯文本文档的第一步,今天,我在这给大家介绍图文混排的基本知识及技巧,先给大家展示一个效果图. Office操作:图文混排三步曲效果展示准备工作:1.准备好文字材料:2.准备好图片素材:3.构思好排版效果. 图文混排第一步:在文档中插入图片.方法:通过[插

仿小米便签图文混排 EditText解决尾部插入文字bug

一直想实现像小米便签那样的图文混排效果,收集网上的办法无非三种: 1.自定义布局,每张图片是一个ImageView,插入图片后插入EditText,缺点是实现复杂,不能像小米便签那样同时选中图片和文字 2.通过Html.fromHtml(source),可以将图片加载写进ImageGetter,实现后无bug,但是只能显示Html,当EditText setText后,想取出之前的HTML格式      图片得到的是一个obj的字符,查看了很多博客,包括stackoverflow也没给出办法从e

Android Json数据的解析+ListView图文混排+缓存算法Lrucache 仿知乎

前几天心血来潮,打算根据看知乎的API自己做一个小知乎,定制的过程遇到ListView的优化问题及图片未缓存重加载等等许多问题,解决了以后打算和博友分享一下. 接口数据:http://api.kanzhihu.com/getpostanswers/20150925/archive 首先,Json数据太常用,相信每一位开发者Json的解析都是必备的.我们要准备以下知识: JavaBean,枚举你需要的元素,用来存储数据. 异步加载网络内容的必备途径,多线程加载+AsyncTask两种方式. Jso

Android 自绘TextView解决提前换行问题,支持图文混排

先看下效果图: 上面是MTextView,下面是默认的TextView. 一.原因 用最简单的全英文句子为例,如果有一个很长的单词,这一行剩余的空间显示不下了,那么规则就是不打断单词,而是把整个单词丢到下一行开始显示.这样本来没有错.一是咱们中国人都是方块字,怎么都放得下,不存在英文的这个问题.所以不习惯那个排版.二是如果TextView里面有图片,如图,不知道判断单词的代码是怎么弄得,总之它觉得最后一个啦字和后面的一串表情应该是一个整体,不能分开,就一起丢到第二行了,也就造成了这种难看的排版.

EditText图文混排

下面就具体说一下我遇到的问题,首先是EditText里面的图文混排问题,这个问题的难点就是三点: 1.怎么插图片 2.怎么保存插入的图片和文字 3.怎么解析回图片和文字 解决: 一.怎么插入图片 在这里定义了两个Button按钮和一个EditText,插入图片的话,就是点击插入图片按钮然后从sd卡中选择一张图片出来.下面是实现代码: 首先是button的监听事件: btn_insertImage.setOnClickListener(new OnClickListener() { @Overri

android:如何在TextView实现图文混排

我们通常在TextView文本中设置文字.可是如何设置图文混排呢? 我就在这里写一个例子 .我们需要用到一点简单的HTML知识 在TextView中预订了一些类似HTML的标签,通过标签可以使TextView控件显示不同颜色,大小,字体的文字 <font>:设置颜色和字体 <big>:设置大号 <small>:设置小号 <i>\<b>:斜体.粗体 <a>:链接地址 <img>:插入图片 在drawable中存入我们的图片.