EditText图文混排
下面就具体说一下我遇到的问题,首先是EditText里面的图文混排问题,这个问题的难点就是三点:
1.怎么插图片
2.怎么保存插入的图片和文字
3.怎么解析回图片和文字
解决:
一.怎么插入图片
在这里定义了两个Button按钮和一个EditText,插入图片的话,就是点击插入图片按钮然后从sd卡中选择一张图片出来。下面是实现代码:
首先是button的监听事件:
btn_insertImage.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubIntent getImage = new Intent(Intent.ACTION_GET_CONTENT);getImage.addCategory(Intent.CATEGORY_OPENABLE);getImage.setType("image/*");startActivityForResult(getImage, 1);}});
来分析一下代码:
1.ACTION_GET_CONTENT是标准的Activity Action的一种,那什么是Activity Action呢,简单来说就是让用户选择一种特殊的数据并得到它。
2.通过以上分析,可以知道我们定义了这样一个intent,要取得数据,取得数据要能够被打开,且类型为image,这样我们就可以执行了。
3.addCategory是要增加一个分类,增加一个什么分类呢?就是增加CATEGORY_OPENABLE,从字面意思值是增加一个可以打开的分类,也即是取得的uri要可以被ContentResolver解析,注意这里的分类即是执行的附加条件。
4.通过以上分析,可以知道我们定义了这样一个intent,要取得数据,取得数据要能够被打开,且类型为image,这样我们就可以执行了。
@Overrideprotected void onActivityResult(int requestCode, int resultCode,Intent intent) {// TODO Auto-generated method stub super.onActivityResult(requestCode, resultCode, intent);ContentResolver resolver = getContentResolver();if (resultCode == RESULT_OK) {if (requestCode == 1) {originalUri = intent.getData();try {Bitmap originalBitmap = BitmapFactory.decodeStream(resolver.openInputStream(originalUri));bitmap = resizeImage(originalBitmap, 100, 100);} catch (FileNotFoundException e) {e.printStackTrace();}if (bitmap != null) {editText = (EditText) findViewById(R.id.edit);insertIntoEditText(getBitmapMime(bitmap, originalUri));} else {Toast.makeText(MainActivity.this, "获取图片失败",Toast.LENGTH_SHORT).show();}}}if (bitmap != null) {}}
代码分析:
1.首先使用intent.getData得到uri
2.然后调用BitmapFactory的解码函数decodeStream且要求的参数为流(Stream),所以要用ContentResolver解析uri为流。
3.接着通过一个resizeImage函数重新调整bitmap大小,这里不再给出
4.然后就是要把所得到的图片放到EditText里了
private SpannableString getBitmapMime(Bitmap pic, Uri uri) {String path = uri.getPath();SpannableString ss = new SpannableString(path);ImageSpan span = new ImageSpan(this, pic);ss.setSpan(span, 0, path.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);return ss;}
private void insertIntoEditText(SpannableString ss) {Editable et = editText.getText();// 先获取Edittext中的内容int start = editText.getSelectionStart();et.insert(start, ss);// 设置ss要添加的位置editText.setText(et);// 把et添加到Edittext中editText.setSelection(start + ss.length());// 设置Edittext中光标在最后面显示 }
代码分析:
1.在getBitmapMime()中,首先建立一个SpannableString,r然后我们要给它附一张图片,这张图片来自我们的sd卡,然后是 setSpan()函数,这里有4个参数,分别是要插入的对象,起始位置,终止位置,标记,在本程序里插入的对象为一张图片,起始位置为0,终止位置为 path的长度,标记为会删除缓冲区里原有的text,这里即为path。
2.在insertIntoEditText()中,因为是动态添加,所以要用到Editable,然后先把ss添加到et里,然后在放到editText里,最后在设置一下光标的位置为最后
至此,插入图片完成
二. 怎么保存图片?
保存按钮的监听事件代码:
Button btn_save = (Button) findViewById(R.id.save);btn_save.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubString content = editText.getText().toString();Bundle data = new Bundle();data.putString("nei", content);Intent intent = new Intent(MainActivity.this, Display.class);intent.putExtra("neirong", data);startActivity(intent);}});
代码分析:
代码非常简单,我们只需保存editText里面的内容转化成String存到content中,(注意:这里的图片会变为它的路径即为/mnt/sdcard/.........这样的形式),
然后我们启动另外一个Activity,这里当然也可以保存content到数据库中。
至此,保存图片完成
3. 怎么解析回图片和文字
首先,我们有另外一个Activity,名字为display,注这里不在给图,因为view里只有一个EditText
EditText display;@Override protected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stub super.onCreate(savedInstanceState);setContentView(R.layout.display);display = (EditText) findViewById(R.id.display);String imagePath = getIntent().getBundleExtra("neirong").getString("nei");SpannableString ss = new SpannableString(imagePath);Pattern p=Pattern.compile("/mnt/sdcard/.+?\\.\\w{3}");Matcher m=p.matcher(imagePath);while(m.find()){Bitmap bm = BitmapFactory.decodeFile(m.group());Bitmap rbm = resizeImage(bm, 100, 100);ImageSpan span = new ImageSpan(this, rbm);ss.setSpan(span, m.start(), m.end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);}display.setText(ss); }
代码分析:
首先取出上一个Activity里面的内容,保存到imagePath中,接下来就是把imagePath中的图片改为图片即可,同样使用SpannableString,但怎么在一个很长的String中找到图片的路径呢,要使用正则表达式,这里是我写的一个正则表达式/mnt/sdcard/.+?\\.\\w{3},写的比较差,呵呵,通过正则表达式找到路径,就可以在BitmapFactory中找到图片,然后就可以利用setSpan()函数进行替换,最后在显示出来。
至此,解析回图片和文字完成
另外一种实现图文混编的方式:是通过html的<img>标签的方式插入到edittext中去:
标 记中有一个<img>标记。通过这个标记,可以很容易地实现将图像插入到EditText的功能。不过使用<img>标签要比使 用其他的标签多一个步骤,这就是要实现一个ImageGetter接口,通过这个接口,可以获得一个Drawable对象。先看看如下的代码:
@Override public Drawable getDrawable(String source) { int id = Integer.parseInt(source); Drawable d = getResources().getDrawable(id); d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight()); return d; }
上面的代码通过ImageGetter接口的getDrawable方法返回了一个Drawable对象,其中source参数的值就是<img>标签的src属性的值。我们需要通过如下的代码来使用<img>标签。
editText.append(Html.fromHtml("<imgsrc='"+ faces[new Random().nextInt(6)] +"'/>", imageGetter, null));
其 中faces是一个int类型数组,保存了相应的drawable资源的ID值。在使用<img>标签之前需要使用 Html.fromHtml方法来封装这些标签,如果使用的是<img>标签,需要使用fromHtml方法的第2个参数指定 ImageGetter对象,以便通过<img>标签的src属性获得相应的Drawable对象。通过EditText.append方法 插入<img>标签后,系统会自动将<img>标签转换成相应的图像显示在EditText中.
EditText图文混排相关推荐
- Android图文混排-实现EditText图文混合插入上传
前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中,需要支持文本和图片的混合插入,下图演示输入的示例: 当会议创建 ...
- android textview 添加图片大小,Android_Android中使用TextView实现图文混排的方法,向TextView或EditText中添加图像比 - phpStudy...
Android中使用TextView实现图文混排的方法 向TextView或EditText中添加图像比直接添加文本复杂一点点,需要用到标签. 只有一个src属性,该属性原则上应该指向一个图像地址或可 ...
- Android 动态图文混排的常用方法
2019独角兽企业重金招聘Python工程师标准>>> DrawableIcon的设置 对于TextView或者EditText动态设置drawableLeft,drawableRi ...
- 仿微信表情输入键盘(支持 Gif 表情图文混排 )
作者 | PandaQ404 地址 | http://www.jianshu.com/p/fddca2b0a26b 声明 | 本文是 PandaQ404 原创,已获授权发布,未经原作者允许请勿转载 简 ...
- mysql emoy表情_GitHub - PandaQAQ/PandaEmoView: emoji gif 表情图文混排,仿微信表情输入...
该库具有以下特点: 支持 emoji 表情图片 支持 gif 动态表情输入显示 支持单张贴图表情(与微信收藏表情一致) 支持题图表情库的添加删除 效果图: 快速使用 引入库 compile 'com. ...
- Android-实现图文混排编辑
RichTextX RichTextX一个帮助开发者实现Android图文混排编辑和显示的库. 开源地址:https://github.com/shine56/RichTextX 添加依赖 imple ...
- android多媒体图文混排,干货!!!Android富文本实现图文混排
效果图 rich.jpg 像图中的效果,大家在开发并不少见,大家可能不知道android提供了实现图文混排的类.大家或许会写一个布局或者使用drawableLeft这个属性实现文本的左侧图标. and ...
- iOS - 图文混排技术方案分享
前言 不少同学在工作中都能遇到图文混排的需求.但是实现图文混排的技术方案有好几种,相应的方案优劣也有差别.今天和大家一起分享一下图文混排的技术方案以及我的选择. Demo和解析工具已经开源 GitHu ...
- Android TextView中图文混排设置行间距导致高度不一致问题解决
Android TextView中图文混排设置行间距导致高度不一致问题解决 参考文章: (1)Android TextView中图文混排设置行间距导致高度不一致问题解决 (2)https://www. ...
最新文章
- win10 uwp 按下等待按钮
- 《图像处理实例》之 曲线之间距离求解
- 一台服务器上起2个mysql服务
- Windows Pe 第三章 PE头文件(中)
- Android提醒微技巧,你真的了解Dialog、Toast和Snackbar吗?
- ScottGu之博客翻译-LINQ to SQL第四部分,更新数据库 LINQ to SQL (Part 4 - Updating our Database)...
- VC问题 IntelliSense:“没有可用的附加信息”,[请參见“C++项目 IntelliSense 疑难解答”,获得进一步的帮助]...
- HTML元素参考手册 HTML Elements Reference
- stm32c语言设计以及注释,13个基于STM32的经典项目设计实例,全套资料~-嵌入式系统-与非网...
- java yml value_Spring Boot:从YAML文件加载@Value
- 前端大牛or架构师应该具备这些
- 传统的继承在JavaScript中的应用
- 最新解决kindeditor上传到服务器接收失败
- 大数据技术的发展趋势
- 战战兢兢尝试tensorflow2.0
- office VBA 学习
- 知识众筹服务平台网盘[入口]
- TCP协议-TCP服务特点和头部结构
- C++ #ifdef 和 #endif
- HDU-4417-Super Mario(划分树+二分)
热门文章
- 让云×××—微软虚拟化远程直播
- python 面向对象 私有化浅析
- Redis 单例、主从模式、sentinel 以及集群的配置方式及优缺点对比(转)
- Ruby on Rails 生成指定版本的 Rails 项目
- 【优化SQL Server循环更新、插入耗时长的问题】
- fir.im Weekly - 给 Mac 应用开发者的教程
- win7_oracle11g_64位连接32位PLSQL_Developer
- Openjudge-计算概论(A)-求分数序列和
- SEO:如何做好软文推广
- element el-popover 使用v-if 控制显示/隐藏,当条件变化时,里面有部分内容无法显示