美文网首页Android自定义控件自定义android
Android 图文混排(二) EditText实现图文显示

Android 图文混排(二) EditText实现图文显示

作者: 晓峰残月 | 来源:发表于2016-01-24 17:45 被阅读15340次

总体思路如下:

通过ImageSpan来放置图片,再创建一个SpannableString对象,以便插入用ImageSpan对象封装的图像,最后用ImageSpan对象替换你指定的字符串,完成EditText的图文混排

具体操作:
1、选择要插入的图片,这里我把图片上传到了服务器,服务器回给我一个网络访问地址,这样可以结合Android 图文混排(一) TextView实现图文显示形成一个发布和现实的过程。获得服务器的地址,然后创建ImageSpan对象

Bitmap loadedImage = BitmapFactory.decodeFile(path);
loadedImage = Bitmap.createBitmap(loadedImage, 0, 0, loadedImage.getWidth(), loadedImage.getHeight(), matrix,        true);
ImageSpan imageSpan = new ImageSpan(context, loadedImage);

2、创建一个SpannableString对象,以便插入用ImageSpan对象封装的图像,SpannableString的值我们就用html的img标签,src里面我们放置服务器给我们的网络访问地址

String tempUrl = "<img src=\"" + url + "\" />";
SpannableString spannableString = new SpannableString(tempUrl);

3、用ImageSpan对象替换你指定的字符串,并将选择的图片追加到EditText中光标所在位置

spannableString.setSpan(imageSpan, 0, tempUrl.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// 将选择的图片追加到EditText中光标所在位置
int index = et.getSelectionStart(); 
// 获取光标所在位置
Editable edit_text = et.getEditableText();
if (index < 0 || index >= edit_text.length()) {
    edit_text.append(spannableString);
} else {
    edit_text.insert(index, spannableString);
}

4、最后,为了不让图片挤在一起,我们在图片后面加上一个换行

edit_text.insert(index + spannableString.length(), "\n");
System.out.println("插入的图片:" + spannableString.toString());

附上效果图

S60124-174216.jpg S60124-174311.jpg S60124-174320.jpg

如有什么不对或者不规范的地方请留言或私信我,非常感谢

传送门:
1、Android 图文混排(一) TextView实现图文显示
2、Android 图文混排(二) EditText实现图文显示
3、Android 图文混排(三)TextView图片点击

相关文章

网友评论

  • 不爱也罢:有没有demo可以参考啊
  • 张瑾瑜:大佬,可以帮整个项目文件发给我一下吗?只是看代码还是太费解:relaxed: 2931675398@qq.com
  • flywfk:你好,有demo吗?急用
  • a9da78ea2416:能给个图片资源吗?:smile:
  • cfe1c1fef66e:感谢大神的分享
  • Jared_Bai:你好,有没有整个Demo的源码,我对上传图片那一块的逻辑还是不太清楚,如果可以麻烦将整个Demo的源码发给我一下,最近项目上要做图文混排,谢谢了
    DJ鼎尔东XXL: @Jared_Bai 同意,同求源码😂
  • 30d510f59682:请问有加上自动换行不?
  • 36a494caae20:楼主你好,我如果直接调用insertImageSpan()函数,那里面的参数我该怎么写呢
  • The丶Road:楼主你好,我现在想实现发帖功能,布局上面是scrollview里面是Edittext,底下是linearlayout有图片和表情选择按钮,最底下是空的linearlayout来加载所有表情,选择一张图片后,获取焦点弹出软键盘并没有将图片全部顶上去,而是顶上去一半光标显示在了软键盘中间,但是使用软键盘再次输入字时就会顶上去,请问楼主选择图片后获取焦点会把图片全部顶上去吗?Edittext的高度怎么设置的?
    晓峰残月:@行走丶路上 具体的没有碰到,不好意思啊
  • 1e7608557be9:你好 能有EditText图文混排的demo么 ?编辑插入图片根据您的教导已经做好了,但是文本传过来含图片路径怎么都显示不出来,谢谢
    1e7608557be9:@晓峰残月 图片在Edittext中展示了,但是再次获取的EditText的值得时候原有的图片URL全部没了,求解啊,谢谢
    晓峰残月:@1e7608557be9 和textview现实方法类似的
  • sendtion:请问楼主,怎么获得Editext内容保存为字符串呢?或者保存为html?怎么把文字和img标签拼接起来呢?我直接gettext,获得的内容不全,只能获得首段文字和第一张图片,求大神解答
    晓峰残月:@sendtion是的,你可以嵌套一个scroolview来解决滑动卡的问题
    sendtion: @晓峰残月 感谢回复,已经解决了这个问题,但是textview显示图文滑动有点卡?这是为什么呢?
    晓峰残月:@sendtion 其实edittext里面就是字符串,我只是把img标签转换成了图片现实出来,gettext是可以获得字符串的
  • tyh520life:怎么引用的
  • 2e1c6188c028:loadedImage = Bitmap.createBitmap(loadedImage, 0, 0, loadedImage.getWidth(), loadedImage.getHeight(), matrix, true); 中的matrix怎么填
  • 扣子兮兮:好强大👍
    晓峰残月: @fix扣子 谢谢支持
  • 谷谷_z:ImageLoader SimpleImageLoadingListener 楼组能把这个发一下吗,谢谢啦
    晓峰残月: @HappyPaul 这个是开源的图片加载库
  • bd4ef8b84b05:图片上传的源码有么,不太懂这个 :sob:
    bd4ef8b84b05:@晓峰残月 谢谢 :joy:
    晓峰残月:@bd4ef8b84b05 不好意思啊,昨晚没有看见
    晓峰残月:@bd4ef8b84b05 链接: http://pan.baidu.com/s/1bouOto7 密码: uufv
  • bd4ef8b84b05:楼主能把完整代码发一下么 初学者有个上传的看不太懂
  • 6bd030a61eda:我的工程也用到了这个方法。超过一个字符,替换文字后会添加两次图片
    不知道是什么原因
    小明从教科书中复活了:@花啦草啦 请问楼上几位问题都解决了吗 ? 我也遇到了
    花啦草啦:我也遇到这个问题了,正发愁中!内容是没问题的,就是显示出问题,而且添加完图片后,文字都看不到了!
    嘿张开心:@6bd030a61eda 我也遇到,你的问题解决了么
  • 嘿张开心:可以给分源码么?最近项目正好用到这一块,没接触过。谢谢
  • 为何是Hex的昵称:请教一下,图片能响应点击事件什么的么?
    为何是Hex的昵称:@晓峰残月 谢谢回复,看到了。学习了
    晓峰残月:@为何是Hex的昵称 Android 图文混排(三)TextView图片点击:(http://www.jianshu.com/p/4e79e20731fe)
    晓峰残月:@为何是Hex的昵称 可以的,setMovementMethod(LinkMovementMethod.getInstance())就可以使点击 UrlSpan 能够触发打开链接的功能,我们需要自己定义让ImageSpan 也触发一个事件,具体的我整理下,晚些时候做个图文混排的补充

本文标题:Android 图文混排(二) EditText实现图文显示

本文链接:https://www.haomeiwen.com/subject/nlirkttx.html