网上有很多图文混编的方案,无非两种
- webview
- SpannableString+ImageSpan
他们之间的优势比较什么的,网上很多,我也不再赘述,我这里直接选择第二种,因为简单,需求也只是可以插入图片.然后各种搜索如何实现,找到一篇博文
https://blog.csdn.net/ljzdyh/article/details/82497625
我的代码就是参考这篇文章来的,因为文章中有些地方使用的api已经被标记为弃用了,所以只好改一下,加点注释,试图让它更加通俗易懂.
那么先上第一段代码
/**
* 图片上传到本地磁盘成功
*
* @param path 所在本地磁盘路径
*/
private void imgUploadSuccess(final String path) {
Glide.with(this)
.load(path)
.into(new CustomTarget<Drawable>() {
@Override
public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
image(resource, path);
}
@Override
public void onLoadCleared(@Nullable Drawable placeholder) {
}
});
}
这个方法是我选择图片后的回调, String path是图片储存的路径,我给放sd卡了.路径类似于/storage/emulated/0/Android/data/com.xxx.xxx/files/imgs/strategy3121064518359412361.png
这里选择用 Glide 加载管理图片,以防止 OOM ,这里 Glide 的版本是 4.9.0 ,所以回调跟 glide3 的不一样,没了 .asBitmap 用的是 CustomTarget 回调.
图片准备好以后会回调 onResourceReady ,我们在这里调用image(resource, path);
这个方法是重点,看下一段代码
/**
* 把图片插入到 EditView
* @param resource 图片资源
* @param path 图片所在位置 可以是url 也可是本地储存路径,我这里是放在本地了
*/
private void image(Drawable resource, String path) {
String img_str = String.format("", path);// 插入markdown格式的插图
imgReSize(resource);// 缩放图片的宽度到EditView的宽度
int start = etContent.getSelectionStart();// 获取当前光标所在位置
// 创建一个SpannableString对象,前后都写上换行,然后把 img_str 给放进去
SpannableString ss = new SpannableString("\n\n" + img_str + "\n\n");
// 新建 ImageSpan 把图片传进去
ImageSpan imageSpan = new ImageSpan(resource);
// 这一行的意思是给SpannableString对象修饰一下,用刚才创建的 ImageSpan 修饰,
// 第二个参数是从那个位置开始,ss 前面有两个换行符,换行符不要修饰,所以跳过换行符,从下标2开始,
// 换行符虽然写的\n,但是只算一个字符.第三个参数之所以要+2是因为前面第二个参数往后挪了两位,
// 后面也要挪两位,不要就会把 img_str 的最后两个字符串给丢掉,导致图片后面会有`g)`这种字符串,
// 一般图片的后缀是 png jpg 所以最后的两个字就是 g),这两个字一定要写 img_str.length() + 2
ss.setSpan(imageSpan, 2, img_str.length() + 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// 最后把 SpannableString 对象给插入到我们的EditText中,start就是当前光标所在位置
// 或者说光标最后所在位置
etContent.getEditableText().insert(start, ss);// 设置ss要添加的位置
// 最后更新一下view 请求一下焦点.完事
etContent.requestLayout();
etContent.requestFocus();
}
这段代码的注释已经说得很清楚了,我也就不再多说,这里一定要设置 Drawable 的宽高,不然图片无法显示,我调用了 imgReSize(resource); 来设置 Drawable 对象的宽高为宽度撑满EditView容器,然后宽高等比例缩放.下面看看 imgReSize 方法的定义
/**
* 缩放图片的宽度到EditView的宽度
*
* @param resource 图片
*/
void imgReSize(Drawable resource) {
double maxWidget = etContent.getMeasuredWidth() - etContent.getPaddingLeft() - etContent.getPaddingRight();//获取 EditView 的宽度
double widget = resource.getIntrinsicWidth();// 获取资源的固定宽度
double height = resource.getIntrinsicHeight();// 获取资源的固定高度
double bl = height / widget; // 计算宽高比例,注意这里都是用的 double 类型的变量,以防止整除,也就是3/2=1这样.
double maxHeight = bl * maxWidget; // 通过宽高比例计算图片高度.
resource.setBounds(0, 0, (int) maxWidget, (int) maxHeight); // 重点代码 设置图片的宽高
}
好了,这就是插入图片的所有代码了,删除图片的话就很简单,直接按软键盘的删除键就OK.
最后来看看按保存后打印的文本.
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_img:
selectImgTool.selectImg();
break;
case R.id.menu_release:
Log.d(TAG, "onSave: " + etContent.getText().toString());
break;
}
return super.onOptionsItemSelected(item);
}
打印结果
>>> 2019-03-10 11:19:39.139 23523-23523/com.xxx.xxx D/StrategyActivity: onSave: 现在插入一张图片
好了，图片插入完成。
界面效果
界面效果
