本系列文章

• 《VirtualView Android實(shí)現(xiàn)詳解（一）—— 文件格式與模板編譯》
• 《VirtualView Android 實(shí)現(xiàn)詳解（二）—— 虛擬控件的設(shè)計(jì)與實(shí)現(xiàn)》

前文介紹了模板的基本格式、虛擬控件與原生控件混合使用的方式亏较。本文重點(diǎn)在把這兩塊內(nèi)容串起來(lái)介紹一下遵岩，如何實(shí)現(xiàn)從模板生成一個(gè)運(yùn)行時(shí)的控件尘执，并如何注冊(cè)一個(gè)自定義控件使用宴凉。

相關(guān)開(kāi)源庫(kù)

Android

• Tangram-Android
• Virtualview-Android

iOS

• Tangram-iOS
• Virtualview-iOS

名詞解釋

• VirtualView：如果還不清楚丧靡，可以閱讀《天貓客戶端組件動(dòng)態(tài)化的方案——VirtualView 上手體驗(yàn)》大概了解下温治；
• 控件：基礎(chǔ)的 UI 單元熬荆，像文本卤恳、圖片、布局等若债，通過(guò)在 XML 里被引用然后描述一個(gè)復(fù)雜的界面拆座。

從 XML 到運(yùn)行時(shí)實(shí)例

舉個(gè)簡(jiǎn)單的例子挪凑，在 XML 模板里躏碳，可能會(huì)有這么一塊控件的使用：

<NText
    id="1"
    text="title"
    textSize="12"
    textColor="#333333"
    layoutWidth="wrap_content"
    layoutHeight="wrap_content"
    lineSpaceMultiplier="1.1"
    lines="2"
    flag="flag_event|flag_exposure|flag_clickable"
 />

這在 VirtualView 表示引用一個(gè)文本控件（VirtualView 內(nèi)置支持的所有控件見(jiàn)文檔）散怖，在《VirtualView Android實(shí)現(xiàn)詳解（一）—— 文件格式與模板編譯》里曾講過(guò)會(huì)將 XML 里的字符串等編譯成整型數(shù)值或者索引來(lái)降低解析成本镇眷。因此從在 XML 里使用一個(gè)控件到運(yùn)行時(shí)渲染它欠动，就要經(jīng)過(guò)一系列的轉(zhuǎn)換過(guò)程，其中有一半的過(guò)程是事先離線執(zhí)行的翅雏，另一半的過(guò)程才是在客戶端里運(yùn)行時(shí)執(zhí)行望几。以下這張圖概括了整個(gè)流程：

image

說(shuō)明一下每個(gè)步驟：

• 先編寫(xiě) XML 文件橄抹，如圖所示引用了一個(gè) NText 控件害碾；
• 在 Config 文件里配置 NText 的標(biāo)簽名及屬性的映射關(guān)系；像這種內(nèi)置控件都已經(jīng)配置好了芬沉，如果是自定義屬性和控件，才要操作自己添加配置剃袍；配置文件含義參考這篇文章：VirtualView 工具大更新啦民效。在這個(gè)示例中涛救，NText 標(biāo)簽被編譯工具編譯成數(shù)字 7检吆，屬性名 id蹭沛、text、textSize咆贬、textColor 都被編譯成一個(gè) hashcode 索引掏缎，真正的字符串值會(huì)存儲(chǔ)到字符串資源區(qū)御毅；屬性值 title 也是被編譯成一個(gè) hashcode 索引端蛆，真正的字符串值會(huì)存儲(chǔ)到字符串資源區(qū)今豆；屬性值 12 被直接編譯成數(shù)字 12呆躲； 屬性值 #333333 被編譯成顏色值 -13421773捶索；
• 編譯工具根據(jù) XML 文件和 Config 文件編譯出一份二進(jìn)制文件，交給客戶端使用酝润；
• 客戶端初始化框架的時(shí)候會(huì)根據(jù) id 注冊(cè)控件要销，在這個(gè)示例中 7 代表了 NativeText 類控件疏咐，它就用來(lái)實(shí)例化 XML 里的 NText 標(biāo)簽脐供；
• 最后將 XML 里 NText 下的屬性傳給 NativeText 實(shí)例進(jìn)一步用于渲染；

創(chuàng)建控件實(shí)例的過(guò)程

以創(chuàng)建一個(gè) PicassoImage 為例（雖然內(nèi)置了 VImage 和 NImage 兩個(gè)控件缩举，但在實(shí)際業(yè)務(wù)場(chǎng)景中仅孩，還是使用一個(gè)自定義的圖片控件比較合適辽慕，這樣可以更好利用起結(jié)合圖片庫(kù)的內(nèi)存管理溅蛉、性能優(yōu)化等 feature）船侧。

目標(biāo)

• 實(shí)現(xiàn)一個(gè)原生 Image 控件镜撩，使用 Picasso 加載圖片
• 支持綁定 url 屬性用來(lái)加載網(wǎng)絡(luò)圖片
• 支持綁定 degree 屬性用來(lái)旋轉(zhuǎn)圖片

1. 定義標(biāo)簽名及其 id袁梗，屬性名及類型

在編譯工具里配置文件里定義：

• VIEW_ID_PicassoImage=1014遮怜，其中 PicassoImage 就是 XML 里的標(biāo)簽名锯梁，id 值為 1014，這個(gè)是自定義的拜姿，建議從 1001開(kāi)始，前 1000 保留給系統(tǒng)使用蛤肌；
• degree=Float裸准，表示屬性名是 degree 炒俱，屬性值按 Float 類型編譯解析权悟；
• url=String峦阁，表示屬性名是 url榔昔，屬性值按 String 類型編譯瘪菌，不過(guò)未在配置文件里聲明的屬性都是按 String 類型編譯的诵肛，所以可以省略疆栏；

2. 定義控件的載體 View

取名 PicassoImageView珠洗，繼承 ImageView许蓖，實(shí)現(xiàn) IView 接口膊爪，因?yàn)?demo 比較簡(jiǎn)單沛豌，除此之外不做其他邏輯赃额，主要實(shí)現(xiàn) IView 的接口調(diào)用對(duì)應(yīng)的系統(tǒng) measure加派、layout 方法，因?yàn)檫@些方法是不能在外部調(diào)用的跳芳，只能通過(guò) IView 的接口封裝一下暴露出去芍锦。

詳細(xì)代碼：PicassoImageView.java

3. 定義控件 model

取名 PicassoImage，繼承 ViewBase飞盆，在構(gòu)造函數(shù)里實(shí)例化 PicassoImageView娄琉，并獲取自定義屬性的 id；

public PicassoImage(VafContext context,
        ViewCache viewCache) {
        super(context, viewCache);
        mPicassoImageView = new PicassoImageView(context.getContext());
        StringSupport mStringSupport = context.getStringLoader();
        // 這里會(huì)取加載的模板數(shù)據(jù)里取獲取對(duì)應(yīng)的 id吓歇，第一個(gè)參數(shù)是屬性名孽水，第二個(gè)參數(shù)應(yīng)當(dāng)為 false；
        urlId = mStringSupport.getStringId("url", false);
        degreeId = mStringSupport.getStringId("degree", false);
    }

由于 ViewBase 本身也是實(shí)現(xiàn) IView 接口的匈棘，所以復(fù)寫(xiě)幾個(gè) IView 的 measure鹃愤、layout 接口，去調(diào)用對(duì)應(yīng)的 PicassoImageView 里的接口姿现。在 VirtualView 體系內(nèi)部提佣，都是通過(guò) ViewBase 對(duì)象來(lái)驅(qū)動(dòng)布局計(jì)算的，因此必須通過(guò) IView 接口調(diào)用系統(tǒng) View 真正的計(jì)算接口。

@Override
public void onComMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    mPicassoImageView.onComMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
public void onComLayout(boolean changed, int l, int t, int r, int b) {
    mPicassoImageView.onComLayout(changed, l, t, r, b);
}

@Override
public void comLayout(int l, int t, int r, int b) {
    super.comLayout(l, t, r, b);
    //這一步很關(guān)鍵，否則 view 不顯示刑巧。
    mPicassoImageView.comLayout(l, t, r, b);
}

剩下的主要邏輯是處理自定義屬性浑彰，有幾個(gè) setAttribute，setRPAttribute 重載的方法，它們用于接收不同類型的屬性值：

• boolean setAttribute(int key, int value) 處理編譯成整數(shù)類型的屬性；
• boolean setAttribute(int key, float value) 處理編譯成浮點(diǎn)數(shù)類型的屬性；
• boolean setAttribute(int key, String stringValue) 處理編譯成字符串類型的屬性，包括那些本該編譯成整數(shù)或者浮點(diǎn)數(shù)但因?yàn)閷?xiě)了表達(dá)式被編譯成字符串類型的潭枣；
• boolean setRPAttribute(int key, int value) 處理編譯成整數(shù)類型的尺寸屬性篡九，單位是 rp(介紹在此)；
• boolean setRPAttribute(int key, float value) 處理編譯成浮點(diǎn)數(shù)類型的尺寸屬性金刁，單位是 rp；

基礎(chǔ) ViewBase 里解析處理了大量基礎(chǔ)屬性，所以自定義控件只要處理新增的自定義屬性就行了。以上這些重載方法都有一個(gè) Boolean 返回值，它遵循冒泡邏輯，當(dāng)你返回 true 的時(shí)候泊脐，當(dāng)前層級(jí)處理了這個(gè)屬性约郁，否則表示當(dāng)前層級(jí)處理不了這個(gè)屬性绽快，需要進(jìn)一步交給子類解析活孩；在本文的示例里蕉朵，是這么處理的：

@Override
protected boolean setAttribute(int key, float value) {
    boolean ret = true;
    if (key == degreeId) {
        //從模板里直接獲取到旋轉(zhuǎn)角度屬性值
        degrees = value;
    } else {
        ret = super.setAttribute(key, value);
    }
    return ret;
}

@Override
protected boolean setAttribute(int key, String stringValue) {
    boolean ret = true;
    if (key == degreeId) {
        //從模板里直接獲取到旋轉(zhuǎn)角度屬性值是一個(gè)表達(dá)式蝙茶，暫存到 viewCache 里蹄衷，等傳入數(shù)據(jù)的時(shí)候再次解析托嚣，然后回調(diào)到上述 setAttribute(int key, float value) 方法里獲取最終值
        if (Utils.isEL(stringValue)) {
            mViewCache.put(this, degreeId, stringValue, Item.TYPE_FLOAT);
        }
    } else if (key == urlId) {
        //從模板里直接獲取到url屬性值可能是一個(gè)表達(dá)式啤月，也可能是個(gè)直接的 url杉武，如果是表達(dá)式，暫存到 viewCache 里蘸秘，等傳入數(shù)據(jù)的時(shí)候再次解析，然后回調(diào)本方法里獲取最終值
        if (Utils.isEL(stringValue)) {
            mViewCache.put(this, urlId, stringValue, Item.TYPE_STRING);
        } else {
            url = stringValue;
        }
    } else {
        ret = super.setAttribute(key, stringValue);
    }
    return ret;
}

最后就是使用這些屬性值霞揉，在 onParseValueFinised() 里一次性應(yīng)用屬性：

@Override
public void onParseValueFinished() {
    super.onParseValueFinished();
    Picasso.with(mContext.getContext()).load(url).rotate(degrees).into(mPicassoImageView);
}

詳細(xì)代碼：PicassoImage.java

4. 注冊(cè)控件

通過(guò) ViewManager 里的 ViewFactory 注冊(cè)阶捆，如下：

sViewManager.getViewFactory().registerBuilder(1014,new PicassoImage.Builder());

5. 使用與運(yùn)行效果

XML 里這么寫(xiě)：

<VHLayout
    flag="flag_exposure|flag_clickable"
    orientation="V"
    layoutWidth="match_parent"
    layoutHeight="match_parent"
>
<VText
        text="Title: Loading Image with Picasso"
        textSize="12"
        textColor="#333333"
        background="#008899"
        layoutWidth="match_parent"
        layoutHeight="20" />

<PicassoImage
        url="${url}"
        degree="90"
        layoutWidth="match_parent"
        layoutHeight="300" />
</VHLayout>

綁定的數(shù)據(jù)：

{
  "url": "https://gw.alicdn.com/tfs/TB1l0HSgvxNTKJjy0FjXXX6yVXa-200-200.png"
}

運(yùn)行的結(jié)果：

image

圖片原圖是這樣的：

image

可以看到淮韭，通過(guò)添加自定義的 degree 屬性，并調(diào)用 Picasso 的 ratate 方法牲距，最終加載了圖片，也旋轉(zhuǎn)了圖片择同，可以根據(jù)此思路繼續(xù)為 PicassImage 添加更多 Picasso 支持的屬性。

本文里用到的例子也上傳到了 demo 里滥酥，從上午的源碼鏈接里可以獲取到完整的 demo诸尽。

體驗(yàn)一下

還是那句話，講得再多，不如親自上手體驗(yàn)一下酱酬，可以參考《天貓客戶端組件動(dòng)態(tài)化的方案——VirtualView 上手體驗(yàn)》痛阻、《提升開(kāi)發(fā)體驗(yàn)，預(yù)覽 VirtualView》來(lái)體驗(yàn)。