Android端动态化方案

动态布局方案基于 Flexbox：

• Flexbox 为盒状模型提供最大的灵活性，是目前布局系统的首选；
• 跨平台方案，双端统一；
• 查询了一些资料，发现Android 端的 Yoga 库有一些难以解决的问题，最终选择 Google 的 FlexboxLayout 框架来解析，该框架也非常成熟，在和 iOS Yoga 配合中仅需要很少的双端适配。

动态化能力建设中最核心的 4 个部分

 

一、DSL 定义

基于 DSL Native+ 的动态化方案设计首先要解决的一个问题是 DSL 的选择：

1. 基于前端 Flexbox 布局系统进行视图布局；
2. 使用 JSON 或者XML数据交互语言描述视图结构；
3. 使用属性「type」区分视图控件类型。

属性集：布局属性，视图属性，数据属性，交互属性，条件属性，容器属性。

1. 布局属性：决定视图树结构，规划视图布局位置的相关属性.
2. 视图属性：与视图 UI 样式相关的属性，如背景色、透明度、圆角等。
3. 数据属性：表达节点与数据绑定关系的属性，在不同的视图控件中有所区别，具体细节将在下文「数据绑定」中阐述；
4. 交互属性：设置视图节点的点击等事件的属性，主要由 Event 指定。Event事件机制是视图与用户交互的唯一通道，也是与系统底层交互的中心。所有通信和行为都走这条路径。

• 一些常用事件
• open_url    表达式：${open_url:"url"}

二、动态视图管理

1. 基于自定义 DSL 进行编写样式； 2.App 端请求样式服务接口 ; 3. 样式服务接口收到请求后，根据一定的策略进行样式下发； 4.App 端将接收到的样式进行校验后，写入本地样式数据库，以备后续使用。

三、视图构建

客户端为每一个 UI 组件创建专门的解析器。对于每一种样式，使用单独的样式名称 style 来标识，样式文件中引用的每种组件会一一对应到字段 type 表明该样式所使用的控件类型。因此当 App 端获取到样式文件后，通过样式中每个元素的 type，由解析器决定使用哪种原生控件进行承载。
解析器主要承担 2 项职责：

1. 根据 xml 节点的属性配置创建一个本地对应的控件，解析控件绑定的具体数据并设置到控件上；
2. 通过每个节点中的 type 字段，将每一个节点交由对应的组件解析器去解析，解析的结果是输出一个对应的 UI 控件。

由于所有节点已按照树形结构存储，最终输出所有 UI 控件时，按照树形结构进行组织，就可以生成最终的目标视图卡片。

• 每一类型的视图控件，都在 App 端有唯一对应的 ViewModel（样式文件的布局属性 Model 化的产物）和 ViewParser（视图解析器，利用 ViewModel 创建本地 View 并设置属性）
• ViewModel 及 ViewParser 的注册，由自定义注解 @ViewModel("type") 及 @ViewParser("type") 完成，在编译期将通过插件自动收集并插入注册代码；
• 构建视图时，遍历 model 树，通过 model 的 type 字段，获取已注册的 ViewParser，反射构造一个解析器实例，传入 ViewModel，完成单个视图控件的创建；
• 由于使用递归遍历，某个节点的视图控件构建完成后，其父节点必定已构建完成，因此直接将当前视图控件，加入父控件即可。

四、数据绑定

样式文件的主要功能是设置视图显示约束，其中包含了与视图显示属性相关的设置，以及对应显示的内容数据字段。因此在样式解析后，还需要进行显示数据的绑定。
数据绑定过程如下：

1. 调用数据绑定接口，将数据体传入接口；
2. 遍历已构建好的视图树，遍历每一个节点时，将从该节点控件中取出对应的 ViewModel 对象（视图构建时，会作为 tag 与控件绑定），再获取对应的控件解析器；
3. 调用解析器，解析器中将使用数据引用和数据体，共同完成解析，拿到最终的数据（如图片链接 url）；
4. 解析器按照控件自身具体的规则，完成数据设置。