最近有一个需求:移动端需要展示用户在PC端做的笔记,而笔记内容是富文本形式——有图片,有文字,文字可以设置颜色、加粗、倾斜等等。同时,用户点击的时候能够语音朗读所点击的当前整句的内容。
第一反应就是富文本!PC端生成的就是html文件,创给我,直接用WebView展示不就ok了嘛!
但是,还有一需求:点击断句——我们需要判断用户的点击,定位到所点击的整句话,然后再将整句内容实现语音播报。
这样的话WebView似乎就不满足要求了,所以最终决定使用TextView来实现。
github地址 欢迎star
一、先看下富文本展示效果:
静态展示:
点击断句
语音合成播报
这个就不展示了,大家可以下载实例代码运行体验。
特别地:我还实现了断点语音播报和循环播报。
二、技术点
在实现上述需要求,我们需要以下技术点为基础:
三、Html.fromHtml( )
fromHtml重载两个方法,分别是:
1、Spanned android.text.Html.fromHtml(String source) //输入的参数为(html格式的文本)
目前android不支持全部的html的标签,目前只支持与文本显示和段落等标签,对于图片和其他的多媒体,还有一些自定义标签不能识别。
例子:
TextView t3 = (TextView) findViewById(R.id.text3);
t3.setText(Html.fromHtml( "<b>text3:</b> Text with a " + "<a href=\"http://www.google.com\">link</a> " +"created in the Java source code using 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标签中,而且都是图片链接,所以简单写一方法来实现加载网络图片:
/**
* 根据一个网络连接(String)获取bitmap图像
*
* @param imageUri
* @return
*/
public static Bitmap getbitmap(String imageUri) {
// 显示网络上的图片
Bitmap bitmap = null;
try {
URL myFileUrl = new URL(imageUri);
HttpURLConnection conn = (HttpURLConnection) myFileUrl
.openConnection();
conn.setDoInput(true);
conn.connect();
InputStream is = conn.getInputStream();
bitmap = BitmapFactory.decodeStream(is);
is.close();
} catch (OutOfMemoryError e) {
e.printStackTrace();
bitmap = null;
} catch (IOException e) {
e.printStackTrace();
bitmap = null;
}
return bitmap;
}
我这里简单使用HttpUrlConnection来实现加载网络图片,大家可以根据自己项目换成Glide等框架。
2、自定义ImageLoader:
class NetWorkImageGetter implements Html.ImageGetter {
@Override
public Drawable getDrawable(final String source) {
Log.e(TAG, "getDrawable: ");
Drawable drawable= new BitmapDrawable(getbitmap(source));
return drawable;
}
}
getDrawable方法中的参数source通过打log看出就是在加载html文本时,需要加载的网络图片的地址url;
那似乎很简单啊,加载网络图片返回(需要注意的是:加载到的是Bitmap对象,需要转成Drawable对象再返回;再者就是需要考虑子线程去加载,我这里只是简单展示原理,没有开启子线程加载图片)。
然后创建NetWorkImageGetter 对象,在fromHtml时传入既可。
但是!
3、存在的问题及优化
这样存在一个问题,我们使用fromHtml加载html文本时,图片是同步加载,而加载网络图片和加载html是异步的,也就是说:在加载到图片之前,其他文本已经显示到界面上,所以需要我们再次设置html文本。
那我们考虑下,是不是每加载完一张图片就刷新一下呢?这样会导致界面刷新好多次,用户可能刚滑到底部查看内容,这时加载到第一张图片,界面就会立马刷新到最上方,这样的用户体验会不会很不好~
所以,我的思路是当所有图片全部加载完成后,再刷新界面,也就是重新setText。
但我怎么会知道什么时候就全部加载完图片了呢?或者说我怎么能够知道一共需要加载多少张图片呢?
此时就用到了第三个参数:TagHandler
先了解下TagHandler
new Html.TagHandler() {
@Override
public void handleTag(boolean b, String s, Editable editable, XMLReader xmlReader) {
Log.e(TAG, "handleTag: " + s);
}
};
结果呢: