1.背景

在《UI2CODE——整體設(shè)計(jì)篇》中，我們介紹了UI2CODE工程的整體流程：

在組件識(shí)別這個(gè)環(huán)節(jié)，需要有一種處理布局信息的方法，來解析和計(jì)算控件間的布局關(guān)系（比如識(shí)別業(yè)務(wù)組件（BI組件）和查找重復(fù)布局），以此來提高最終代碼的可用性。

在這篇文章，我們將介紹一種布局信息的結(jié)構(gòu)化方法：“連線法”，以及一種布局間的計(jì)算和比較方法： “引導(dǎo)連線法”。

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

2.問題一：識(shí)別業(yè)務(wù)組件

目的：代碼復(fù)用

業(yè)務(wù)組件是指某些特定的卡片，比如一個(gè)商品詳情卡片，這些卡片會(huì)在不同頁(yè)面出現(xiàn)，而這些卡片的代碼一般是已經(jīng)存在的。我們?cè)谀玫揭粡垐D片的時(shí)候，需要先識(shí)別出這些組件，這樣這一區(qū)塊就能復(fù)用已有的組件代碼，而不會(huì)造成很多冗余的一次性代碼。

老解法：利用深度學(xué)習(xí)模型SSD做物體檢測(cè)

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

存在的問題：訓(xùn)練困難，訓(xùn)練結(jié)果不可控

經(jīng)過訓(xùn)練和測(cè)試以后，我們發(fā)現(xiàn)用物體檢測(cè)模型來解這個(gè)問題的弊端：

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

訓(xùn)練困難，增加新的業(yè)務(wù)組件成本太高。每增加一個(gè)新的業(yè)務(wù)組件，就需要先造這個(gè)組件的樣本，然后重新調(diào)整訓(xùn)練模型。

訓(xùn)練結(jié)果不可控。對(duì)于一些badcase，沒有一些直接有效的方式來做調(diào)整和控制，只能不斷調(diào)整樣本。

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

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

3.問題二：重復(fù)布局

目的：提升代碼可用性

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

存在的問題：沒有識(shí)別出重復(fù)布局，最終代碼不可用

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

思考：如何比較布局是否重復(fù)？

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

4.問題分析

以上就是我們需要解決的兩個(gè)問題，我們分析這兩個(gè)問題，會(huì)發(fā)現(xiàn)他們有一些共同點(diǎn)：

都是由多個(gè)控件組成大的布局

布局間需要進(jìn)行比較，尋找“相似布局”

都是非結(jié)構(gòu)化數(shù)據(jù)：無法直接比較、計(jì)算

5.解決思路

首先我們需要將非結(jié)構(gòu)化數(shù)據(jù)轉(zhuǎn)換為結(jié)構(gòu)化數(shù)據(jù)（或者叫特征提取），這個(gè)思路可以參考圖片分類任務(wù)的做法，不管是聚類算法還是AI模型，都是先做特征提取，再進(jìn)行進(jìn)一步處理，實(shí)際上做的就是非結(jié)構(gòu)化數(shù)據(jù)轉(zhuǎn)換成結(jié)構(gòu)化數(shù)據(jù)。

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

布局信息結(jié)構(gòu)化：將布局信息處理成結(jié)構(gòu)化的數(shù)據(jù)

布局比較：對(duì)布局進(jìn)行比較、計(jì)算，尋找相似布局

6.布局結(jié)構(gòu)化：控件間的關(guān)系

為了分析控件間的關(guān)系，我們可以先從簡(jiǎn)單的開始，看一下兩個(gè)控件之間的關(guān)系都包含哪些信息。

兩個(gè)控件間的關(guān)系，包含以下2個(gè)方面的信息：

控件屬性（類型、文本內(nèi)容、位置、大小）

方向、距離、對(duì)齊方式（用連線表達(dá)）

控件屬性：

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

方向和距離：

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

對(duì)齊方式：

但是除了角度和方向，實(shí)際上還存在著一個(gè)“對(duì)齊方式”信息。

比如上圖這個(gè)case，如果我們還是連接兩個(gè)控件的中心點(diǎn)的話（圖中藍(lán)色虛線），那這左右兩邊的圖就是指不同的布局（因?yàn)閮蓚€(gè)控件的角度和距離都不一樣）。

但是由我們?nèi)恕叭庋邸眮砜?#xff0c;我們會(huì)認(rèn)為這兩個(gè)布局是一樣的，都是左邊一個(gè)頭像，右邊上面跟著一個(gè)文本。

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

定義數(shù)據(jù)結(jié)構(gòu)

有了上面的分析，我們就可以定義一個(gè)數(shù)據(jù)結(jié)構(gòu)。我們用一個(gè)Connection對(duì)象表達(dá)2個(gè)控件間的布局關(guān)系，它包含：

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

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

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

這樣，2個(gè)Connection之間就可以進(jìn)行比較、判斷是否“匹配”

Connection匹配計(jì)算

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

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

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

其它自定義的匹配要求

7.布局結(jié)構(gòu)化：整個(gè)布局的表示

兩個(gè)控件間的關(guān)系可以用一個(gè)Connection來表示，那么多個(gè)控件組成的大布局，就可以用一組Connection來表示。

我們對(duì)每?jī)蓚€(gè)控件建立一個(gè)Connection，就可以得到一個(gè)Connection數(shù)組

這樣，我們的第一步“布局信息結(jié)構(gòu)化”就完成了。

8.布局間比較：引導(dǎo)連線法

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

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

一個(gè)布局，可以看成由一組Connection對(duì)象串聯(lián)起來，得到的一個(gè)“路徑”

如上圖，藍(lán)色圈內(nèi)的布局可以看成一組Connection串聯(lián)起來（紅色連線）。

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

引導(dǎo)連線法

為了尋找相似路徑，我們定義了一個(gè)“引導(dǎo)連線法”。

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

步驟如下：

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

定義一個(gè)“Leader”叫A，一個(gè) “Follower” 叫B

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

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

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

直到A走的路徑B怎么也跟不上時(shí)，A和B走過的路徑所對(duì)應(yīng)的那些控件，就是擁有相似布局的控件。

9.應(yīng)用效果

有了結(jié)構(gòu)化的方法和“引導(dǎo)連線法”，我們就可以應(yīng)用到上述兩個(gè)問題。

業(yè)務(wù)組件

• 應(yīng)用方式

對(duì)業(yè)務(wù)組件進(jìn)行結(jié)構(gòu)化處理（圖左紅色連線）

對(duì)待處理圖片進(jìn)行結(jié)構(gòu)化處理

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

用“引導(dǎo)連線法”找到相似的布局

• 效果

應(yīng)用這套算法以后，擴(kuò)展要識(shí)別的組件變得非常簡(jiǎn)單，只要把新組件的的結(jié)構(gòu)化數(shù)據(jù)預(yù)先計(jì)算好存儲(chǔ)起來，在查找的時(shí)候應(yīng)用”引導(dǎo)連線法“即可。

重復(fù)布局

• 應(yīng)用方式

查找重復(fù)布局步驟如下：

計(jì)算自身所有控件的Connection

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

“引導(dǎo)連線”法尋找匹配的布局“pair”

多個(gè)“pair”串聯(lián)組成一個(gè)重復(fù)布局

繼續(xù)嘗試對(duì)重復(fù)布局的每個(gè)Item做拆分，可得到“GridView”

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

• 效果

應(yīng)用這套算法，可以查找出頁(yè)面上任意的重復(fù)布局，無論是簡(jiǎn)單的還是復(fù)雜的，極大得提升了代碼的可用性。

10.結(jié)語

以上就是我們針對(duì)布局信息的處理和計(jì)算的整體思路。當(dāng)然其中還有很多復(fù)雜細(xì)節(jié)需要處理，比如相似布局相似度計(jì)算、重復(fù)布局多個(gè)“pair”組合起來的時(shí)候組合條件的判斷、重復(fù)布局其它額外信息的提取等。但是總體上都是圍繞著“布局信息結(jié)構(gòu)化”和“引導(dǎo)連線法展開”，我們也在不斷的繼續(xù)探尋和持續(xù)優(yōu)化各個(gè)環(huán)節(jié)。

本文作者：閑魚技術(shù)-楚豐

原文鏈接

本文為云棲社區(qū)原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

轉(zhuǎn)載于:https://juejin.im/post/5cdd2041f265da034d2a3af8

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。