VirtualView Android 實現詳解（三）—— 添加一個自定義控件

本系列文章

前文介紹了模板的基本格式、虛擬控件與原生控件混合使用的方式。本文重點在把這兩塊內容串起來介紹一下，如何實現從模板生成一個運行時的控件，並如何註冊一個自定義控件使用。

名詞解釋

VirtualView：如果還不清楚，可以閱讀《天貓客戶端組件動態化的方案——VirtualView 上手體驗》大概瞭解下；
控件：基礎的 UI 單元，像文本、圖片、佈局等，通過在 XML 裏被引用然後描述一個複雜的界面。

從 XML 到運行時實例

舉個簡單的例子，在 XML 模板裏，可能會有這麼一塊控件的使用：

<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 表示引用一個文本控件（VirtualView 內置支持的所有控件見文檔），在《VirtualView Android實現詳解（一）—— 文件格式與模板編譯》裏曾講過會將 XML 裏的字符串等編譯成整型數值或者索引來降低解析成本。因此從在 XML 裏使用一個控件到運行時渲染它，就要經過一系列的轉換過程，其中有一半的過程是事先離線執行的，另一半的過程纔是在客戶端裏運行時執行。以下這張圖概括了整個流程：

說明一下每個步驟：

先編寫 XML 文件，如圖所示引用了一個 NText 控件；
在 Config 文件裏配置 NText 的標籤名及屬性的映射關係；像這種內置控件都已經配置好了，如果是自定義屬性和控件，纔要操作自己添加配置；配置文件含義參考這篇文章：VirtualView 工具大更新啦。在這個示例中，NText 標籤被編譯工具編譯成數字 7，屬性名 id、text、textSize、textColor 都被編譯成一個 hashcode 索引，真正的字符串值會存儲到字符串資源區；屬性值 title 也是被編譯成一個 hashcode 索引，真正的字符串值會存儲到字符串資源區；屬性值 12 被直接編譯成數字 12；屬性值 #333333 被編譯成顏色值 -13421773；
編譯工具根據 XML 文件和 Config 文件編譯出一份二進制文件，交給客戶端使用；
客戶端初始化框架的時候會根據 id 註冊控件，在這個示例中 7 代表了 NativeText 類控件，它就用來實例化 XML 裏的 NText 標籤；
最後將 XML 裏 NText 下的屬性傳給 NativeText 實例進一步用於渲染；

創建控件實例的過程

以創建一個 PicassoImage 爲例（雖然內置了 VImage 和 NImage 兩個控件，但在實際業務場景中，還是使用一個自定義的圖片控件比較合適，這樣可以更好利用起結合圖片庫的內存管理、性能優化等 feature）。

目標

實現一個原生 Image 控件，使用 Picasso 加載圖片
支持綁定 url 屬性用來加載網絡圖片
支持綁定 degree 屬性用來旋轉圖片

1. 定義標籤名及其 id，屬性名及類型

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

VIEW_ID_PicassoImage=1014，其中 PicassoImage 就是 XML 裏的標籤名，id 值爲 1014，這個是自定義的，建議從 1001開始，前 1000 保留給系統使用；
degree=Float，表示屬性名是 degree ，屬性值按 Float 類型編譯解析；
url=String，表示屬性名是 url，屬性值按 String 類型編譯，不過未在配置文件裏聲明的屬性都是按 String 類型編譯的，所以可以省略；

2. 定義控件的載體 View

取名 PicassoImageView，繼承 ImageView，實現 IView 接口，因爲 demo 比較簡單，除此之外不做其他邏輯，主要實現 IView 的接口調用對應的系統 measure、layout 方法，因爲這些方法是不能在外部調用的，只能通過 IView 的接口封裝一下暴露出去。

詳細代碼：PicassoImageView.java

3. 定義控件 model

取名 PicassoImage，繼承 ViewBase，在構造函數裏實例化 PicassoImageView，並獲取自定義屬性的 id；

public PicassoImage(VafContext context,
        ViewCache viewCache) {
        super(context, viewCache);
        mPicassoImageView = new PicassoImageView(context.getContext());
        StringSupport mStringSupport = context.getStringLoader();
        // 這裏會取加載的模板數據裏取獲取對應的 id，第一個參數是屬性名，第二個參數應當爲 false；
        urlId = mStringSupport.getStringId("url", false);
        degreeId = mStringSupport.getStringId("degree", false);
    }

由於 ViewBase 本身也是實現 IView 接口的，所以複寫幾個 IView 的 measure、layout 接口，去調用對應的 PicassoImageView 裏的接口。在 VirtualView 體系內部，都是通過 ViewBase 對象來驅動佈局計算的，因此必須通過 IView 接口調用系統 View 真正的計算接口。

@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);
    //這一步很關鍵，否則 view 不顯示。
    mPicassoImageView.comLayout(l, t, r, b);
}

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

boolean setAttribute(int key, int value) 處理編譯成整數類型的屬性；
boolean setAttribute(int key, float value) 處理編譯成浮點數類型的屬性；
boolean setAttribute(int key, String stringValue) 處理編譯成字符串類型的屬性，包括那些本該編譯成整數或者浮點數但因爲寫了表達式被編譯成字符串類型的；
boolean setRPAttribute(int key, int value) 處理編譯成整數類型的尺寸屬性，單位是 rp(介紹在此)；
boolean setRPAttribute(int key, float value) 處理編譯成浮點數類型的尺寸屬性，單位是 rp；

基礎 ViewBase 裏解析處理了大量基礎屬性，所以自定義控件只要處理新增的自定義屬性就行了。以上這些重載方法都有一個 Boolean 返回值，它遵循冒泡邏輯，當你返回 true 的時候，當前層級處理了這個屬性，否則表示當前層級處理不了這個屬性，需要進一步交給子類解析；在本文的示例裏，是這麼處理的：

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

@Override
protected boolean setAttribute(int key, String stringValue) {
    boolean ret = true;
    if (key == degreeId) {
        //從模板裏直接獲取到旋轉角度屬性值是一個表達式，暫存到 viewCache 裏，等傳入數據的時候再次解析，然後回調到上述 setAttribute(int key, float value) 方法裏獲取最終值
        if (Utils.isEL(stringValue)) {
            mViewCache.put(this, degreeId, stringValue, Item.TYPE_FLOAT);
        }
    } else if (key == urlId) {
        //從模板裏直接獲取到url屬性值可能是一個表達式，也可能是個直接的 url，如果是表達式，暫存到 viewCache 裏，等傳入數據的時候再次解析，然後回調本方法裏獲取最終值
        if (Utils.isEL(stringValue)) {
            mViewCache.put(this, urlId, stringValue, Item.TYPE_STRING);
        } else {
            url = stringValue;
        }
    } else {
        ret = super.setAttribute(key, stringValue);
    }
    return ret;
}

最後就是使用這些屬性值，在 onParseValueFinised() 裏一次性應用屬性：

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

詳細代碼：PicassoImage.java

4. 註冊控件

通過 ViewManager 裏的 ViewFactory 註冊，如下：

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

5. 使用與運行效果

XML 裏這麼寫：

<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>

綁定的數據：

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

運行的結果：

圖片原圖是這樣的：

可以看到，通過添加自定義的 degree 屬性，並調用 Picasso 的 ratate 方法，最終加載了圖片，也旋轉了圖片，可以根據此思路繼續爲 PicassImage 添加更多 Picasso 支持的屬性。

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

體驗一下

還是那句話，講得再多，不如親自上手體驗一下，可以參考《天貓客戶端組件動態化的方案——VirtualView 上手體驗》、《提升開發體驗，預覽 VirtualView》來體驗。

VirtualView Android 實現詳解（三）—— 添加一個自定義控件

本系列文章

相關開源庫

名詞解釋

從 XML 到運行時實例

創建控件實例的過程

體驗一下

Android Dex分包原理、方案和加解密

Android打包apk原理與流程

Java分佈式跟蹤系統Zipkin

Android WebSocket的使用

高等數據加密——非對稱加密算法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結