返回

VirtualView Android 实现详解（一）—— 文件格式与模板编译

Android

在之前的文章《猫客 Tangram 页面内组件的动态化方案》里介绍了 Tangram 页面的组件动态化方案，但是有很多细节没有展开讲，鉴于内容比较多，打算建一个系列，分多篇文章介绍。本文介绍编译 XML 模板的过程。

VirtualView 方案： 简单来讲，就是通过自定义 XML 格式，将页面内的组件与功能成数据，然后通过模板编译引擎，将数据编译成高度优化的原生 View。运行时将编译后的原生 View 渲染到页面上，从而实现页面的动态化渲染。

文件格式

VirtualView 中自定义的 XML 格式的文件扩展名是 .vml。VML 文件中有四个必须存在的节点：

  • <?xml version="1.0" encoding="UTF-8"?>：文档头
  • <virtual-view>：根节点，页面中的组件树
  • <templates>：可选节点，定义模板
  • <resources>：可选节点，定义公共资源

页面组件树

<virtual-view>节点包含了页面的组件树。组件树中的每个节点都代表一个组件，组件的属性通过 XML 属性来定义。例如，以下代码定义了一个文本组件：

<text text="Hello World" />

模板

<templates>节点定义了模板。模板是将 VML 节点编译成原生 View 的规则。模板的语法类似于 XML，但有一些自己的扩展。例如，以下代码定义了一个文本模板：

<template name="text">
  <TextView text="{text}" />
</template>

公共资源

<resources>节点定义了公共资源。公共资源可以被模板引用，例如，以下代码定义了一个颜色资源：

<resources>
  <color name="red">#FF0000" />
</resources>

模板编译

模板编译引擎将 VML 文件中的组件树和模板编译成高度优化的原生 View。编译过程分为以下几个步骤：

  1. 解析 VML 文件： 将 VML 文件解析成一个 DOM 树。
  2. 遍历 DOM 树： 遍历 DOM 树，为每个组件生成一个模板实例。
  3. 生成原生 View： 根据模板实例生成原生 View。
  4. 优化原生 View： 对原生 View 进行优化，例如，将多个 View 合并成一个 View。

编译后的原生 View 存储在内存中，以便在运行时渲染到页面上。

总结

VirtualView 的文件格式和模板编译过程是组件动态化方案的核心部分。通过自定义的 XML 格式和模板编译引擎，VirtualView 可以将页面组件的描述编译成高度优化的原生 View，从而实现页面的动态化渲染。