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

新手入门 AndroidChina 2个月前 (01-19) 1830浏览 1评论

前段时间做了一个Android会议管理系统，项目需求涉及到EditText的图文混排，如图：
Android图文混排_第1张图片
在上图的”会议详情”中，需要支持文本和图片的混合插入，下图演示输入的示例： Android图文混排_第2张图片
当会议创建完成以后，保存数据到服务器，然后查看刚刚创建好的会议，如图：
Android图文混排_第3张图片

一、明确需求
首先，点击”会议详情”文本框中，正常输入文本，然后点击左下角的图片图标，进入系统的相册用来选择一张图片并插入到文本框中，你还可以将光标停留在任意的文字中间，完成图片的插入，回退建即可以逐个删除文字，也可以删除图片。

二、实现思路

如果要在一个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 &amp;&amp; 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&lt;Object&gt;() {            @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 = "&lt;img src=\"" + url + "\" /&gt;";                        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 &lt; 0 || index &gt;= 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图文混排

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

更多相关文章

随机推荐