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);
}

剩下的主要逻辑是处理自定义属性,有几个 setAttributesetRPAttribute 重载的方法,它们用于接收不同类型的属性值:

基础 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》来体验。

上一篇下一篇

猜你喜欢

热点阅读