Android富文本开发

时间 2019-12-28

标签 android 文本开发栏目 Android 繁體版

原文原文链接

基础概念目录介绍

01.业务需求简单介绍
02.实现的方案介绍
03.异常状态下保存状态信息
04.处理软键盘回删按钮逻辑
05.在指定位置插入图片
06.在指定位置插入输入文字
07.若是对选中文字加粗
08.利用Span对文字属性处理
09.如何设置插入多张图片
10.如何设置插入网络图片
11.如何避免插入图片OOM
12.如何删除图片或者文字
13.删除和插入图片添加动画
14.点击图片能够查看大图
15.如何暴露设置文字属性方法
16.文字中间添加图片注意事项
17.键盘弹出和收缩优化
18.先后台切换编辑富文本优化
19.生成html片断上传服务器
20.生成json片断上传服务器
21.图片上传策略问题思考
22.一些细节问题的处理

00.该控件介绍

1.1 富文本介绍

自定义文本控件，支持富文本，包含两种状态：编辑状态和预览状态。编辑状态中，能够对插入本地或者网络图片，能够同时插入多张有序图片和删除图片，支持图文混排，而且能够对文字内容简单操做加粗字体，设置字体下划线，支持设置文字超连接(超连接支持跳转)，还能够统计富文本中的字数，功能正在开发中和完善中……

1.2 富文本效果图

1.3 富文本开源库

github.com/yangchong21…

01.业务需求简单介绍

富文本控件支持动态插入文字，图片等图文混排内容。图片能够支持本地图片，也支持插入网络连接图片；
富文本又两种状态：编辑状态 + 预览状态。两种状态能够相互进行切换；
富文本在编辑状态，能够同时选择插入超过一张以上的多张图片，而且能够动态设置图片之间的top间距；
在编辑状态，支持利用光标删除文字内容，同时也支持用光标删除图片；
在编辑状态，插入图片后，图片的宽度填充满手机屏幕的宽度，而后高度能够动态设置，图片是剧中裁剪显示；
在编辑状态，插入图片后，若是本地图片过大，要求对图片进行质量压缩，大小压缩；
在编辑状态，插入多张图片时，添加插入过渡动画，避免显示图片生硬。结束后，光标移到插入图片中的最后一行显示；
编辑状态中，图片点击暴露点击事件接口，能够在4个边角位置动态设置一个删除图片的功能，点击删除按钮则删除图片；
连续插入多张图片时，好比顺序1，2，3，注意避免出现图片插入顺序混乱的问题(异步插入多张图片可能出现顺序错乱问题)；
在编辑富文本状态的时候，连续多张图片之间插入输入框，方便在图片间输入文本内容；
在编辑状态中，能够设置文字大小和颜色，同时作好拓展需求，后期可能添加文本加粗，下划线，插入超连接，对齐方式等功能；
编辑状态，连续插入多张图片，若是想在图片中间插入文字内容，则须要靠谱在图片之间预留编辑文本控件，方便操做；
支持对文字选中的内容进行设置加粗，添加下划线，改变颜色，设置对齐方式等等；
关于富文本字数统计，因为富文本中包括文字和图片，所以图片和文字数量统计分开。参考易车是：共n个文字，共n个图片显示

02.实现的方案介绍

2.0 页面构成分析

整个界面的要求
- 总体界面可滚动，能够编辑，也能够预览
- 内容可编辑能够插入文字、图片等。图片提供按钮操做
- 软键盘删除键可删除图片，也能够删除文字内容
- 文字能够修改属性，好比加粗，对齐，下划线
根据富文本做出如下分析
- 使用原生控件，可插入图片、文字界面不能用一个EditText来作，须要使用LinearLayout添加不一样的控件，图片部分用ImageView，界面可滑动最外层使用ScrollView。
- 使用WebView+js+css方式，富文本格式用html方式展示，比较复杂，对标签要很是熟悉才能够尝试使用
使用原生控件多焦点问题分析
- 界面是由多个输入区域拼接而成，暂且把输入区域称为EditText，图片区域称为ImageView，外层是LinearLayout。
- 若是一个富文本是：文字1+图片1+文字2+文字3+图片3+图片4；那么使用LinearLayout包含多个EditText实现的难点：
  - 如何处理记录当前的焦点区域
  - 如何处理在文字区域的中间位置插入ImageView样式的拆分和合并
  - 如何处理输入区域的删除键处理

2.2 第一种方案

使用ScrollView做为最外层，布局包含LineaLayout，图文混排内容，则是用TextView/EditText和ImageView去填充。
富文本编辑状态：ScrollView + LineaLayout + n个EditText+Span + n个ImageView
富文本预览状态：ScrollView + LineaLayout + n个TextView+Span + n个ImageView
删除的时候，根据光标的位置，若是光标遇到是图片，则能够用光标删除图片；若是光标遇到是文字，则能够用光标删除文字
当插入或者删除图片的时候，能够添加一个过渡动画效果，避免直接生硬的显示。如何在ViewGroup中添加view，删除view时给相应view和受影响的其余view添加动画，不太容易作。若是只是对受到影响的view添加动画，能够经过设置view的高度使之显示和隐藏，还能够利用ScrollView经过滚动隐藏和显示动画，但其余受影响的view则比较难处理，最终选择布局动画LayoutTransition 就能够很好地完成这个功能。

2.3 第二种方法

使用WebView实现编辑器，支持n多格式，例如常见的html或者markdown格式。利用html标签对富文本处理，这种方式就须要专门处理标签的样式。
注意这种方法的实现，须要深刻研究js，css等，必须很是熟悉才能够用到实际开发中，能够看成学习一下。这种方式对于图片的显示和上传，相比原生要麻烦一些。

2.4 富文本支持功能

支持加粗、斜体、删除线、下划线行内样式，一行代码便可设置文本span属性，十分方便
支持添加单张或者多张图片，而且插入过渡动画友好，同时能够保证插入图片顺序
支持富文本编辑状态和预览状态的切换，支持富文本内容转化为json内容输出，转化为html内容输出
支持设置富文本的文字大小，行间距，图片和文本间距，以及插入图片的宽和高的属性
图片支持点击预览，支持点击叉号控件去除图片，暴露给外部开发者调用。同时加载图片的逻辑也是暴露给外部开发者，充分解耦
关于富文本字数统计，因为富文本中包括文字和图片，所以图片和文字数量统计分开。参考易车是：共n个文字，共n个图片显示

03.异常状态下保存状态信息

对于自定义View，若是页面出现异常致使自定义View异常退出，则固然但愿保存一些重要的信息。自定义保存状态类，继承BaseSavedState，代码以下所示

public class TextEditorState extends View.BaseSavedState {

    public int rtImageHeight;

    public static final Creator<TextEditorState> CREATOR = new Creator<TextEditorState>() {
        @Override
        public TextEditorState createFromParcel(Parcel in) {
            return new TextEditorState(in);
        }

        @Override
        public TextEditorState[] newArray(int size) {
            return new TextEditorState[size];
        }
    };

    public TextEditorState(Parcelable superState) {
        super(superState);
    }

    public TextEditorState(Parcel source) {
        super(source);
        rtImageHeight = source.readInt();
    }

    @Override
    public void writeToParcel(Parcel out, int flags) {
        super.writeToParcel(out, flags);
        out.writeInt(rtImageHeight);
    }
}
复制代码

如何使用该保存状态栏，自定义View中，有两个特别的方法，分别是onSaveInstanceState和onRestoreInstanceState，具体逻辑以下所示

/** * 保存重要信息 * @return */
@Nullable
@Override
protected Parcelable onSaveInstanceState() {
    Parcelable superState = super.onSaveInstanceState();
    TextEditorState viewState = new TextEditorState(superState);
    viewState.rtImageHeight = rtImageHeight;
    return viewState;
}

/** * 复现 * @param state state */
@Override
protected void onRestoreInstanceState(Parcelable state) {
    TextEditorState viewState = (TextEditorState) state;
    rtImageHeight = viewState.rtImageHeight;
    super.onRestoreInstanceState(viewState.getSuperState());
    requestLayout();
}
复制代码

04.处理软键盘回删按钮逻辑

想了一下，当富文本处于编辑的状态，利用光标能够进行删除插入点以前的字符。删除的时候，根据光标的位置，若是光标遇到是图片，则能够用光标删除图片；若是光标遇到是文字，则能够用光标删除文字。
更详细的来讲，监听删除键的点击的逻辑须要注意，当光标在EditText 输入中间，点击删除不进行处理正常删除；当光标在EditText首端，判断前一个控件，若是是图片控件，删除图片控件，若是是输入控件，删除当前控件并将输入区域合并成一个输入区域。

建立一个键盘退格监听事件，代码以下所示：

// 初始化键盘退格监听，主要用来处理点击回删按钮时，view的一些列合并操做
keyListener = new OnKeyListener() {
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        //KeyEvent.KEYCODE_DEL 删除插入点以前的字符
        if (event.getAction() == KeyEvent.ACTION_DOWN && event.getKeyCode() == KeyEvent.KEYCODE_DEL) {
            EditText edit = (EditText) v;
            //处于退格删除的逻辑
            onBackspacePress(edit);
        }
        return false;
    }
};
复制代码

而后针对退格删除，分为两种状况，第一种是删除图片，第二种是删除文字内容。具体代码以下所示：

/** * 处理软键盘backSpace回退事件 * @param editTxt 光标所在的文本输入框 */
private void onBackspacePress(EditText editTxt) {
    try {
        int startSelection = editTxt.getSelectionStart();
        // 只有在光标已经顶到文本输入框的最前方，在断定是否删除以前的图片，或两个View合并
        if (startSelection == 0) {
            int editIndex = layout.indexOfChild(editTxt);
            // 若是editIndex-1<0,
            View preView = layout.getChildAt(editIndex - 1);
            if (null != preView) {
                if (preView instanceof RelativeLayout) {
                    // 光标EditText的上一个view对应的是图片，删除图片操做
                    onImageCloseClick(preView);
                } else if (preView instanceof EditText) {
                    // 光标EditText的上一个view对应的仍是文本框EditText
                }
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}
复制代码

当EditText内容为空时，发现手机根本没法响应软键盘的删除监听，这个是为何呢？

能够看一下源码，EditText继承自TextView，翻看TextView的代码，里面有一个叫作InputConnection的东西，看起是什么输入链接的意思。若是想实现删除的功能，须要自行实现重写一个deleteSurroundingText()方法。

/** * 删除操做 * @param beforeLength beforeLength * @param afterLength afterLength * @return */
@Override
public boolean deleteSurroundingText(int beforeLength, int afterLength) {
    HyperLogUtils.d("DeletableEditText---deleteSurroundingText--"+beforeLength+"----"+afterLength);
    if (beforeLength == 1 && afterLength == 0) {
        return sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL))
                && sendKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_DEL));
    }
    return super.deleteSurroundingText(beforeLength, afterLength);
}
复制代码

05.在指定位置插入图片

当点击插入图片的时候，须要思考两个问题。第一个是在那个位置插入图片，因此须要定位到这个位置；第二个是插入图片后，何时折行操做。
对于上面两个问题，这个位置能够取光标所在的位置，可是对于一个EditText输入文本，插入图片这个位置能够分多种状况：
- 若是光标已经顶在了editText的最前面，则直接插入图片，而且EditText下移便可
- 若是光标已经顶在了editText的最末端，则须要添加新的imageView
- 若是光标已经顶在了editText的最中间，则须要分割字符串，分割成两个EditText，并在两个EditText中间插入图片
- 若是当前获取焦点的EditText为空，直接在EditText下方插入图片，而且插入空的EditText

代码思路以下所示

/** * 插入一张图片 * @param imagePath 图片路径地址 */
public void insertImage(String imagePath) {
    if (TextUtils.isEmpty(imagePath)){
        return;
    }
    try {
        //lastFocusEdit获取焦点的EditText
        String lastEditStr = lastFocusEdit.getText().toString();
        //获取光标所在位置
        int cursorIndex = lastFocusEdit.getSelectionStart();
        //获取光标前面的字符串
        String editStr1 = lastEditStr.substring(0, cursorIndex).trim();
        //获取光标后的字符串
        String editStr2 = lastEditStr.substring(cursorIndex).trim();
        //获取焦点的EditText所在位置
        int lastEditIndex = layout.indexOfChild(lastFocusEdit);
        if (lastEditStr.length() == 0) {
            //若是当前获取焦点的EditText为空，直接在EditText下方插入图片，而且插入空的EditText
        } else if (editStr1.length() == 0) {
            //若是光标已经顶在了editText的最前面，则直接插入图片，而且EditText下移便可
        } else if (editStr2.length() == 0) {
            // 若是光标已经顶在了editText的最末端，则须要添加新的imageView和EditText
        } else {
            //若是光标已经顶在了editText的最中间，则须要分割字符串，分割成两个EditText，并在两个EditText中间插入图片
        }
        hideKeyBoard();
    } catch (Exception e) {
        e.printStackTrace();
    }
}
复制代码

06.在指定位置插入输入文字

前面已经提到了，若是一个富文本是：文字1+图片1+文字2+文字3+图片3+图片4，那么点击文字1控件则在此输入文字，点击文字3控件则在此输入文字。
因此，这样操做，肯定处理记录当前的焦点区域位置十分重要。当前的编辑器已经添加了多个输入文本EditText，如今的问题在于须要记录当前编辑的EditText，在应用样式的时候定位到输入的控件，在编辑器中添加一个变量lastFocusEdit。具体能够看代码……

既然能够记录最后焦点输入文本，那么如何监听当前的输入控件呢，这就用到了OnFocusChangeListener，这个又是在哪里用到，具体以下面所示。要先setOnFocusChangeListener(focusListener) 再 requestFocus。

/** * 全部EditText的焦点监听listener */
private OnFocusChangeListener focusListener;


focusListener = new OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            lastFocusEdit = (EditText) v;
            HyperLogUtils.d("HyperTextEditor---onFocusChange--"+lastFocusEdit);
        }
    }
};

/** * 在特定位置插入EditText * @param index 位置 * @param editStr EditText显示的文字 */
public void addEditTextAtIndex(final int index, CharSequence editStr) {
    //省略部分代码
	try {
		EditText editText = createEditText("插入文字", EDIT_PADDING);
		editText.setOnFocusChangeListener(focusListener);
		layout.addView(editText, index);
		//插入新的EditText以后，修改lastFocusEdit的指向
		lastFocusEdit = editText;
		//获取焦点
		lastFocusEdit.requestFocus();
		//将光标移至文字指定索引处
		lastFocusEdit.setSelection(editStr.length(), editStr.length());
	} catch (Exception e) {
		e.printStackTrace();
	}
}
复制代码

07.若是对选中文字加粗

Span 的分类介绍
- 字符外观，这种类型修改字符的外形可是不影响字符的测量，会触发文本从新绘制可是不触发从新布局。
  - ForegroundColorSpan，BackgroundColorSpan，UnderlineSpan，StrikethrougnSpan
- 字符大小布局，这种类型Span会更改文本的大小和布局，会触发文本的从新测量绘制
  - StyleSpan，RelativeSizeSpan，AbsoluteSizeSpan
- 影响段落级别，这种类型Span 在段落级别起做用，更改文本块在段落级别的外观，修改对齐方式，边距等。
  - AlignmentSpan，BulletSpan，QuoteSpan
实现基础样式粗体、斜体、下划线、中划线的设置和取消。举个例子，对文本加粗，文字设置span样式注意要点，这里须要区分几种状况
当前选中区域不存在 bold 样式这里咱们选中BB。两种状况
- 当前区域紧靠左侧或者右侧不存在粗体样式: AABBCC 这时候直接设置 span便可
- 当前区域紧靠左侧或者右侧存在粗体样式如： AABBCC AABBCC AABBCC。这时候须要合并左右两侧的span，只剩下一个 span
当前选中区域存在了Bold 样式选中 ABBC。四种状况：
- 选中样式两侧不存在连续的bold样式 AABBCC
- 选中内部两端存在连续的bold 样式 AABBCC
- 选中左侧存在连续的bold 样式 AABBCC
- 选中右侧存在连续的bold 样式 AABBCC
- 这时候须要合并左右两侧已经存在的span，只剩下一个 span
接下来逐步分解，而后处理span的逻辑顺序以下所示
- 首先对选中文字内容样式状况判断
- 边界判断与设置
- 取消Span（当咱们选中的区域在一段连续的 Bold 样式里面的时候，再次选择Bold将会取消样式）
何时取消span呢，这个逻辑是比较复杂的，具体看看下面的举例。
- 当咱们选中的区域在一段连续的 Bold 样式里面的时候，再次选择Bold将会取消样式
- 用户能够随意的删除文本，在删除过程当中可能会出现以下的状况：
  - 用户输入了 AABBCCDD
  - 用户选择了粗体样式 AABBCCDD
  - 用户删除了CC而后显示以下： AABB DD
  - 这个时候选中其中的BD 此时，在该区域中存在两个span ，而且没有一个 span 彻底包裹选中的 BD
  - 在这种状况下仍须要进行左右侧边界判断进行删除。这个具体能够看代码逻辑。

08.利用Span对文字属性处理

这里仅仅是对字体加粗进行介绍，其实设置span能够找到规律。多个span样式，考虑到后期的拓展性，确定要进行封装和抽象，具体该如何处理呢？

设置文本选中内容加粗模式，代码以下所示，能够看到这里只须要传递一个lastFocusEdit对象便可，这个对象是最近被聚焦的EditText。

/** * 修改加粗样式 */
public void bold(EditText lastFocusEdit) {
    //获取editable对象
    Editable editable = lastFocusEdit.getEditableText();
    //获取当前选中的起始位置
    int start = lastFocusEdit.getSelectionStart();
    //获取当前选中的末尾位置
    int end = lastFocusEdit.getSelectionEnd();
    HyperLogUtils.i("bold select Start:" + start + " end: " + end);
    if (checkNormalStyle(start, end)) {
        return;
    }
    new BoldStyle().applyStyle(editable, start, end);
}
复制代码

而后如何调用这个，在HyperTextEditor类中代码以下所示。为什么要这样写，能够把HyperTextEditor富文本类中设置span的逻辑放到SpanTextHelper类中处理，该类专门处理各类span属性，这样代码结构更加清晰，也方便后期增长更多span属性，避免一个类代码太臃肿。

/**
 * 修改加粗样式
 */
public void bold() {
    SpanTextHelper.getInstance().bold(lastFocusEdit);
}
复制代码

而后看一下new BoldStyle().applyStyle(editable, start, end)具体作了什么？下面这段代码逻辑，具体能够看07.若是对选中文字加粗的分析思路。

public void applyStyle(Editable editable, int start, int end) {
    //获取 从 start 到 end 位置上全部的指定 class 类型的 Span数组
    E[] spans = editable.getSpans(start, end, clazzE);
    E existingSpan = null;
    if (spans.length > 0) {
        existingSpan = spans[0];
    }
    if (existingSpan == null) {
        //当前选中内部无此样式，开始设置span样式
        checkAndMergeSpan(editable, start, end, clazzE);
    } else {
        //获取 一个 span 的起始位置
        int existingSpanStart = editable.getSpanStart(existingSpan);
        //获取一个span 的结束位置
        int existingSpanEnd = editable.getSpanEnd(existingSpan);
        if (existingSpanStart <= start && existingSpanEnd >= end) {
            //在一个 完整的 span 中
            //删除 样式
            //
            removeStyle(editable, start, end, clazzE, true);
        } else {
            //当前选中区域存在了某某样式，须要合并样式
            checkAndMergeSpan(editable, start, end, clazzE);
        }
    }
}
复制代码

09.如何设置插入多张图片

富文本固然支持插入多张图片，那么插入多张图片是如何操做呢。插入1，2，3这三张图片，如何保证它们的插入顺序，从而避免插入错位，带着这几个问题看一下插入多张图片操做。

Observable.create(new ObservableOnSubscribe<String>() {
    @Override
    public void subscribe(ObservableEmitter<String> emitter) {
        try{
            hte_content.measure(0, 0);
            List<Uri> mSelected = Matisse.obtainResult(data);
            // 能够同时插入多张图片
            for (Uri imageUri : mSelected) {
                String imagePath = HyperLibUtils.getFilePathFromUri(NewActivity.this,  imageUri);
                Bitmap bitmap = HyperLibUtils.getSmallBitmap(imagePath, screenWidth, screenHeight);
                //压缩图片
                imagePath = SDCardUtil.saveToSdCard(bitmap);
                emitter.onNext(imagePath);
            }
            emitter.onComplete();
        }catch (Exception e){
            e.printStackTrace();
            emitter.onError(e);
        }
    }
})
        .subscribeOn(Schedulers.io())//生产事件在io
        .observeOn(AndroidSchedulers.mainThread())//消费事件在UI线程
        .subscribe(new Observer<String>() {
            @Override
            public void onComplete() {
                ToastUtils.showRoundRectToast("图片插入成功");
            }

            @Override
            public void onError(Throwable e) {
                ToastUtils.showRoundRectToast("图片插入失败:"+e.getMessage());
            }

            @Override
            public void onSubscribe(Disposable d) {

            }

            @Override
            public void onNext(String imagePath) {
                //插入图片
                hte_content.insertImage(imagePath);
            }
        });
复制代码

10.如何设置插入网络图片

插入图片有两种状况，一种是本地图片，一种是网络图片。因为富文本中对插入图片的宽高有限制，便可以动态设置图片的高度，这就要求请求网络图片后，须要对图片进行处理。

首先看一下插入图片的代码，在HyperTextEditor类中，因为封装lib，不建议在lib中使用某个图片加载库加载图片，而应该是暴露给外部开发者去加载图片。

/** * 在特定位置添加ImageView */
public void addImageViewAtIndex(final int index, final String imagePath) {
    if (TextUtils.isEmpty(imagePath)){
        return;
    }
    try {
        imagePaths.add(imagePath);
        final RelativeLayout imageLayout = createImageLayout();
        HyperImageView imageView = imageLayout.findViewById(R.id.edit_imageView);
        imageView.setAbsolutePath(imagePath);
        HyperManager.getInstance().loadImage(imagePath, imageView, rtImageHeight);
        layout.addView(imageLayout, index);
    } catch (Exception e) {
        e.printStackTrace();
    }
}
复制代码

那么具体在那个地方去loadImage设置加载图片呢？能够发现这样极大地提升了代码的拓展性，缘由是你可能用glide，他可能用Picasso，还有的用ImageLoader，因此最好暴露给外部。

HyperManager.getInstance().setImageLoader(new ImageLoader() {
    @Override
    public void loadImage(final String imagePath, final ImageView imageView, final int imageHeight) {
        Log.e("---", "imageHeight: "+imageHeight);
        //若是是网络图片
        if (imagePath.startsWith("http://") || imagePath.startsWith("https://")){
            //直接用图片加载框架加载图片便可
        } else { //若是是本地图片
            
        }
    }
});
复制代码

11.如何避免插入图片OOM

加载一个本地的大图片或者网络图片，从加载到设置到View上，如何减下内存，避免加载图片OOM。
- 在展现高分辨率图片的时候，最好先将图片进行压缩。压缩后的图片大小应该和用来展现它的控件大小相近，在一个很小的ImageView上显示一张超大的图片不会带来任何视觉上的好处，但却会占用至关多宝贵的内存，并且在性能上还可能会带来负面影响。
加载图片的内存都去哪里呢？
- 其实咱们的内存就是去bitmap里了，BitmapFactory的每一个decode函数都会生成一个bitmap对象，用于存放解码后的图像，而后返回该引用。若是图像数据较大就会形成bitmap对象申请的内存较多，若是图像过多就会形成内存不够用天然就会出现out of memory的现象。
为什么容易OOM？
- 经过BitmapFactory的decode的这些方法会尝试为已经构建的bitmap分配内存，这时就会很容易致使OOM出现。为此每一种解析方法都提供了一个可选的BitmapFactory.Options参数，将这个参数的inJustDecodeBounds属性设置为true就可让解析方法禁止为bitmap分配内存，返回值也再也不是一个Bitmap对象，而是null。
如何对图片进行压缩？
- 1.解析图片，获取图片资源的属性
- 2.计算图片的缩放值
- 3.最后对图片进行质量压缩

具体设置图片压缩的代码以下所示

public static Bitmap getSmallBitmap(String filePath, int newWidth, int newHeight) {
    final BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeFile(filePath, options);
    // Calculate inSampleSize
    // 计算图片的缩放值
    options.inSampleSize = calculateInSampleSize(options, newWidth, newHeight);
    // Decode bitmap with inSampleSize set
    options.inJustDecodeBounds = false;
    Bitmap bitmap = BitmapFactory.decodeFile(filePath, options);
    // 质量压缩
    Bitmap newBitmap = compressImage(bitmap, 500);
    if (bitmap != null){
        //手动释放资源
        bitmap.recycle();
    }
    return newBitmap;
}
复制代码

思考：inJustDecodeBounds这个参数是干什么的？
- 若是设置为true则表示decode函数不会生成bitmap对象，仅是将图像相关的参数填充到option对象里，这样咱们就能够在不生成bitmap而获取到图像的相关参数了。
为什么设置两次inJustDecodeBounds属性？
- 第一次：设置为true则表示decode函数不会生成bitmap对象，仅是将图像相关的参数填充到option对象里，这样咱们就能够在不生成bitmap而获取到图像的相关参数。
- 第二次：将inJustDecodeBounds设置为false再次调用decode函数时就能生成bitmap了。而此时的bitmap已经压缩减少不少了，因此加载到内存中并不会致使OOM。

12.如何删除图片或者文字

当富文本处于编辑状态时，点击删除图片是能够删除图片的，对于删除的逻辑，封装的lib能够给开发者暴露一个删除的监听事件。注意删除图片有两种操做：第一种是利用光标删除，第二种是点击触发删除。删除图片后，不只仅是要删除图片数据，并且还要删除图片ImageView控件。

/** * 处理图片上删除的点击事件 * 删除类型 0表明backspace删除 1表明按红叉按钮删除 * @param view 整个image对应的relativeLayout view */
private void onImageCloseClick(View view) {
    try {
        //判断过渡动画是否结束，只能等到结束才能够操做
        if (!mTransition.isRunning()) {
            disappearingImageIndex = layout.indexOfChild(view);
            //删除文件夹里的图片
            List<HyperEditData> dataList = buildEditData();
            HyperEditData editData = dataList.get(disappearingImageIndex);
            if (editData.getImagePath() != null){
                if (onHyperListener != null){
                    onHyperListener.onRtImageDelete(editData.getImagePath());
                }
                //SDCardUtil.deleteFile(editData.imagePath);
                //从图片集合中移除图片连接
                imagePaths.remove(editData.getImagePath());
            }
            //而后移除当前view
            layout.removeView(view);
            //合并上下EditText内容
            mergeEditText();
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}
复制代码

13.删除和插入图片添加动画

为何要添加插入图片的过渡动画
- 当向一个ViewGroup添加控件或者移除控件；这种场景虽然可以实现效果，并无一点过分效果，直来直去的添加或者移除，显得有点生硬。有没有办法添加必定的过分效果，让实现的效果显得圆滑呢？
LayoutTransition简单介绍
- LayoutTransition类实际上Android系统中的一个实用工具类。使用LayoutTransition类在一个ViewGroup中对布局更改进行动画处理。
如何运用到插入或者删除图片场景中
- 向一个ViewGroup添加控件或者移除控件，这两种效果的过程是应对应于控件的显示、控件添加时其余控件的位置移动、控件的消失、控件移除时其余控件的位置移动等四种动画效果。这些动画效果在LayoutTransition中，由如下四个关键字作出了相关声明：
  - APPEARING：元素在容器中显现时须要动画显示。
  - CHANGE_APPEARING：因为容器中要显现一个新的元素，其它元素的变化须要动画显示。
  - DISAPPEARING：元素在容器中消失时须要动画显示。
  - CHANGE_DISAPPEARING：因为容器中某个元素要消失，其它元素的变化须要动画显示。
- 也就是说,ViewGroup中有多个ImageView对象，若是须要删除其中一个ImageView对象的话，该ImageView对象能够设置动画(即DISAPPEARING 动画形式)，ViewGroup中的其它ImageView对象此时移动到新的位置的过程当中也能够设置相关的动画(即CHANGE_DISAPPEARING 动画形式)；
- 若向ViewGroup中添加一个ImageView，ImageView对象能够设置动画(即APPEARING 动画形式)，ViewGroup中的其它ImageView对象此时移动到新的位置的过程当中也能够设置相关的动画(即CHANGE_APPEARING 动画形式)。
- 给ViewGroup设置动画很简单，只须要生成一个LayoutTransition实例，而后调用ViewGroup的setLayoutTransition（LayoutTransition）函数就能够了。当设置了布局动画的ViewGroup添加或者删除内部view时就会触发动画。

具体初始化动画的代码以下所示：

mTransition = new LayoutTransition();
mTransition.addTransitionListener(new LayoutTransition.TransitionListener() {

    @Override
    public void startTransition(LayoutTransition transition, ViewGroup container, View view, int transitionType) {
    }
    
    @Override
    public void endTransition(LayoutTransition transition, ViewGroup container, View view, int transitionType) {
        if (!transition.isRunning() && transitionType == LayoutTransition.CHANGE_DISAPPEARING) {
            // transition动画结束，合并EditText
             mergeEditText();
        }
    }
});
mTransition.enableTransitionType(LayoutTransition.APPEARING);
mTransition.setDuration(300);
layout.setLayoutTransition(mTransition);
复制代码

有个问题须要注意一下，当控件销毁的时候，记得把监听给移除一下更好，代码以下所示

@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    if (mTransition!=null){
        //移除Layout变化监听
        mTransition.removeTransitionListener(transitionListener);
    }
}
复制代码

动画执行前后的顺序
- 分析源码能够知道，默认状况下DISAPPEARING和CHANGE_APPEARING类型动画会当即执行，其余类型动画则会有个延迟。也就是说若是删除view，被删除的view将先执行动画消失，通过一些延迟受影响的view会进行动画补上位置，若是添加view，受影响的view将会先给添加的view腾位置执行CHANGE_APPEARING动画，通过一些时间的延迟才会执行APPEARING动画。这里就不贴分析源码的思路呢！

14.点击图片能够查看大图

编辑状态时，因为图片有空能比较大，在显示在富文本的时候，会裁剪局中显示，也就是图片会显示不全。那么后期若是是想添加点击图片查看，则须要暴露给开发者监听事件，须要考虑到后期拓展性，代码以下所示：

这样作的目的是是暴露给外部开发者调用，点击图片的操做只须要传递view还有图片便可。

// 图片处理
btnListener = new OnClickListener() {
    @Override
    public void onClick(View v) {
        if (v instanceof HyperImageView){
            HyperImageView imageView = (HyperImageView)v;
            // 开放图片点击接口
            if (onHyperListener != null){
                onHyperListener.onImageClick(imageView, imageView.getAbsolutePath());
            }
        } 
    }
};
复制代码

15.如何暴露设置文字属性方法

针对设置文字加粗，下划线，删除线等span属性。同时设置span，有许多相似的地方，考虑到后期的添加和移除，如何封装可以提升代码的扩展性。

/** * 修改加粗样式 */
public void bold() {
    SpanTextHelper.getInstance().bold(lastFocusEdit);
}

/** * 修改斜体样式 */
public void italic() {
    SpanTextHelper.getInstance().italic(lastFocusEdit);
}

/** * 修改删除线样式 */
public void strikeThrough() {
    SpanTextHelper.getInstance().strikeThrough(lastFocusEdit);
}

/** * 修改下划线样式 */
public void underline() {
    SpanTextHelper.getInstance().underline(lastFocusEdit);
}
复制代码

上面实现了选中文本加粗的功能，斜体、下划线、中划线等样式的设置和取消与粗体样式一致，只是建立 span 的区别而已，能够将代码进行抽取。

public abstract class NormalStyle<E> {

    private Class<E> clazzE;

    public NormalStyle() {
        //利用反射
        clazzE = (Class<E>) ((ParameterizedType) this.getClass().getGenericSuperclass()).getActualTypeArguments()[0];
    }

    /** * 样式状况判断 * @param editable editable * @param start start * @param end end */
    public void applyStyle(Editable editable, int start, int end) {

    }
}
复制代码

其余的设置span的属性代码便是以下所示，能够看到添加一种类型很容易，也容易看懂，便于拓展：

public class ItalicStyle extends NormalStyle<ItalicStyleSpan> {
    @Override
    protected ItalicStyleSpan newSpan() {
        return new ItalicStyleSpan();
    }
}

public class UnderlineStyle extends NormalStyle<UnderLineSpan> {
    @Override
    protected UnderLineSpan newSpan() {
        return new UnderLineSpan();
    }
}
复制代码

16.文字中间添加图片注意事项

在文字中添加图片比较特殊，所以这里单独拿出来讲一下。在文字内容中间插入图片，则须要分割字符串，分割成两个EditText，并在两个EditText中间插入图片，那么这个光标又定位在何处呢？
- 对于光标前面的字符串保留，设置给当前得到焦点的EditText（此为分割出来的第一个EditText）
- 把光标后面的字符串放在新建立的EditText中（此为分割出来的第二个EditText）
- 在第二个EditText的位置插入一个空的EditText，以便连续插入多张图片时，有空间写文字，第二个EditText下移
- 在空的EditText的位置插入图片布局，空的EditText下移。注意，这个过程添加动画过渡一下插入的效果比较好，否则会比较生硬
```
//获取光标所在位置
int cursorIndex = lastFocusEdit.getSelectionStart();
//获取光标前面的字符串
String editStr1 = lastEditStr.substring(0, cursorIndex).trim();
//获取光标后的字符串
String editStr2 = lastEditStr.substring(cursorIndex).trim();

lastFocusEdit.setText(editStr1);
addEditTextAtIndex(lastEditIndex + 1, editStr2);
addEditTextAtIndex(lastEditIndex + 1, "");
addImageViewAtIndex(lastEditIndex + 1, imagePath);
复制代码
```

17.键盘弹出和收缩优化

软键盘弹出的时机
- 若是不作任何处理，系统默认的是，进入页面，第一个输入框自动获取焦点软键盘自动弹出，这种用户交互方式，每每不是产品想要的，每每会提出如下优化需求：
- 需求1：editText获取焦点，可是不弹出软键盘（也就是说光标显示第一个输入框，不主动弹软键盘）
  - 在第一个输入框的最直接父布局加入:android:focusable="true"；android:focusableInTouchMode="true"
    - (效果：软键盘不弹出，光标不显示，其余输入框也不获取焦点，ps非直接父布局没有效果）
  - android:windowSoftInputMode="stateAlwaysHidden"
    - (效果：软键盘不弹出，光标显示在第一个输入框中)
- 需求2：editText不获取焦点，固然软键盘不会主动弹出（光标也不显示）
  - 在第一个输入框的最直接父布局加入:android:focusable="true"；android:focusableInTouchMode="true"
    - (效果：软键盘不弹出，光标不显示，其余输入框也不获取焦点，ps非直接父布局没有效果）
  - 在父布局最顶部添加一个高度为0的EditText，抢了焦点但不展现；

软键盘遮挡界面的问题

当界面中有输入框，须要弹起软键盘输入信息的时候，软键盘可能遮挡部分布局，更有甚者，当前输入框若是在屏幕下方，软键盘也会直接遮挡输入框，这种状况对用户体验是至关不友好的，因此要根据具体的状况做出相应的处理。
android定义了一个属性，名字为windowSoftInputMode, 这个属性用于设置Activity主窗口与软键盘的交互模式，用于避免软键盘遮挡内容的问题。咱们能够在AndroidManifet.xml中对Activity进行设置。

stateUnspecified-未指定状态：软件默认采用的交互方式，系统会根据当前界面自动调整软键盘的显示模式。
stateUnchanged-不改变状态：当前界面软键盘状态由上个界面软键盘的状态决定；
stateHidden-隐藏状态：进入页面，不管是否有输入需求，软键盘是隐藏的，可是若是跳转到下一个页面软键盘是展现的，回到这个页面，软键盘可能也是展现的，这个属性区别下个属性。
stateAlwaysHidden-老是隐藏状态：当设置该状态时，软键盘老是被隐藏，和stateHidden不一样的是，当咱们跳转到下个界面，若是下个页面的软键盘是显示的，而咱们再次回来的时候，软键盘就会隐藏起来。
stateVisible-可见状态：当设置为这个状态时，软键盘老是可见的，即便在界面上没有输入框的状况下也能够强制弹出来出来。
stateAlwaysVisible-老是显示状态：当设置为这个状态时，软键盘老是可见的，和stateVisible不一样的是，当咱们跳转到下个界面，若是下个页面软键盘是隐藏的，而咱们再次回来的时候，软键盘就会显示出来。
adjustUnspecified-未指定模式：设置软键盘与软件的显示内容之间的显示关系。当你跟咱们没有设置这个值的时候，这个选项也是默认的设置模式。在这中状况下，系统会根据界面选择不一样的模式。
adjustResize-调整模式：当软键盘显示的时候，当前界面会自动重绘，会被压缩，软键盘消失以后，界面恢复正常（正常布局，非scrollView父布局）；当父布局是scrollView的时候，软键盘弹出，会将布局顶起（保证输入框不被遮挡），不压缩，并且能够软键盘不消失的状况下，手动滑出被遮挡的布局；
adjustPan-默认模式：软键盘弹出，软键盘会遮挡屏幕下半部分布局，当输入框在屏幕下方布局，软键盘弹起，会自动将当前布局顶起，保证，软键盘不遮挡当前输入框（正常布局，非scrollView父布局）。当父布局是scrollView的时候，感受没啥变化，仍是自定将布局顶起，输入框不被遮挡，不能够手动滑出被遮挡的布局（白瞎了scrollView）;
复制代码

看了上面的属性，那么该如何设置呢？具体效果能够看demo案例。

<activity android:name=".NewArticleActivity"
    android:windowSoftInputMode="adjustResize|stateHidden"/>
复制代码

软键盘及时退出的问题
- 当用户输入完成以后，必须手动点击软键盘的收回键，软键盘才收起。若是能经过代码主动将软键盘收起，这对于用户体验来讲，是一个极大的提高，思前想后，参考网上的文档，我的比较喜欢的实现方式是经过事件分发机制来解决这个问题。

解决点击EditText弹出收起键盘时出现的黑屏闪现现象

View rootView = hte_content.getRootView();
rootView.setBackgroundColor(Color.WHITE);
复制代码

18.先后台切换编辑富文本优化

因为富文本中，用户会输入不少的内容，当关闭页面时候，须要提醒用户是否保存输入内容。同时，切换到后台的时候，须要注意保存输入内容，避免长时间切换后台进程内存吃紧，在回到前台输入的内容没有呢，查阅了汽车之家，易车等app等手机上的富文本编辑器，都会有这个细节点的优化。

19.生成html片断上传服务器

19.1 提交富文本

客户端生成html片断到服务器
- 在客户端提交帖子，文章。富文本包括图片，文字内容，还有文字span样式，同时会选择一些文章，帖子的标签。还有设置文章的类型，封面图，做者等许多属性。
- 当点击提交的时候，客户端把这些数据，转化成html，仍是转化成json对象提交给服务器呢？思考一下，会有哪些问题……
转化成html
- 对于将单个富文本转化成html相对来讲是比较容易的，由于富文本中之存在文字，图片等。转化成html细心就能够。
- 可是对于设置富文本的标签，类型，做者，封面图，日期，其余关联属性怎么合并到html中呢，这个相对麻烦。
最后想说的是
- 对于富文本写帖子，文章，若是写完富文本提交，则可使用转化成html数据提交给服务器；
- 对于富文本写完帖子，文章，还有下一步，设置标签，类型，封面图，做者，时间，还有其余属性，则可使用转化成json数据提交给服务器；

19.2 编辑富文本

服务器返回html给客户端加载
- 涉及到富文本的加载，后台管理端编辑器生成的一段html 代码要渲染到移动端上面，一种方法是前端作成html页面，放到服务器上，移动端这边直接webView 加载url便可。
- 还有一种后台接口直接返回这段html富文本的，String类型的，移动端直接加载的；具体的需求按实际状况而定。
加载html文件流畅问题
- webView直接加载url体验上没那么流畅，相对的加载html文件会好点。可是对比原生，体验上稍微弱点。
- 若是不用WebView，使用TextView显示html富文本，则会出现图片不显示，以及格式问题。
- 若是不用WebView，使用自定义富文本RichText，则须要解析html显示，若是对html标签，js不熟悉，也不太好处理。

20.生成json片断上传服务器

参考了易车发布帖子，提交数据到服务器，针对富文本，是把它拼接成对象。将文字，图片按照富文本的顺序拼接成json片断，而后提交给服务器。

20.1 提交富文本

用原生ScrollView + LineaLayout + n个EditText+Span + n个ImageView来实现富文本。能够先建立一个对象用来存储数据，下面这个实体类比较简单，开发中字段稍微多些。以下所示

public class HyperEditData implements Serializable {

    /** * 富文本输入文字内容 */
    private String inputStr;
    /** * 富文本输入图片地址 */
    private String imagePath;
    /** * 类型：1，表明文字；2，表明图片 */
    private int type;

    //省略不少set，get方法
}
复制代码

而后怎么去把富文本数据按照有序去放到集合中呢？以下所示，具体能够看demo中的代码……

/** * 对外提供的接口, 生成编辑数据上传 */
public List<HyperEditData> buildEditData() {
    List<HyperEditData> dataList = new ArrayList<>();
    try {
        int num = layout.getChildCount();
        for (int index = 0; index < num; index++) {
            View itemView = layout.getChildAt(index);
            HyperEditData hyperEditData = new HyperEditData();
            if (itemView instanceof EditText) {
                //文本
                EditText item = (EditText) itemView;
                hyperEditData.setInputStr(item.getText().toString());
                hyperEditData.setType(2);
            } else if (itemView instanceof RelativeLayout) {
                //图片
                HyperImageView item = itemView.findViewById(R.id.edit_imageView);
                hyperEditData.setImagePath(item.getAbsolutePath());
                hyperEditData.setType(1);
            }
            dataList.add(hyperEditData);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    HyperLogUtils.d("HyperTextEditor----buildEditData------dataList---"+dataList.size());
    return dataList;
}
复制代码

最后将富文本数据转化为json提交到服务器，服务器拿到json后，结合富文本的后续信息，好比，做者，时间，类型，标签等建立能够用浏览器打开的h5页面，这个须要跟服务器端配合。以下所示

List<HyperEditData> editList = hte_content.buildEditData();
//生成json
Gson gson = new Gson();
String content = gson.toJson(editList);
//转化成json字符串
String string = HyperHtmlUtils.stringToJson(content);
//提交服务器省略
复制代码

20.2 编辑富文本

固然，提交了文章确定还有审核功能，这个时候想去修改富文本怎么办。ok，须要服务器把以前传递给它的json返回给客户端，而后解析填充到富文本中。这个就没什么好说的……

21.图片上传策略问题思考

大多数开发者会采用的方式：
- 先在编辑器里显示本地图片，等待用户编辑完成再上传所有图片，而后用上传返回的url替换以前html中显示本地图片的位置。
这样会遇到不少问题：
- 若是图片不少，上传的数据量会很大，手机的网络状态常常不稳定，很容易上传失败。另外等待时间会很长，体验不好。
解决办法探讨：
- 选图完成即上传，获得url以后直接插入，上传是耗时操做，再加上图片压缩的时间，这样编辑器显示图片会有可观的延迟时间，实际项目中能够加一个默认的占位图，另外加一个标记提醒用户是否上传完成，避免没有上传成功用户即提交的问题。
这种场景很容易想到：
- 好比，在简书，掘金上写博客。写文章时，插入本地图片，即便你没有提交文章，也会把图片上传到服务器，而后返回一个图片连接给你，最后当你发表文章时，图片只须要用连接替代便可。
参考博客
- Android富文本编辑器（四）：HTML文本转换：www.jianshu.com/p/578085fb0…
- Android 端（图文混排）富文本编辑器的开发（一）：www.jianshu.com/p/155aa1e9f…
- 图文混排富文本文章编辑器实现详解：blog.csdn.net/ljzdyh/arti…

22.一些细节问题的处理

关于软键盘的弹出和关闭，以及避免点击EditText弹出收起键盘时出现的黑屏闪现现象，还有返回键判断若是有软键盘显示则须要先关闭软键盘。
在获取EditText控件内容字符串的时候，或者对字符串裁剪等等，建议最后都进行trim一下，避免字符串末尾处出现空格，增长严谨性。
针对封装库中的一些工具类，或者不想被继承的类，建议用finial修饰一下，这边能够避免反射修改属性，或者经过继承修改属性，看了Rx，OkHttp等源码，能够发现不少类用了finial修饰。
在控件销毁的时候，建议移除一些监听事件，同时保存一些比较重要的信息。针对设置span样式，考虑后期添加更多，所以特别注意后期代码的拆分和解藕操做。