VirtualView Android 實(shí)現(xiàn)詳解（三）—— 添加一個(gè)自定義控件

本系列文章

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

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

Android

iOS

名詞解釋

從 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è)步驟：

  • 先編寫 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ù)寫幾個(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)閷懥吮磉_(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 里這么寫：

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 溫和。溫和。溫和。 目錄【怎么洗】1.RoX - 給干性及所有皮膚的清潔建議2.RoX - 臉是怎么爛掉的3.針線...
    易烊千璽的老公閱讀 1,063評(píng)論 0贊 0
  • 一.什么是積極主動(dòng)？ 每一個(gè)人都應(yīng)該積極地創(chuàng)造有利于自己發(fā)展的外部環(huán)境，并通過(guò)自我意識(shí)（理性我）來(lái)主動(dòng)做出選擇，對(duì)...
    許楷模閱讀 237評(píng)論 1贊 2
  • 2017年12月16日下午，在正安聚友會(huì)蘇州分會(huì)譚會(huì)長(zhǎng)的組織下，有緣樁友滙集恕閣，由張石山老師帶領(lǐng)，學(xué)習(xí)交流了形意...
    如心1976閱讀 526評(píng)論 2贊 4
  • 清晨起，睜著迷迷糊糊的眼睛，爬起床來(lái)，揣著手就悠悠的去上早讀了。 走出宿舍大門，“呼”一陣?yán)溧侧驳娘L(fēng)吹來(lái)，脖子縮的...
    卷腹小豬豬閱讀 372評(píng)論 0贊 1
  • 故地重游 作者：一抹詩(shī)痕小窗楓雨煙波色，往事經(jīng)年入紙堆。日暮寒秋身寄客，風(fēng)霜草木歲痕摧。重游故地秋時(shí)景，落葉傷懷憶...
    隨意詩(shī)社閱讀 1,639評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容