基于Spanned排版引擎初探

前言

****的个人中心的界面基本上都要求需要服务端可配置,实现灵活排版.但对于客户端来说,这种方式实现起来不确定因素带多了,仅用单纯的某一控件是很难实现的.其一解决方法是这些页面都用WebView控件排版,这样服务端只要填充web页面就可以了,但是WebView是重量级的,而且会伴有不确定的WebKitCore的内存泄漏,再则由于Web页面数据大小,服务器,网络等因素页面加载有可能出现缓慢的现象.故这里提出一种基于android TextView控件的Spanned的排版和数据解析的实现方式.可以实现url点击,图文混排,颜色,背景等独立排版.如此服务端就可单独下发标签化数据,此外客户端又可根据不同类型数据,实现不同的数据请求策略.

利用上述的方法就可在个人中心的部分页面以及私信内容实现服务端可控图文混排.

一、格式化标签

要想达到前言中的效果,就要规定一组可识别的格式化标签规范,该标签语法如下:

1. 一级标签: $span:<tag>[(arg0,arg1,…)];

. ’$span’为格式化标签开始,

. ’;’为格式化标签结尾;

. ’<tag>’标签主体,必有部分,例如图片:’img’,链接:’url’;

. [(arg0,arg1,…)]是后随参数部分.例如:图片:$span:image(1, meta_account);

一级格式化标签具体详见:

1) 文本标签: $span:text(content, arg…),text标签也可以当作子标签嵌套到其他标签中;

. content: 需要排版的字符串; arg为二级标签,定义排版规则;

. arg: 可以是font/face/style标签组合;

2) 图片标签: $span:image(flag, src, width, heigh), image标签也可以当作子标签嵌套到其他标签中;

flag: 指明图片资源的类型; src: 说明图片资源的来源;

. flag=0,即图片是网络资源,其中src是图片的url,客户端会有一套完整的缓存机制来控制;

. flag=1,即图片为客户端资源,其中src是客户端规定目录下的某一图片资源,如果该src是相对路径,则指向的是客户端默认资源库中的图片资源;否则是资源绝对路径;

. flag=2,即图片为客户端资源,其中src是客户端系统中的资源名称,该资源是通过Context.getResource()加载的;

3) 链接标签: $span:url(alt, href);

alt: 说明该链接在客户端的显示名称; hrdf: 链接的url;

. alt可以是一串字符串,也可以嵌套img(flag, src)标签,还可以是排版标签,例如fnt(text_size, foreground_color, background_color);

. href: 链接的指向的url,同时也可以是Action脚本;

2. 二级标签: <tag>[(arg0,arg1,…)]

. 二级标签为嵌套标签,是一组辅助排版标签,不能独立使用;

. ’<tag>’标签主体,必有部分;

. [(arg0,arg1,…)]是后随参数部分;

二级格式化标签具体详见:

1) 字体大小颜色标签: font(text_size, foreground_color, background_color);

. text_size: 字体大小;

. foreground_color: 前景色,即字体颜色;

. background_color: 背景色;

2) 字体标签: face(flag, src);

. flag=0,即字体是网络资源,其中src是图片的url,客户端会有一套完整的缓存机制来控制;

. flag=1,即字体为客户端资源,其中src是客户端规定目录下的某一字体,如果该src是相对路径,则指向的是客户端默认字体库中的字体;否则是字体绝对路径;

. flag=2,即字体为客户端资源,其中src是客户端系统中的字体名称;

3) 字体样式: style(style);

style为解析器所能支持的样式:

. style=normal: 系统默认字体样式;

. style=bold: 粗体;

. style=italic: 斜体;

. style=under_line: 下划线;

. style=strike_through: 删除线;

. style=subscript: 上标;

. style= superscript: 下标;

4) 字体宽度: scaleX(float);

5) 字体水平对齐: align([left, right, center]);

6) 字体竖直对齐: valign([top, middle, bottom]);

二、解析引擎

解析引擎分成2部分,一部分是用来解析格式化标签;一部分是用来创建标签span对象;

格式化标签解析器,是用来将服务端下发的标签数据解析成客户端可识别的对象.

Span对象由BackgroundColorSpan, ForegroundColorSpan, ClickableSpan, URLSpan, StyleSpan, ScaleXSpan, TypefaceSpan UnderlineSpan等组成.

三、示例

1. 图文混排: 2.礼券: $span:image(2, p_coin);

2. 链接: 金秋…可以领1次~ $span:url(text([立即充值], font(23, #ff004100, #ff002000)), action:RechargeCoinAction);

来源：oschina

链接：https://my.oschina.net/u/57046/blog/159692

标签

spanned

排版

引擎