TangramAndroid开发经验谈Android开发

VirtualView Android 实现详解（三）—— 添加

2018-03-21  本文已影响74人  longerian

本系列文章

前文介绍了模板的基本格式、虚拟控件与原生控件混合使用的方式。本文重点在把这两块内容串起来介绍一下，如何实现从模板生成一个运行时的控件，并如何注册一个自定义控件使用。

相关开源库

Android

iOS

名词解释

从 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 里使用一个控件到运行时渲染它，就要经过一系列的转换过程，其中有一半的过程是事先离线执行的，另一半的过程才是在客户端里运行时执行。以下这张图概括了整个流程：

image

说明一下每个步骤：

创建控件实例的过程

以创建一个 PicassoImage 为例（虽然内置了 VImage 和 NImage 两个控件，但在实际业务场景中，还是使用一个自定义的图片控件比较合适，这样可以更好利用起结合图片库的内存管理、性能优化等 feature）。

目标

1. 定义标签名及其 id，属性名及类型

在编译工具里配置文件里定义：

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 重载的方法，它们用于接收不同类型的属性值：

基础 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"
}

运行的结果：

image

图片原图是这样的：

image

可以看到，通过添加自定义的 degree 属性，并调用 Picasso 的 ratate 方法，最终加载了图片，也旋转了图片，可以根据此思路继续为 PicassImage 添加更多 Picasso 支持的属性。

本文里用到的例子也上传到了 demo 里，从上午的源码链接里可以获取到完整的 demo。

体验一下

还是那句话，讲得再多，不如亲自上手体验一下，可以参考《天猫客户端组件动态化的方案——VirtualView 上手体验》、《提升开发体验，预览 VirtualView》来体验。

上一篇下一篇

猜你喜欢

热点阅读