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());
}