EditView+SpannableString+ImageSpan实现图文混编

网上有很多图文混编的方案,无非两种

1. webview
2. 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() {
                @Override
                public void onResourceReady(@NonNull Drawable resource, @Nullable Transition 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("![插图](%s)", 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: 现在插入一张图片
    
    ![插图](/storage/emulated/0/Android/data/com.xxx.xxx/files/imgs/strategy150272438965405431.png)
    
    好了，图片插入完成。

界面效果

界面效果