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

本文链接：https://blog.csdn.net/m0_63737792/article/details/121198144

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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的创新在于：

通过 XML 模板实现组件的动态性
通过 虚拟化技术（本质 = 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组件