1.背景

在《UI2CODE——整體設計篇》中，我們介紹了UI2CODE工程的整體流程：

在組件識別這個環節，需要有一種處理布局信息的方法，來解析和計算控件間的布局關系（比如識別業務組件（BI組件）和查找重復布局），以此來提高最終代碼的可用性。

在這篇文章，我們將介紹一種布局信息的結構化方法：“連線法”，以及一種布局間的計算和比較方法： “引導連線法”。

首先來看我們需要解決的問題：

2.問題一：識別業務組件

目的：代碼復用

業務組件是指某些特定的卡片，比如一個商品詳情卡片，這些卡片會在不同頁面出現，而這些卡片的代碼一般是已經存在的。我們在拿到一張圖片的時候，需要先識別出這些組件，這樣這一區塊就能復用已有的組件代碼，而不會造成很多冗余的一次性代碼。

老解法：利用深度學習模型SSD做物體檢測

如果把尋找業務組件這個問題看成從一張大圖片上尋找小圖片的話，那么最直接的做法就是用一個物體檢測模型（比如SSD）來做，這樣只要訓練模型來識別每個業務組件的圖片就可以了。因此我們嘗試了用訓練SSD模型來解決這個問題。

存在的問題：訓練困難，訓練結果不可控

經過訓練和測試以后，我們發現用物體檢測模型來解這個問題的弊端：

需要造大量樣本。由于圖片信息豐富，為了避免過擬合，需要造大量樣本來訓練。

訓練困難，增加新的業務組件成本太高。每增加一個新的業務組件，就需要先造這個組件的樣本，然后重新調整訓練模型。

訓練結果不可控。對于一些badcase，沒有一些直接有效的方式來做調整和控制，只能不斷調整樣本。

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

既然前面已經解析出了各個控件的信息（包含類型以及位置等），那么我們是否可以直接利用這些信息來做處理呢？因此我們想要尋找一種新的方式，來處理和解析控件信息，利用這些信息來實現類似“物體檢測”功能

3.問題二：重復布局

目的：提升代碼可用性

如上圖這個case，對于類似“GridView”的這種布局，我們理想的布局方式應該是有8個Item，每個Item包含一個TextView和ImageView（上圖左邊）。

存在的問題：沒有識別出重復布局，最終代碼不可用

然而實際情況是，我們沒有做重復布局的檢測，因此布局的時候變成了4行（上圖右邊）。

思考：如何比較布局是否重復？

為了解決上面的問題，我們就需要尋找一種方法，從多個控件信息中，找到一些規律，自動找到這些具有相似情況的布局。

4.問題分析

以上就是我們需要解決的兩個問題，我們分析這兩個問題，會發現他們有一些共同點：

都是由多個控件組成大的布局

布局間需要進行比較，尋找“相似布局”

都是非結構化數據：無法直接比較、計算

5.解決思路

首先我們需要將非結構化數據轉換為結構化數據（或者叫特征提取），這個思路可以參考圖片分類任務的做法，不管是聚類算法還是AI模型，都是先做特征提取，再進行進一步處理，實際上做的就是非結構化數據轉換成結構化數據。

因此，我們的問題解決思路也就分為兩步：

布局信息結構化：將布局信息處理成結構化的數據

布局比較：對布局進行比較、計算，尋找相似布局

6.布局結構化：控件間的關系

為了分析控件間的關系，我們可以先從簡單的開始，看一下兩個控件之間的關系都包含哪些信息。

兩個控件間的關系，包含以下2個方面的信息：

控件屬性（類型、文本內容、位置、大小）

方向、距離、對齊方式（用連線表達）

控件屬性：

對于控件屬性，可以直接用它自身表示，包含控件類型、內容、位置、大小等

方向和距離：

對于兩個控件的方向和距離，我們可以用一條虛擬的“連線”來表示，這條連線連接兩個控件的中心點。這樣，這條連線的長度和角度就可以表示兩個控件的方向和距離。比如上圖，我們可以得到：一個TextView在一個ImageView正上方，距離xxx像素。

對齊方式：

但是除了角度和方向，實際上還存在著一個“對齊方式”信息。

比如上圖這個case，如果我們還是連接兩個控件的中心點的話（圖中藍色虛線），那這左右兩邊的圖就是指不同的布局（因為兩個控件的角度和距離都不一樣）。

但是由我們人“肉眼”來看，我們會認為這兩個布局是一樣的，都是左邊一個頭像，右邊上面跟著一個文本。

因此，我們需要連接TextView的“左邊中點”（圖上紅色實線），這樣，不同的連接點位置，就可以表達不同的對齊方式。左對齊的TextView連接左邊中點，右對齊的TextView連接右邊中點，居中的連接中心點。

定義數據結構

有了上面的分析，我們就可以定義一個數據結構。我們用一個Connection對象表達2個控件間的布局關系，它包含：

控件1屬性（類型、位置大小等）

控件2屬性（類型、位置大小等）

控件1和控件2間的多條連線（角度、距離）

這樣，2個Connection之間就可以進行比較、判斷是否“匹配”

Connection匹配計算

兩個Connection之間是否“匹配”，必須滿足：

控件信息匹配（類型一致、ImageView面積相似度滿足要求等）

方向和距離匹配（連線的余弦相似度）

其它自定義的匹配要求

7.布局結構化：整個布局的表示

兩個控件間的關系可以用一個Connection來表示，那么多個控件組成的大布局，就可以用一組Connection來表示。

我們對每兩個控件建立一個Connection，就可以得到一個Connection數組

這樣，我們的第一步“布局信息結構化”就完成了。

8.布局間比較：引導連線法

將布局信息轉換成Connection數組以后，我們就可以開始利用這些信息來查找相似布局。

首先，我們可以理解這樣一個概念，就是：

一個布局，可以看成由一組Connection對象串聯起來，得到的一個“路徑”

如上圖，藍色圈內的布局可以看成一組Connection串聯起來（紅色連線）。

那么，尋找相似布局，就是尋找兩條相似“路徑”的過程

引導連線法

為了尋找相似路徑，我們定義了一個“引導連線法”。

所謂“引導連線法”，就是一個 Leader，一個 Follower，Follower 嘗試著跟隨 Leader 走出一條一樣的路徑。

步驟如下：

計算出所有相互匹配的Connection（如下圖所有綠色的連線）

定義一個“Leader”叫A，一個 “Follower” 叫B

隨機選擇一條綠色連線作為A的初始路徑，與其相匹配的另一條綠色連線作為B的初始路徑

A嘗試著繼續往前走，找到下一個路徑（綠色連線），B嘗試著跟隨

如果B能跟的上（即找到了一條路徑，剛好與A想走的路徑匹配上），那么A繼續往下走，如果B跟不上，那么A換條路徑繼續嘗試。

直到A走的路徑B怎么也跟不上時，A和B走過的路徑所對應的那些控件，就是擁有相似布局的控件。

9.應用效果

有了結構化的方法和“引導連線法”，我們就可以應用到上述兩個問題。

業務組件

• 應用方式

對業務組件進行結構化處理（圖左紅色連線）

對待處理圖片進行結構化處理

找到他們之間可以“匹配”的Connection（圖右綠色部分）

用“引導連線法”找到相似的布局

• 效果

應用這套算法以后，擴展要識別的組件變得非常簡單，只要把新組件的的結構化數據預先計算好存儲起來，在查找的時候應用”引導連線法“即可。

重復布局

• 應用方式

查找重復布局步驟如下：

計算自身所有控件的Connection

尋找自身Connection中，互相匹配的 Connection

“引導連線”法尋找匹配的布局“pair”

多個“pair”串聯組成一個重復布局

繼續嘗試對重復布局的每個Item做拆分，可得到“GridView”

這樣，最終我們就可以找到，圖上有8個布局相似的Item。

• 效果

應用這套算法，可以查找出頁面上任意的重復布局，無論是簡單的還是復雜的，極大得提升了代碼的可用性。

10.結語

以上就是我們針對布局信息的處理和計算的整體思路。當然其中還有很多復雜細節需要處理，比如相似布局相似度計算、重復布局多個“pair”組合起來的時候組合條件的判斷、重復布局其它額外信息的提取等。但是總體上都是圍繞著“布局信息結構化”和“引導連線法展開”，我們也在不斷的繼續探尋和持續優化各個環節。

本文作者：閑魚技術-楚豐

原文鏈接

本文為云棲社區原創內容，未經允許不得轉載。

轉載于:https://juejin.im/post/5cdd2041f265da034d2a3af8

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的UI2CODE智能生成代码——组件识别篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。