转：

转至：沪江技术学院

背景

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合并优化处理。