EditText利用SpannableString和ImageSpan将字符串解析成图文混合形式

完整项目Github链接:FLAGS

在EditText中实现图文混排的方法在上一篇博客中已经说了,链接在此:android的EditText里文字和图片混合编辑与显示

那篇博客里确实实现了如何在EditText中插入图片,并将如何显示的方法都写出来了,仿佛没问题,但是当我想把它保存到数据库的时候莫名报错了,我输出一看,好家伙,那篇文章用到了ImageGetter,但是只能用于显示,而当调用EditText.getText().toString()后,图片那个地方输出的是用虚线框框住的OBJ ,而不是我想象中的<img src="xxx"/> ,没法保存,而且就算保存了也无法拿出来再显示了。

而解决办法就在这篇博客了,自己用正则式对其做一个解析。

声明一下,我的上篇博客使用了Spannable和ImageSpan来加载图片,不了解Spannable和ImageSpan的可以看这篇博客(很短很好理解):android 图文结合,使用SpannableString和ImageSpan类

然后我的图片格式是这样:<img src="图片在本地的路径" />

所以我的content保存的内容形式是这样:

我爱吃东西<img src="/storage/emulated/0/DCIM/Camera/IMG_20180220_184453.jpg"/>胖啊胖啊

那么如何将这种格式的字符串重新解析成图文混合的形式呢?

思路如下:
首先将代表图片的字符串全部提取出来,即<img src="xxx" /> ,然后将里面的图片地址提取出来,但是要保存<img ....> 这一段的起始地址和结束地址,用于将这一段替换成图片,而不要再显示出来了。

代码实现如下,注释很详细了。

private void initContent(){
        //input是获取将被解析的字符串
        String input = flag.getContent().toString();
        //将图片那一串字符串解析出来,即<img src=="xxx" />
        Pattern p = Pattern.compile("\\<img src=\".*?\"\\/>");
        Matcher m = p.matcher(input);

        //使用SpannableString了,这个不会可以看这里哦:http://blog.sina.com.cn/s/blog_766aa3810100u8tx.html#cmt_523FF91E-7F000001-B8CB053C-7FA-8A0
        SpannableString spannable = new SpannableString(input);
        while(m.find()){
            //Log.d("YYPT_RGX", m.group());
            //这里s保存的是整个式子,即<img src="xxx"/>,start和end保存的是下标
            String s = m.group();
            int start = m.start();
            int end = m.end();
            //path是去掉<img src=""/>的中间的图片路径
            String path = s.replaceAll("\\<img src=\"|\"\\/>","").trim();
            //Log.d("YYPT_AFTER", path);

            //利用spannableString和ImageSpan来替换掉这些图片
            int width = ScreenUtils.getScreenWidth(AddFlagActivity.this);
            int height = ScreenUtils.getScreenHeight(AddFlagActivity.this);

            Bitmap bitmap = ImageUtils.getSmallBitmap(path,width,480);
            ImageSpan imageSpan = new ImageSpan(this, bitmap);
            spannable.setSpan(imageSpan,start,end, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        }
        content.setText(spannable);
        content.append("\n");
        //Log.d("YYPT_RGX_SUCCESS",content.getText().toString());
    }



欢迎大家加入QQ群一起交流讨论,「吟游」程序人生——YinyouPoet

posted @ 2018-02-24 12:44  _吟游诗人  阅读(300)  评论(0编辑  收藏  举报