背景
在《UI2CODE——整體設計篇》中，我們介紹了UI2CODE工程的整體流程：
在元件識別這個環節，需要有一種處理佈局資訊的方法，來解析和計算控制元件間的佈局關係（比如識別業務元件（BI元件）和查詢重複佈局），以此來提高最終程式碼的可用性。
在這篇文章，我們將介紹一種佈局資訊的結構化方法：“連線法”，以及一種佈局間的計算和比較方法： “引導連線法”。
首先來看我們需要解決的問題。
問題一:識別業務元件
業務元件是指某些特定的卡片，比如一個商品詳情卡片，這些卡片會在不同頁面出現，而這些卡片的程式碼一般是已經存在的。我們在拿到一張圖片的時候，需要先識別出這些元件，這樣這一區塊就能複用已有的元件程式碼，而不會造成很多冗餘的一次性程式碼。
如果把尋找業務元件這個問題看成從一張大圖片上尋找小圖片的話，那麼最直接的做法就是用一個物體檢測模型（比如SSD）來做，這樣只要訓練模型來識別每個業務元件的圖片就可以了。因此我們嘗試了用訓練SSD模型來解決這個問題。
經過訓練和測試以後，我們發現用物體檢測模型來解這個問題的弊端：
需要造大量樣本。由於圖片資訊豐富，為了避免過擬合，需要造大量樣本來訓練。
訓練困難，增加新的業務元件成本太高。每增加一個新的業務元件，就需要先造這個元件的樣本，然後重新調整訓練模型。
訓練結果不可控。對於一些badcase，沒有一些直接有效的方式來做調整和控制，只能不斷調整樣本。
既然前面已經解析出了各個控制元件的資訊（包含型別以及位置等），那麼我們是否可以直接利用這些資訊來做處理呢？因此我們想要尋找一種新的方式，來處理和解析控制元件資訊，利用這些資訊來實現類似“物體檢測”功能。
問題二:重複佈局
如上圖這個case，對於類似“GridView”的這種佈局，我們理想的佈局方式應該是有8個Item，每個Item包含一個TextView和ImageView（上圖左邊）。
然而實際情況是，我們沒有做重複佈局的檢測，因此佈局的時候變成了4行（上圖右邊）。
為了解決上面的問題，我們就需要尋找一種方法，從多個控制元件資訊中，找到一些規律，自動找到這些具有相似情況的佈局。
問題分析
以上就是我們需要解決的兩個問題，我們分析這兩個問題，會發現他們有一些共同點：
都是由多個控制元件組成大的佈局
佈局間需要進行比較，尋找“相似佈局”
都是非結構化資料：無法直接比較、計算
解決思路
首先我們需要將非結構化資料轉換為結構化資料（或者叫特徵提取），這個思路可以參考圖片分類任務的做法，不管是聚類演算法還是AI模型，都是先做特徵提取，再進行進一步處理，實際上做的就是非結構化資料轉換成結構化資料。
因此，我們的問題解決思路也就分為兩步：
1. 佈局資訊結構化：將佈局資訊處理成結構化的資料
2. 佈局比較：對佈局進行比較、計算，尋找相似佈局
佈局資訊結構化
為了分析控制元件間的關係，我們可以先從簡單的開始，看一下兩個控制元件之間的關係都包含哪些資訊。
兩個控制元件間的關係，包含以下2個方面的資訊：
1. 控制元件屬性（型別、文字內容、位置、大小）
2. 方向、距離、對齊方式（用連線表達）
控制元件屬性
對於控制元件屬性，可以直接用它自身表示，包含控制元件型別、內容、位置、大小等
方向和距離
對於兩個控制元件的方向和距離，我們可以用一條虛擬的“連線”來表示，這條連線連線兩個控制元件的中心點。這樣，這條連線的長度和角度就可以表示兩個控制元件的方向和距離。比如上圖，我們可以得到：一個TextView在一個ImageView正上方，距離xxx畫素。
對齊方式
但是除了角度和方向，實際上還存在著一個“對齊方式”資訊。
比如上圖這個case，如果我們還是連線兩個控制元件的中心點的話（圖中藍色虛線），那這左右兩邊的圖就是指不同的佈局（因為兩個控制元件的角度和距離都不一樣）。
但是由我們人“肉眼”來看，我們會認為這兩個佈局是一樣的，都是左邊一個頭像，右邊上面跟著一個文字。
因此，我們需要連線TextView的“左邊中點”（圖上紅色實線），這樣，不同的連線點位置，就可以表達不同的對齊方式。左對齊的TextView連線左邊中點，右對齊的TextView連線右邊中點，居中的連線中心點。
有了上面的分析，我們就可以定義一個資料結構。我們用一個Connection物件表達2個控制元件間的佈局關係，它包含：
控制元件1屬性（型別、位置大小等）
控制元件2屬性（型別、位置大小等）
控制元件1和控制元件2間的多條連線（角度、距離）
這樣，2個Connection之間就可以進行比較、判斷是否“匹配”
兩個Connection之間是否“匹配”，必須滿足：
控制元件資訊匹配（型別一致、ImageView面積相似度滿足要求等）
方向和距離匹配（連線的餘弦相似度）
其它自定義的匹配要求
兩個控制元件間的關係可以用一個Connection來表示，那麼多個控制元件組成的大布局，就可以用一組Connection來表示。
我們對每兩個控制元件建立一個Connection，就可以得到一個Connection陣列
這樣，我們的第一步“佈局資訊結構化”就完成了。
佈局間比較
將佈局資訊轉換成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走過的路徑所對應的那些控制元件，就是擁有相似佈局的控制元件。
應用效果
有了結構化的方法和“引導連線法”，我們就可以應用到上述兩個問題。
應用
對業務元件進行結構化處理（圖左紅色連線）
對待處理圖片進行結構化處理
找到他們之間可以“匹配”的Connection（圖右綠色部分）
用“引導連線法”找到相似的佈局
效果
應用這套演算法以後，擴充套件要識別的元件變得非常簡單，只要把新元件的的結構化資料預先計算好儲存起來，在查詢的時候應用”引導連線法“即可。
應用
查詢重複佈局步驟如下：
1. 計算自身所有控制元件的Connection
2. 尋找自身Connection中，互相匹配的 Connection
3. “引導連線”法尋找匹配的佈局“pair”
4. 多個“pair”串聯組成一個重複佈局
5. 繼續嘗試對重複佈局的每個Item做拆分，可得到“GridView”
這樣，最終我們就可以找到，圖上有8個佈局相似的Item。
效果
應用這套演算法，可以查詢出頁面上任意的重複佈局，無論是簡單的還是複雜的，極大得提升了程式碼的可用性。
結語
以上就是我們針對佈局資訊的處理和計算的整體思路。當然其中還有很多複雜細節需要處理，比如相似佈局相似度計算、重複佈局多個“pair”組合起來的時候組合條件的判斷、重複佈局其它額外資訊的提取等。但是總體上都是圍繞著“佈局資訊結構化”和“引導連線法展開”，我們也在不斷的繼續探尋和持續優化各個環節。