基於Spanned排版引擎初探

基於Spanned排版引擎初探

前言

****的我的中心的界面基本上都要求須要服務端可配置,實現靈活排版.但對於客戶端來講,這種方式實現起來不肯定因素帶多了,僅用單純的某一控件是很難實現的.其一解決方法是這些頁面都用WebView控件排版,這樣服務端只要填充web頁面就能夠了,可是WebView是重量級的,並且會伴有不肯定的WebKitCore的內存泄漏,再則因爲Web頁面數據大小,服務器,網絡等因素頁面加載有可能出現緩慢的現象.故這裏提出一種基於android TextView控件的Spanned的排版和數據解析的實現方式.能夠實現url點擊,圖文混排,顏色,背景等獨立排版.如此服務端就可單獨下發標籤化數據,此外客戶端又可根據不一樣類型數據,實現不一樣的數據請求策略.

利用上述的方法就可在我的中心的部分頁面以及私信內容實現服務端可控圖文混排.

1、格式化標籤

    要想達到前言中的效果,就要規定一組可識別的格式化標籤規範,該標籤語法以下:

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、解析引擎

解析引擎分紅2部分,一部分是用來解析格式化標籤;一部分是用來建立標籤span對象;

格式化標籤解析器,是用來將服務端下發的標籤數據解析成客戶端可識別的對象.

Span對象由BackgroundColorSpan, ForegroundColorSpan, ClickableSpan, URLSpan, StyleSpan, ScaleXSpan, TypefaceSpan UnderlineSpan等組成.

3、示例

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

2.  連接: 金秋…能夠領1次~ $span:url(text([當即充值], font(23, #ff004100, #ff002000)), action:RechargeCoinAction);