美团 iOS 端开源框架 Graver 在动态化上的探索与实践( 三 ) _框架

文章插图

图9 基于 Yoga 的布局计算线程安全式改造
架构设计
有了上述的思路分析，接下来我们开始着手 Graver 接入 MTFlexbox 的架构设计。Graver 需要作为独立渲染引擎存在，并保留接入多种动态化框架的可能，这是出于架构设计的灵活性和扩展性的考虑。接入层命名为 M-Graver ，其上层基于 MTFlexbox 进行扩展但可灵活插拔，下层基于 Graver 渲染引擎，如下图10所示：

文章插图

图10 M-Graver 架构
M-Graver 是线程安全的，其主要分为解析层、聚合层、布局层和预备层。下面对各层分别做简单的介绍：

解析层：关于输入定义了一个不依赖于上层 DSL 描述语言的标准化虚拟结点树结构；解析层主要进行虚拟结点树到渲染结点树的转换，涉及标签解析、渲染信息解析、统计信息解析以及 Flex 属性解析。
聚合层：完成渲染结点树的最后构造，涉及可见性、交互性等处理；关于事件绑定也是在聚合层完成，每个事件都以行为参数化的形式绑定到相应渲染结点上。
布局层：利用 Yoga 完成每个结点的 Frame 计算以及层级信息处理，同时将渲染信息等内容转换到 Graver 框架可识别的数据。
预备层：进行坐标系转换，并拍平带有视图层级结构信息的渲染结点树，剔除无效渲染结点（如可见性、size 为0等），屏蔽掉由于视图层级原因导致被完全遮挡的渲染结点，最后根据渲染结点生成绘制结点构建绘制结点树，交由 Graver 提供的画板视图进行绘制。

技术难点
按照上述思路分析完成架构设计，但在实施部署的过程中也遇到了不少的技术难点和问题。如：动态布局框架 MTFlexbox 创建至今已两年有余，因业务的快速发展而产生了一些技术“负债” 。为了保证不影响线上原有的业务逻辑，所以在进行 MTFlexbox 的模板树到虚拟结点树，再到 UI 视图树的技术升级改造过程时，尤其需要关注各种“蛛丝马迹”式的细微逻辑。
另外，在将异步渲染引擎 Graver 接入 MTFlexbox 的过程中也遇到了诸多问题，包括如何构建基于位图的事件处理系统，跨渲染引擎的技术融合，一些极端场景下的绘制效率瓶颈等等。下面将逐一展开阐述。
1. 如何基于位图进行事件处理
由于视图最终通过渲染位图来呈现，这就需要建立基于位图的事件处理系统。如前文所述，渲染结点树记录了每个控件的位置、大小信息以及层级结构，基于此可仿照系统事件处理逻辑进行基于位图的事件处理系统设计。
在视图展示期间，画板视图收到事件响应通知后（如点击了画板视图中标号为5的红色按钮），根据位图对应的渲染结点树存储的各控件布局、层级和渲染信息，逐层遍历找到需要响应的渲染结点，如果涉及信息修改则变更其在渲染结点树中的渲染信息，触发再次渲染的同时执行该渲染结点绑定的事件方法。遍历渲染结点树的输入是系统基于画板视图返回的点击位置，其遍历过程与系统 UI 事件查找过程比较相似。事件处理过程如下图11所示：

文章插图

图11
2. 系统 UI 控件与绘制元素的融合问题
从美团业务特征出发，图文组合占据多数 UI 场景。然而也存在诸如动效等无法依托 Graver 进行图文渲染的情况。因此，需要考虑跨渲染引擎的渲染融合问题。在 M-Graver 的预备层遍历渲染结点树时，可以根据当前结点是否为原生结点决议树拆分，如果是原生结点，将该结点连同其子树“直系”绘制结点从渲染结点树中拆分下来，以该结点为根结点的子渲染结点树，生成对应的绘制结点树，多个子渲染结点树的根结点，构成了以画板视图为单元的画板视图树。如下图12所示：