转：
转至：沪江技术学院
背景
OCS(Open Courseware System)是沪江统一的交互式课件制作软件与教学工具，我们在制作课件的时候往往会对文字使用各种各样的样式。例如：颜色，加粗，上标，下标，下划线，字体，行距，动画效果等，经过多方的考虑最终决定使用HTML的通用标准来显示富文本。
Web端可以直接使用，成本低廉稳定。
iOS，Android端对基本的标签系统也进行了支持，方便使用。
以下文章重点讲述在Android上的实现思路，iOS侧可采用类似方案实现。
通过对Android源码及文档的解读，发现原生Android 使用Parse库(该库并不在Android源码中是属于第三方org.ccil.cowan.tagsoup)对HTML进行解析。但只实现了部分标签，对于CSS Style的支持基本上是0。为解决这些问题，我们对市面上的一些开源库进行了调研。
以下列出代表性的几个作为参考：
开源库优势不足
AndroidCoreText支持图文混排；HTML标签支持来自于Android原生不支持CSS样式解析
XRichText直接调用text方法显示html；支持自定义超链接，图片；能够自定义图片下载器不支持CSS样式解析
HtmlSpanner支持CSS样式；将HTML转换成Android能识别的SpannableString支持了部分的css样式，适配等需要做二次开发
综上，我们最终选用HtmlSpanner来做富文本的解析。
富文本解析总共分为以下三块:
HTML标签支持
CSS样式支持
多字体支持
HTML标签支持
HtmlSpanner是在原生库的基础上进行扩展封装的。因此Android能支持的标签，这个库一并都支持了。但是在特殊字符的处理上还需要手动的进行替换，特殊字符处理统一封装在TextUtil类中。
Android不支持的一些HTML标签，而项目中又用得到的，可在HtmlSpanner的registerBuiltInHandlers方法中进行注册。
CSS样式支持
HtmlSpanner对CSS的样式是支持的，引用了Cssparser库来解析CSS。
源码地址：https://github.com/corgrath/osbcp-css-parser
HtmlSpanner 对Cssparser 库的使用主要集在 CSSCompiler.java，将文本转换成Rule的对象。
代码如下：
privatevoidparseCSSFromText(String text, SpanStack spanStack){try{for(Rule rule : CSSParser.parse(text)) { spanStack.registerCompiledRule(CSSCompiler.compile(rule, getSpanner())); } }catch(Exception e) { Log.e("StyleNodeHandler","Unparseable CSS definition", e); }}
若在样式表中增加自定义属性也能在该类中进行扩展。
publicstaticStyleUpdatergetStyleUpdater(finalString key,finalString value){if("font-family".equals(key)) {//解析文本字体returnnewStyleUpdater() {@OverridepublicStyleupdateStyle(Style style, HtmlSpanner spanner){ Log.d("CSSCompiler","Applying style "+ key +": "+ value ); FontFamily family = spanner.getFont( value ); Log.d("CSSCompiler","Got font "+ family );returnstyle.setFontFamily(family); } }; } ... ...}
多字体支持
在课件的制作中往往会使用到各类字体，比如 中文，日文，韩文，法语等，也会用到一些海报体等艺术字，若在手机中没有包含这些字体时，系统一般会用默认字体来显示，整体的效果也会大打折扣。
we.png
常规的做法是将相应的文字生成图片，但是这样的做法会带来诸多的问题：
图片数量多，占用空间大
适配不一样屏幕则需要多套图片
文字动画效果难以实现
Android也提供了加载外部字体的功能，但该功能在TextView上一次只能加载一套字体，并且一个常规的字体库一般都有20M左右，如果一节课中使用多个字体则会对APP造成极大的负担。
为解决这些问题我们找到了一种较好的方案：
APP从服务器获取到精简版的字体（只包含需要显示的字体文件），然后构造HtmlSpanner对象 。
HtmlSpanner 在像SystemFontResolver对象获取需要的FontFamily对象，最终转换成android TextView 能够识别的SpannableString对象。
流程如下：
1111.png
第一步,制作精简版字库
精简版字库可以用google提供的一款开源库来解决。
下载地址：https://code.google.com/p/sfntly/
使用起来也十分简单：
java -jar sfnttool.jar-s"需要提取的文字"原始字体文件.ttf新字体文件.ttf
执行以上命令即可得到一份精简版的字体文件。
通过对几种字体的提取得出以下数据：
字体5字100字500字1000字原始大小
微软雅黑10k46k205k422k14.7 M
华康娃娃体8k29k135k284k3 M
思源黑体6k24k95k192K8 M
第二步,自定义字体
Android端默认支持三种字体：monospace，sans，serif。
并有四种表现形式：正常、斜体、粗体、粗斜体。
DroidSans是默认英文
DroidSansFallback 字体是 Google 为手机"Android"内建的系统字体，支持繁体中文、简体中文、韩文、日文。
HtmlSpanner 库中 SystemFontResolver 类是用于构造字体对象的。该类中构造了4个字体。
代码如图:
publicSystemFontResolver(){this.defaultFont =newFontFamily("default", Typeface.DEFAULT);this.serifFont =newFontFamily("serif", Typeface.SERIF);this.sansSerifFont =newFontFamily("sans-serif", Typeface.SANS_SERIF);this.monoSpaceFont =newFontFamily("monospace", Typeface.MONOSPACE );}
自定义字体需要对该类进行一定的扩展，使之能够支持动态加载，释放字体对象。
@OverridepublicvoidapplyFont(String fontName, String path){if(!TextUtils.isEmpty(fontName) && !TextUtils.isEmpty(path)) {if(fontName.startsWith("\"") && fontName.endsWith("\"")) { fontName = fontName.substring(1, fontName.length() -1); }if(fontName.startsWith("\'") && fontName.endsWith("\'")) { fontName = fontName.substring(1, fontName.length() -1); } File file =newFile(path);if(file.exists()) { fontName = fontName.toLowerCase(); customFontMap.put(fontName,newFontFamily(fontName, Typeface.createFromFile(file))); } }}
第三步,显示字体
//动态自定义字体HtmlSpannerHelper.getInstance().getSpanner().getFontResolver().applyFont(getAssets(),"艺术1","fonts/a1.ttf");TextView tx2 = (TextView) findViewById(R.id.txt2);String content1 ="0129fg";HtmlSpannerHelper.getInstance().setText(tx2, content1);
以上是OCS播放器富文本的实现思路，其中我们主要借助HtmlSpanner 库进行二次开发，下面来看看HtmlSpanner库是如何运作的：
HtmlSpanner 剖析
y7.png
HtmlSpanner通过注册大量的Handler 来识别Html 的标签，将注册过的标签通过HtmlCleaner库进行解析，最终转换成TextView能够识别的Spannable对象进行显示。
HtmlSpanner 的解析流程
y6.png
HtmlSpanner 有很完善的扩展性，例如扩展自定义标签:
registerHandler("span", wrap((newStyledTextHandler())));
参数一为自定义的标签名称，参数二是TagNodeHandler的继承类
publicclassStyledTextHandlerextendsTagNodeHandler{privateStyle style;publicStyledTextHandler(){this.style =newStyle(); }@OverridepublicvoidbeforeChildren(TagNode node, SpannableStringBuilder builder, SpanStack spanStack){ ...... }}
遇到的坑
1. 行高在不同版本SDK中显示不一样
低版本的Android系统
h1.png
Android M上的显示效果
h2.png
解决：
自定义一个LineHeightSpan引用 android.text.style.LineHeightSpan
重写 chooseHeight 方法
@OverridepublicvoidchooseHeight(CharSequence text,intstart,intend,intspanstartv,intv, Paint.FontMetricsInt fm){intextra =0;if(height >0) { extra = Math.round((height - (fm.descent - fm.ascent))); }elseif(spacingmult >0) { extra = Math.round((fm.descent - fm.ascent) * (spacingmult -1)); }if(android.os.Build.VERSION.SDK_INT >=23) {if(start == ((Spanned) text).getSpanStart(this)) { fm.descent += extra; fm.bottom = fm.descent; } }else{ fm.descent += extra; fm.bottom = fm.descent; }}
2. 文字大小适配
文字大小的解析来源与FontHandler 与StyledTextHandler。
在切换横竖屏的时候进行重绘。
//If we have a bottom margin, we insert an extra newline. We'll manipulate the line height//of this newline to create the margin.if(useStyle.getMarginBottom() !=null) { StyleValue styleValue = useStyle.getMarginBottom();if(styleValue.getUnit() == StyleValue.Unit.PX) {if(styleValue.getIntValue() >0) { appendNewLine(builder); stack.pushSpan(newVerticalMarginSpan(styleValue.getIntValue()), builder.length() -1, builder.length()); } }else{if(styleValue.getFloatValue() >0f) { appendNewLine(builder); stack.pushSpan(newVerticalMarginSpan(styleValue.getFloatValue()), builder.length() -1, builder.length()); } }}
3. 系统资源消耗大
显示艺术字时字体文件都在内存中，因此在退出的时候要记得手动release一下，把资源清理掉。
设置文字的时候由于解析富文本、图片下载显示比较耗时,所以使用的是handler机制。因此也要注意handler的泄漏问题，最好是static的 handler。
publicvoidsetText(finalTextView textView,finalString text){newThread(newRunnable() {@Overridepublicvoidrun(){if(textView !=null&& text !=null) { Spannable spannable = mSpannable.fromHtml(text); Message message = mHandler.obtainMessage(); SpannableMessage obj =newSpannableMessage(textView, spannable); message.obj = obj; mHandler.sendMessage(message); } } }).start();}
后续改进点
HtmlSpanner 采用HTMLCleaner解析库对HTML标签进行解析。该库比较庞大，方法数较多，可替换成SDK内置的javax.xml.parsers库来进行解析。
HtmlSpanner库可结合Picasso库对图片显示进行优化，使其更强大。
在一个标签中存在多个样式属性时 HtmlSpanner 仅解析了第一个style属性，可进行style合并优化处理。
