UI2CODE智能生成代码——组件识别篇

在组件识别这个环节，需要有一种处理布局信息的方法，来解析和计算控件间的布局关系（比如识别业务组件（BI组件）和查找重复布局），以此来提高最终代码的可用性。

在这篇文章，我们将介绍一种布局信息的结构化方法： “连线法” ，以及一种布局间的计算和比较方法： “引导连线法” 。

首先来看我们需要解决的问题。

业务组件是指某些特定的卡片，比如一个商品详情卡片，这些卡片会在不同页面出现，而这些卡片的代码一般是已经存在的。我们在拿到一张图片的时候，需要先识别出这些组件，这样这一区块就能复用已有的组件代码，而不会造成很多冗余的一次性代码。

0 2  老解法：利用SDD模型做物体检测

如果把寻找业务组件这个问题看成从一张大图片上寻找小图片的话，那么最直接的做法就是用一个物体检测模型（比如SSD）来做，这样只要训练模型来识别每个业务组件的图片就可以了。因此我们尝试了用训练SSD模型来解决这个问题。

0 3  存在的问题：训练困难，结果不可控

经过训练和测试以后，我们发现用物体检测模型来解这个问题的弊端：

1. 需要造大量样本。由于图片信息丰富，为了避免过拟合，需要造大量样本来训练。

2. 训练困难，增加新的业务组件成本太高。每增加一个新的业务组件，就需要先造这个组件的样本，然后重新调整训练模型。

3. 训练结果不可控。对于一些badcase，没有一些直接有效的方式来做调整和控制，只能不断调整样本。

0 4  思考：是否可以利用已有的控件信息

既然前面已经解析出了各个控件的信息（包含类型以及位置等），那么我们是否可以直接利用这些信息来做处理呢？因此我们想要寻找一种新的方式，来处理和解析控件信息，利用这些信息来实现类似“物体检测”功能。

如上图这个case，对于类似“GridView”的这种布局，我们理想的布局方式应该是有8个Item，每个Item包含一个TextView和ImageView（上图左边）。

0 2  存在的问题：无法识别重复布局

然而实际情况是，我们没有做重复布局的检测，因此布局的时候变成了4行（上图右边）。

0 3  思考：如何比较布局是否重复

为了解决上面的问题，我们就需要寻找一种方法，从多个控件信息中，找到一些规律，自动找到这些具有相似情况的布局。

1. 都是由多个控件组成大的布局

2. 布局间需要进行比较，寻找“相似布局”

3. 都是非结构化数据：无法直接比较、计算

因此，我们的问题解决思路也就分为两步：

1. 布局信息结构化：将布局信息处理成结构化的数据

2. 布局比较：对布局进行比较、计算，寻找相似布局

布局信息结构化

为了分析控件间的关系，我们可以先从简单的开始，看一下两个控件之间的关系都包含哪些信息。

01 控件间的关系

两个控件间的关系，包含以下2个方面的信息：

1. 控件属性（类型、文本内容、位置、大小）

2. 方向、距离、对齐方式（用连线表达）

控件属性

对于控件属性，可以直接用它自身表示，包含控件类型、内容、位置、大小等

方向和距离

对于两个控件的方向和距离，我们可以用一条虚拟的“连线”来表示，这条连线连接两个控件的中心点。这样，这条连线的长度和角度就可以表示两个控件的方向和距离。比如上图，我们可以得到：一个TextView在一个ImageView正上方，距离xxx像素。

对齐方式

但是除了角度和方向，实际上还存在着一个 “对齐方式” 信息。

比如上图这个case，如果我们还是连接两个控件的中心点的话（图中蓝色虚线），那这左右两边的图就是指不同的布局（因为两个控件的角度和距离都不一样）。

但是由我们人“肉眼”来看，我们会认为这两个布局是一样的，都是左边一个头像，右边上面跟着一个文本。

因此，我们需要连接TextView的“左边中点”（图上红色实线），这样，不同的连接点位置，就可以表达不同的对齐方式。左对齐的TextView连接左边中点，右对齐的TextView连接右边中点，居中的连接中心点。

0 2  定义数据结构

有了上面的分析，我们就可以定义一个数据结构。我们用一个Connection对象表达2个控件间的布局关系，它包含：

1. 控件1属性（类型、位置大小等）

2. 控件2属性（类型、位置大小等）

3. 控件1和控件2间的多条连线（角度、距离）

这样，2个Connection之间就可以进行比较、判断是否“匹配”

0 3  Connection匹配计算

两个Connection之间是否“匹配”，必须满足：

1. 控件信息匹配（类型一致、ImageView面积相似度满足要求等）

2. 方向和距离匹配（连线的余弦相似度）

3. 其它自定义的匹配要求

0 4  整个布局的表示

两个控件间的关系可以用一个Connection来表示，那么多个控件组成的大布局，就可以用一组Connection来表示。

我们对每两个控件建立一个Connection，就可以得到一个Connection数组

这样，我们的第一步“布局信息结构化”就完成了。

布局间比较

将布局信息转换成Connection数组以后，我们就可以开始利用这些信息来查找相似布局。

首先，我们可以理解这样一个概念，就是：

一个布局，可以看成由一组Connection对象串联起来，得到的一个“路径”

如上图，蓝色圈内的布局可以看成一组Connection串联起来（红色连线）。

那么，寻找相似布局，就是寻找两条相似“路径”的过程

0 1  引导连线法

为了寻找相似路径，我们定义了一个“引导连线法”。

所谓“引导连线法”，就是一个 Leader，一个 Follower，Follower 尝试着跟随 Leader 走出一条一样的路径。

步骤如下：

1. 计算出所有相互匹配的Connection（如下图所有绿色的连线）

2. 定义一个“Leader”叫A，一个 “Follower” 叫B

3. 随机选择一条绿色连线作为A的初始路径，与其相匹配的另一条绿色连线作为B的初始路径

4. A尝试着继续往前走，找到下一个路径（绿色连线），B尝试着跟随

5. 如果B能跟的上（即找到了一条路径，刚好与A想走的路径匹配上），那么A继续往下走，如果B跟不上，那么A换条路径继续尝试。

6. 直到A走的路径B怎么也跟不上时，A和B走过的路径所对应的那些控件，就是拥有相似布局的控件。

1. 对业务组件进行结构化处理（图左红色连线）

2. 对待处理图片进行结构化处理

3. 找到他们之间可以“匹配”的Connection（图右绿色部分）

4. 用“引导连线法”找到相似的布局

效果

应用这套算法以后，扩展要识别的组件变得非常简单，只要把新组件的的结构化数据预先计算好存储起来，在查找的时候应用”引导连线法“即可。

查找重复布局步骤如下：

1. 计算自身所有控件的Connection

2. 寻找自身Connection中，互相匹配的 Connection

3. “引导连线”法寻找匹配的布局“pair”

4. 多个“pair”串联组成一个重复布局

5. 继续尝试对重复布局的每个Item做拆分，可得到“GridView”

这样，最终我们就可以找到，图上有8个布局相似的Item。

效果

应用这套算法，可以查找出页面上任意的重复布局，无论是简单的还是复杂的，极大得提升了代码的可用性。