作者：彭佳
本文为原创，转载请注明作者及出处

背景

OCS(Open Courseware System)是沪江统一的交互式课件制作软件与教学工具，我们在制作课件的时候往往会对文字使用各种各样的样式。例如：颜色，加粗，上标，下标，下划线，字体，行距，动画效果等，经过多方的考虑最终决定使用HTML的通用标准来显示富文本。

• Web端可以直接使用，成本低廉稳定。
• iOS，Android端对基本的标签系统也进行了支持，方便使用。

以下文章重点讲述在Android上的实现思路，iOS侧可采用类似方案实现。

通过对Android源码及文档的解读，发现原生Android 使用Parse库(该库并不在Android源码中是属于第三方org.ccil.cowan.tagsoup)对HTML进行解析。但只实现了部分标签，对于CSS Style的支持基本上是0。为解决这些问题，我们对市面上的一些开源库进行了调研。

以下列出代表性的几个作为参考：

综上，我们最终选用HtmlSpanner来做富文本的解析。

富文本解析总共分为以下三块:

1. HTML标签支持
2. CSS样式支持
3. 多字体支持

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的对象。

代码如下：

private void parseCSSFromText(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);
    }
}

若在样式表中增加自定义属性也能在该类中进行扩展。

public static StyleUpdater getStyleUpdater(final String key, final String value) {
   if ( "font-family".equals(key)) { //解析文本字体
       return new StyleUpdater() {
           @Override
           public Style updateStyle(Style style, HtmlSpanner spanner) {
               Log.d("CSSCompiler", "Applying style " + key + ": " + value );
               FontFamily family = spanner.getFont( value );
               Log.d("CSSCompiler", "Got font " + family );
               return style.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

执行以上命令即可得到一份精简版的字体文件。

通过对几种字体的提取得出以下数据：

第二步,自定义字体

Android端默认支持三种字体：monospace，sans，serif。

并有四种表现形式：正常、斜体、粗体、粗斜体。

DroidSans是默认英文

DroidSansFallback 字体是 Google 为手机"Android"内建的系统字体，支持繁体中文、简体中文、韩文、日文。

HtmlSpanner 库中 SystemFontResolver 类是用于构造字体对象的。该类中构造了4个字体。

代码如图:

public SystemFontResolver() {
    this.defaultFont = new FontFamily("default", Typeface.DEFAULT);
    this.serifFont = new FontFamily("serif", Typeface.SERIF);
    this.sansSerifFont = new FontFamily("sans-serif", Typeface.SANS_SERIF);
    this.monoSpaceFont = new FontFamily("monospace", Typeface.MONOSPACE );
}

自定义字体需要对该类进行一定的扩展，使之能够支持动态加载，释放字体对象。

@Override
public void applyFont(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 = new File(path);
        if (file.exists()) {
            fontName = fontName.toLowerCase();
            customFontMap.put(fontName, new FontFamily(fontName, Typeface.createFromFile(file)));
        }
    }
}

第三步,显示字体

//动态自定义字体
HtmlSpannerHelper.getInstance().getSpanner().getFontResolver().applyFont(getAssets(), "艺术1", "fonts/a1.ttf");
TextView tx2 = (TextView) findViewById(R.id.txt2);
String content1 = "<span style=\" font-family:'艺术1'; font-size:60pt; color:#333333;\">0129fg</span>";
HtmlSpannerHelper.getInstance().setText(tx2, content1);

以上是OCS播放器富文本的实现思路，其中我们主要借助HtmlSpanner 库进行二次开发，下面来看看HtmlSpanner库是如何运作的：

HtmlSpanner 剖析

y7.png

HtmlSpanner通过注册大量的Handler 来识别Html 的标签，将注册过的标签通过HtmlCleaner库进行解析，最终转换成TextView能够识别的Spannable对象进行显示。

HtmlSpanner 的解析流程

y6.png

HtmlSpanner 有很完善的扩展性，例如扩展自定义标签<span>:

registerHandler("span", wrap((new StyledTextHandler())));

参数一为自定义的标签名称，参数二是TagNodeHandler的继承类

public class StyledTextHandler extends TagNodeHandler {
    private Style style;
    public StyledTextHandler() {
        this.style = new Style();
    }
    @Override
    public void beforeChildren(TagNode node, SpannableStringBuilder builder, SpanStack spanStack) {
    ......
     }
}

遇到的坑

1. 行高在不同版本SDK中显示不一样

低版本的Android系统

h1.png

Android M上的显示效果

h2.png

解决：

自定义一个LineHeightSpan引用 android.text.style.LineHeightSpan

重写 chooseHeight 方法

@Override
public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int v, Paint.FontMetricsInt fm) {
    int extra = 0;
    if (height > 0) {
        extra = Math.round((height - (fm.descent - fm.ascent)));
    } else if (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(new VerticalMarginSpan(styleValue.getIntValue()),
                    builder.length() - 1, builder.length());
        }
    } else {
        if (styleValue.getFloatValue() > 0f) {
            appendNewLine(builder);
            stack.pushSpan(new VerticalMarginSpan(styleValue.getFloatValue()),
                    builder.length() - 1, builder.length());
        }
    }

}

3. 系统资源消耗大

• 显示艺术字时字体文件都在内存中，因此在退出的时候要记得手动release一下，把资源清理掉。
• 设置文字的时候由于解析富文本、图片下载显示比较耗时,所以使用的是handler机制。因此也要注意handler的泄漏问题，最好是static的 handler。

public void setText(final TextView textView, final String text) {
    new Thread(new Runnable() {
        @Override
        public void run() {
            if (textView != null && text != null) {
                Spannable spannable = mSpannable.fromHtml(text);
                Message message = mHandler.obtainMessage();
                SpannableMessage obj = new SpannableMessage(textView, spannable);
                message.obj = obj;
                mHandler.sendMessage(message);
            }
        }
    }).start();
}

后续改进点

• HtmlSpanner 采用HTMLCleaner解析库对HTML标签进行解析。该库比较庞大，方法数较多，可替换成SDK内置的javax.xml.parsers库来进行解析。

• HtmlSpanner库可结合Picasso库对图片显示进行优化，使其更强大。

• 在一个标签中存在多个样式属性时 HtmlSpanner 仅解析了第一个style属性，可进行style合并优化处理。

更多技术文章，请关注「沪江技术学院」微信公众号。