登录
当前位置： 首页 > 工具软件 > Virtualview-Android > 使用案例 >

Android Virtualview：淘宝、天猫 又一个动态化、高性能的UI框架力作

陶征
2023-12-01

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BhuAMnIh-1636293637117)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e362d4a05?imageView2/0/w/1280/h/960/ignore-error/1)]

3. 实现原理

3.1 核心思路

根据Tangram v1.0中 出现的问题：UI组件无法动态更新 & 加载性能低，VirtualView的具体解决方案如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8UPf22q-1636293637157)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e38d9afa3?imageView2/0/w/1280/h/960/ignore-error/1)]

3.2 实现方案

  • 根据其原理，VirtualView的实现方案是：虚拟化开发
  • 虚拟化开发的本质：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YNuxmpBD-1636293637158)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e3a9e3fb1?imageView2/0/w/1280/h/960/ignore-error/1)]

之所以称为虚拟化，是因为Canvas绘制的视图不存在一一对应的实体View

3.3 总结

从上可知，VirtualView的创新在于：

  1. 通过 XML 模板实现组件的动态性
  2. 通过 虚拟化技术（本质 = Canvas）开发组件，提升了组件的渲染性能

4. 工作流程

  • 在了解了VirtualView的本质原理 & 整体架构后
  • 下面，我将开始讲解VirtualView的工作流程

4.1 流程概述

  • 根据上述方案，VirtualView的工作流程分为3大部分：创建UI组件、创建界面模板 & 客户端加载界面
  • 具体如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ww9LlCKH-1636293637159)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e3a790a91?imageView2/0/w/1280/h/960/ignore-error/1)]

4.2 流程详细分析

下面我将对每个流程的原理 & 过程详细分析

流程1：创建UI组件

  • 具体描述 根据业务需求，创建所需要的UI组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ijZ3n4t-1636293637160)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e3c3ba078?imageView2/0/w/1280/h/960/ignore-error/1)]

有2种创建方式：使用框架内置（封装好）的UI组件 / 自定义

1.1 使用框架内置（封装好）的UI组件

  • 即 可直接使用封装好的UI组件而不需自身创建
  • 具体如下（含组件基础属性）

注： a. 自定义组件应继承基础组件 b. 系统封装UI组件的原理 同 “自定义UI组件，下面将具体讲解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSgrIFyG-1636293637161)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e622e4a99?imageView2/0/w/1280/h/960/ignore-error/1)]

###1.2 自定义UI组件 若框架内置的UI组件无法满足需求，则开发者可自定义UI组件

  • 自定义流程 VirtualView抽象 & 封装了 Canvas绘制视图的流程，使得开发者只需按指定的接口协议实现1个组件的绘制逻辑：测量、绘制 & 绘制，即能实现在宿主容器通过 Canvas 直接绘制 UI内容，从而创建虚拟化组件

即 上述则是虚拟化创建组件的过程

  • 具体过程
  1. 实现基础组件需遵循一个接口的规范：定义了渲染过程中所需的3个流程：测量尺寸阶段、布局阶段 & 绘制阶段

a. 定义这3个阶段是为了符合Android系统的使用，即View绘制的三大流程：measure过程、layout过程、draw过程。若不了解，请看文章 （2）自定义View Measure过程 - 最易懂的自定义View原理系列 （3）自定义View Layout过程 - 最易懂的自定义View原理系列 （4）自定义View Draw过程- 最易懂的自定义View原理系列 b. 在 iOS 平台下也需按照本方案的规范去处理

  1. 这3个过程具体如下：（与Android View绘制的三大流程相似）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaSySCRz-1636293637161)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e62883774?imageView2/0/w/1280/h/960/ignore-error/1)]

不论是虚拟 / 原生组件，都采用上述模型 & 流程定义 a. 对于虚拟组件：在这些接口里实现相关逻辑 / 通过封装原生组件实现 b. 对于原生组件：在这些接口的实现里 调用原生组件的对应逻辑 结论：可混合使用虚拟控件 & 实体控件

至此，对于宿主的布局容器来说，包装在内部的组件不分虚拟化 / 原生，暴露在外的接口相同，只要将宿主容器像普通的 View 一样添加到的视图界面上，就可在后续的渲染过程中显示出来。

  • 特别注意 此处即可解释 为何渲染性能高：因虚拟组件使用得越多，View个数就越少，即层级越扁平

如下所示的组件： a. 普通的原生开发：2层（宿主容器层 + 图片组件层） b. 虚拟化开发：采用虚拟化开发后，最终呈现的 View层级只有一个宿主容器（实际上，图片组件被绘制在Canvas里了）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8uQAdEif-1636293637162)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e667aec4e?imageView2/0/w/1280/h/960/ignore-error/1)]

1.3 总结

创建UI组件有2种方式：

  1. 直接使用框架内置的UI组件
  2. 自定义组件：通过封装好的Canvas流程，按照指定接口协议实现绘制逻辑 / 封装原生组件

流程2：创建界面模板 & 下发

  • 该步骤包括多个步骤：创建XML界面模板、编译成二进制数据、下发等
  • 具体如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q0vZPzLK-1636293637163)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e781f2e75?imageView2/0/w/1280/h/960/ignore-error/1)]

2.1 创建XML界面模板

  • 具体描述 根据业务需求，使用XML编写模板

注：需使用专门的工具virtualview_tools编写，其 使用说明见文章virtualview_tools使用指南

  • 此方式类似：Android 平台上通过 XML 搭建界面的方式
  • 区别在于：
  1. 脱离了平台限制，即一套模板可同时在Android、iOS上使用
  2. 运行时动态加载 XML 模板数据，动态更新界面结构

// 引用的组件通过流程1中获取
// 动态数据通过表达式从 JSON 数据里获取

<?xml version="1.0" encoding="utf-8"?>




// JSON数据
{
“style”: {
“text-align”: “h_center”,
“font-size”: “20”,
“color”: “#FF5000”
},
“title”: “超高性 99.9% 的用户觉得很快”,
“logoUrl”: “https://gw.alicdn.com/tfs/TB1yGIdkb_I8KJjy1XaXXbsxpXa-72-72.png”
}

2.2 编译成二进制数据

2.2.1 具体描述

使用专门的工具virtualview_tools将编写好的XML界面模板编译成二进制数据，编译后的文件的后缀名是.out

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KM5O3zFl-1636293637163)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e77440d0f?imageView2/0/w/1280/h/960/ignore-error/1)]

使用说明见文章virtualview_tools使用指南

注：为什么通过 XML 编写的业务组件 不直接在客户端里运行使用，而是先进行一次二进制序列化操作？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDcbmJTW-1636293637164)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e85ac1b64?imageView2/0/w/1280/h/960/ignore-error/1)]

2.2.2 二进制文件描述

借鉴了 Android 系统编译模板文件的思路，格式 & 描述具体如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-huvJiNRW-1636293637165)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e8816f883?imageView2/0/w/1280/h/960/ignore-error/1)]

2.2.2 编译流程

  • 一个业务组件对应着一份 XML 模板 = 单独编译成二进制数据

编译数据 含除内置字符串资源外 它依赖的所有字符串、表达式资源

  • 编译规则 编译时，模板里涉及的资源包括颜色值、各种枚举、基础组件的类型等都会被序列化映射成整数；不能序列化成整数的资源如字符串，就分配一个索引 Id 指向它 & 将它们单独存储到一块区域里
  1. 原因：当模板在线发布、字符串有变动的情况下，能够不影响原来的字符串资源索引；否则若按照带有顺序约定的协议来分配资源索引，很容易在模板变更时 同一索引值在变更前后指向的资源内容是不一样，影响稳定性和动态性
  2. 序列化的规则如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1kgjMR54-1636293637165)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e8f61d85a?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 编译流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jR5kbtkc-1636293637166)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e9b28e415?imageView2/0/w/1280/h/960/ignore-error/1)]

2.3 模板数据 下发到客户端

即 客户端获取编译后的二进制数据

获取有2种路径:

  1. 直接将编译后的模板打包到客户端里，开发者通过代码加载
  2. 框架先发布到模板管理后台，客户端在线更新到模板数据（即实现了动态更新）

流程3：客户端加载界面

  • 客户端获取到编译后的界面模板后，进行加载 & 解析，最终渲染出视图界面
  • 步骤流程如下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZFA1WD1v-1636293637166)(https://user-gold-cdn.xitu.io/2018/2/24/161c547eb1e0f7a9?imageView2/0/w/1280/h/960/ignore-error/1)]

3.1 解析模板数据

  • 具体描述 客户端获得编译后的模板数据（二进制数据）后，立即 进行解析
  1. 如校验版本号，合法性，读取头信息等
  2. 客户端渲染组件 从解析 编译后的模板数据开始
  • 流程解析 解析过程 = 二进制编译的逆过程

但解析流程只负责提取原始数据 & 组织格式，并无构建出组件对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSYaakG7-1636293637167)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e9e35786f?imageView2/0/w/1280/h/960/ignore-error/1)]

3.2 加载组件视图

  • 具体描述 当用户传入一个模板名称，框架内部就会根据名称去之前解析XML界面模板的数据里找到 与此名称匹配的模板数据，然后加载 & 创建出真正的组件

  • 流程解析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oHOp8gxU-1636293637167)(https://user-gold-cdn.xitu.io/2018/2/24/161c547eb4f0b63f?imageView2/0/w/1280/h/960/ignore-error/1)]

3.3 绑定业务数据

  • 具体描述 开发者在组件属性里可通过 表达式 指定使用哪个数据字段，即将业务数据绑定到组件上

因业务数据是动态的，故从模板创建的组件不含业务数据

  • 流程解析 在创建组件的过程中，当解析属性碰到表达式时，会将该属性的key、表达式值、所属的基础组件等关系存储起来，等真实数据到达后再通过 表达式里的定义 访问数据 & 将真实值设置给组件的属性，即将真实的数据绑定到基础组件的属性上
  1. 通过表达式解析、访问得到的属性值，会缓存起来，当原始数据引用不变时，每次访问都会获取到缓存值
  2. 此处接收的数据是 JSON 格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xVrYBheD-1636293637168)(https://user-gold-cdn.xitu.io/2018/2/24/161c547ebe073f01?imageView2/0/w/1280/h/960/ignore-error/1)]

4.3 总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XaauJPJ0-1636293637168)(https://user-gold-cdn.xitu.io/2018/2/24/161c547ec5c9849a?imageView2/0/w/1280/h/960/ignore-error/1)]

5. 整体架构设计

  • 根据上述方案 & 工作流程，VirtualView的整体框架分为2部分：核心功能模块（5个模块） + 配套工具 & 服务。具体如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-voCHWzph-1636293637168)(https://user-gold-cdn.xitu.io/2018/2/24/161c547ec7d29af3?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 下面，我将对每部分进行详细分析

模块1：加载模块

  • 示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aFoExRnY-1636293637169)(https://user-gold-cdn.xitu.io/2018/2/24/161c547ee3701f85?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwM9XPk5-1636293637169)(https://user-gold-cdn.xitu.io/2018/2/24/161c547eec506745?imageView2/0/w/1280/h/960/ignore-error/1)]

模块2：构造模块

  • 示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kpgAvpyi-1636293637170)(https://user-gold-cdn.xitu.io/2018/2/24/161c547ef5002df5?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e2PHCAJg-1636293637170)(https://user-gold-cdn.xitu.io/2018/2/24/161c547ef596cca8?imageView2/0/w/1280/h/960/ignore-error/1)]

此处详细分析 基础组件模型 & 虚拟组件

a. 基础组件模型

含基础组件 & 基础属性，具体如下

注：自定义的基础组件应继承基础定义 & 扩展

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gtzsty22-1636293637171)(https://user-gold-cdn.xitu.io/2018/2/24/161c547e622e4a99?imageView2/0/w/1280/h/960/ignore-error/1)]

模块3：辅助模块

  • 示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bfktgFw9-1636293637171)(https://user-gold-cdn.xitu.io/2018/2/24/161c547f1f689914?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F59ODEJS-1636293637172)(https://user-gold-cdn.xitu.io/2018/2/24/161c547f2cff9dec?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 特别注意：引入用户数据绑定的表达式的原因 开发业务组件时，基础属性 / 样式不能在模板里直接写死，而是需从数据里动态获取

/**

  • 访问数据属性的表达式
  • 语法说明
  •   a. 以 “${” 开头、以 “}” 结束

  •   b. 对于Map，通过“.”操作符访问

  •   c. 对于 Array  /  List，通过 “[]” 操作符访问
  • 示例如下
    */

${benefitImgUrl}；
${data[0].benefitImgUrl}；

/**

  • 条件表达式
  • 作用：根据数据中某个字段 来设置值的属性
  • 语法说明
  •   a. 以 “@{” 开头、以 “}” 结束，

  •   b. 中间部分 = 表达式的具体内容：  条件表达式 ? 结果表达式[1] : 结果表达式[2]

  •       注：1. 当条件表达式成立的时，使用结果表达式[1]，否则使用结果表达式[2]

  •          2. 条件表达式支持布尔类型、字符串类型、JSONObject、JSONArray

  •   c. 对于 Array  /  List，通过 “[]” 操作符访问
  • 示例如下
    */
    @{${logoUrl} ? visible : invisible };

模块4：管理模块

  • 示意图

![示意图](https://user-gold-cdn.xitu.io/2018/2/2

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

浏览器打开：qq.cn.hn/FTe 免费领取

4/161c547f2defb2a6?imageView2/0/w/1280/h/960/ignore-error/1)

  • 说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HmugEM2g-1636293637172)(https://user-gold-cdn.xitu.io/2018/2/24/161c547f4cfec89e?imageView2/0/w/1280/h/960/ignore-error/1)]

模块5：更新模块

  • 示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6zWXe1B-1636293637172)(https://user-gold-cdn.xitu.io/2018/2/24/161c547f4cee88da?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BrXSF68K-1636293637173)(https://user-gold-cdn.xitu.io/2018/2/24/161c547f53e2701b?imageView2/0/w/1280/h/960/ignore-error/1)]

配套使用的工具 & 服务

  • 示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WwPFuEbw-1636293637173)(https://user-gold-cdn.xitu.io/2018/2/24/161c547f5726ecbe?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2sbnNmy-1636293637174)(https://user-gold-cdn.xitu.io/2018/2/24/161c547f7852fa97?imageView2/0/w/1280/h/960/ignore-error/1)]

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8mjiXTD-1636293637174)(https://user-gold-cdn.xitu.io/2018/2/24/161c547f7e1f7623?imageView2/0/w/1280/h/960/ignore-error/1)]

6. 使用教程

  • 根据上述工作流程，其使用流程同样分为3步：创建UI组件、创建界面模板 & 客户端加载界面
  • 下面，我将根据上述3个步骤进行详细解析

6.1 创建UI组件

从一文可知，创建UI组件有2种方式：

  1. 直接使用框架内置的UI组件
  2. 自定义组件：通过封装好的Canvas流程，按照指定接口协议实现绘制逻辑 / 封装原生组件

此处为方便讲解，直接使用框架内置的UI组件

6.2 创建界面模板

此步骤包括：创建XML界面模板、编译成二进制数据、模板下发

6.2.1 创建XML界面模板

根据业务需求，使用XML编写模板

注：需使用专门的工具virtualview_tools编写，其 使用说明见文章virtualview_tools使用指南

  • 示例布局

/**

  • 使用说明：
  • 1. 控件引用：通过XML引用控件为方便讲解，XML内引用的VHLayout、NImage、NText 都是框架内置的控件：2个横向线性布局；每个布局 = 1个图 + 1个文本

从一文可知，创建UI组件有2种方式：

  1. 直接使用框架内置的UI组件
  2. 自定义组件：通过封装好的Canvas流程，按照指定接口协议实现绘制逻辑 / 封装原生组件

此处为方便讲解，直接使用框架内置的UI组件

6.2 创建界面模板

此步骤包括：创建XML界面模板、编译成二进制数据、模板下发

6.2.1 创建XML界面模板

根据业务需求，使用XML编写模板

注：需使用专门的工具virtualview_tools编写，其 使用说明见文章virtualview_tools使用指南

  • 示例布局

/**

  • 使用说明：
  • 1. 控件引用：通过XML引用控件为方便讲解，XML内引用的VHLayout、NImage、NText 都是框架内置的控件：2个横向线性布局；每个布局 = 1个图 + 1个文本
 类似资料：

相关阅读

如何动态创建猫鼬架构？javascript淘宝主图放大镜功能jQuery模拟淘宝购物车功能js仿淘宝评价评分功能C#高性能动态获取对象属性值的步骤

相关文章

淘天一面淘天笔试&淘天测开一面淘天前端二面 天猫国际 面经淘天一面 4.01淘天 NLP 一面

相关问答

在arraylist中移动一个又一个元素熊猫：重塑数据框架使用C11的“自动”能提高性能吗？REST框架的性能（Java vs PHP vs其他）图书馆？静电？动态？还是框架？另一个项目内的项目

相关文档

Uragano 高性能 RPC 框架中文文档淘宝无线开放 API淘宝网 Tengine / Nginx 教程文档下一代 Web 框架 Koaphp-ext-xlswriter 高性能 Excel 扩展
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.