最近有一个需求：移动端需要展示用户在PC端做的笔记，而笔记内容是富文本形式——有图片，有文字，文字可以设置颜色、加粗、倾斜等等。同时，用户点击的时候能够语音朗读所点击的当前整句的内容。
第一反应就是富文本！PC端生成的就是html文件，创给我，直接用WebView展示不就ok了嘛！
但是，还有一需求：点击断句——我们需要判断用户的点击，定位到所点击的整句话，然后再将整句内容实现语音播报。
这样的话WebView似乎就不满足要求了，所以最终决定使用TextView来实现。
github地址 https://github.com/shuaijia/RichTextView 欢迎star
先看效果
静态展示：
点击断句
语音合成播报 这个就不展示了，大家可以下载实例代码运行体验。
特别地：我还实现了断点语音播报和循环播报。
技术点
在实现上述需要求，我们需要以下技术点为基础：
Html.fromHtml()
fromHtml重载两个方法，分别是：
1、Spanned android.text.Html.fromHtml(String source) //输入的参数为（html格式的文本）
目前android不支持全部的html的标签，目前只支持与文本显示和段落等标签，对于图片和其他的多媒体，还有一些自定义标签不能识别。
例子：
2 、Spanned android.text.Html.fromHtml(String source, ImageGetter imageGetter, TagHandler tagHandler)
- source： 需处理的html文本
- imageGetter ：对图片处理（处理html中的图片标签）
- tagHandler ：对标签进行处理（相当于自定义的标签处理，在这里面可以处理自定义的标签）
也就是说，我们完全可以使用Html.fromHtml方法，传入html代码，最后返回Spanned 对象，在使用setText方法既可实现用TextView展示html类型的富文本。
图片处理
上一部分也说了，使用Html.fromHtml( )方法展示富文本的时候，某些自定义的标签和图片识别不了，也就是加载不出来。而我们的项目中没有自定义的特殊标签，最关键的就是图片的加载！
翻过头我们再看下fromHtml的三个参数的方法：
- source： 需处理的html文本
- imageGetter ：对图片处理（处理html中的图片标签）
- tagHandler ：对标签进行处理（相当于自定义的标签处理，在这里面可以处理自定义的标签）
source是html文本这个不用说了，第二个参数imageGetter 负责图片的加载，tagHandler 是在加载时获取各标签。
想到这里，图片加载使用自定义ImageGetter就可以了啊，于是乎：
1、 创建图片请求工具方法：
html标签中的图片全是在img标签中，而且都是图片链接，所以简单写一方法来实现加载网络图片：
我这里简单使用HttpUrlConnection来实现加载网络图片，大家可以根据自己项目换成Glide等框架。
2、自定义ImageLoader：
getDrawable方法中的参数source通过打log看出就是在加载html文本时，需要加载的网络图片的地址url；
那似乎很简单啊，加载网络图片返回（需要注意的是：加载到的是Bitmap对象，需要转成Drawable对象再返回；再者就是需要考虑子线程去加载，我这里只是简单展示原理，没有开启子线程加载图片）。
然后创建NetWorkImageGetter 对象，在fromHtml时传入既可。
但是！
3、存在的问题及优化
这样存在一个问题，我们使用fromHtml加载html文本时，图片是同步加载，而加载网络图片和加载html是异步的，也就是说：在加载到图片之前，其他文本已经显示到界面上，所以需要我们再次设置html文本。
那我们考虑下，是不是每加载完一张图片就刷新一下呢？这样会导致界面刷新好多次，用户可能刚滑到底部查看内容，这时加载到第一张图片，界面就会立马刷新到最上方，这样的用户体验会不会很不好~
所以，我的思路是当所有图片全部加载完成后，再刷新界面，也就是重新setText。
但我怎么会知道什么时候就全部加载完图片了呢？或者说我怎么能够知道一共需要加载多少张图片呢？
此时就用到了第三个参数：TagHandler
先了解下TagHandler
结果呢：
突然发现，s变量就是html文本中的各个标签。同时我们也发现，每次都是先加载图片，然后才弹回img的tag。
这样就好办了，
在TagHandler中计算img标签的个数，在ImageGetter中等加载图片个数全部完成时，再次刷新界面（重新调用setText方法）。
在全部图片加载完成后在刷新textview内容（这里的setText是稍后会讲到的封装的设置html代码，大家可简单的理解成setText（Html.fromHtml(… )））。
点击断句
这里就用到了SpannableStringBuilder！
我的思路是这样的：
- 从TextView获取展示的内容。我们认为！ 。 ？ @ … ···等符号是一句话结束的标志，所以通过它们将完整语句分割，存入数组；
- 创建一int类型数组，存放每句话在全文中开始的位置；
- 使用循环将每一句都设置对应的点击；
- 注意setMovementMethod(LinkMovementMethod.getInstance());必须设置，否则无效果。
看下TextViewURLSpan代码：
我们将每句对应数组中的下标传入，方便语音合成时从数组中获取文本内容。
因为循环播放是使用handler发消息进行通知的，所以重新开始播放时，先移出之前的消息。
语音合成
语音合成就不再啰嗦了，不清楚的查看讯飞开发文档就ok了，挺简单的。
因为需求要求是点击每句要变颜色，所以进行了一次循环，给每句话都设置了ForegroundColorSpan，给文字更改颜色。
这样就结束了哦！
