步驟1 設(shè)計界面

　　 在我們的這個例子中，有三個不同的界面，以方便我們演示使用Hierarchy Viewer。每一個界面都使用了LinearLayout和FrameLayout布局，以及文本框TextView及圖片框ImageView控件。 如下圖，三個界面中的圖案分別用了一只小貓，一個魚缸，一條金魚，它們各自的位置布局見下圖：

　　在上面的三個圖中，最左面的一個圖，使用了一個垂直布局的LinearLayout，并且劃分為兩行，第一行是一個TextView文本框，里面的文字是“Safe”，第2行是一個FrameLayout幀布局，分別包含了一條魚和一個魚缸子。

　　中間的圖中，使用了一個垂直布局的LinearLayout，并且劃分為兩行，第一行是寫有“Unsafe”文本的文本框，第二行也有一個LinearLayout的水平布局，分別又包含了兩個ImageView控件：一個魚缸及魚，還有一只小貓。

　　最右邊的圖中，使用了一個垂直布局的LinearLayout，并且劃分為兩行，第一行是寫有“Yum” 文本的文本框，第2行是一個FrameLayout幀布局，分別包含了一條小貓和一條魚。跟第一張圖有點相象。

　　步驟2 啟動應(yīng)用程序

　　在設(shè)計界面后，我們直接用模擬器啟動我們的應(yīng)用程序，要注意的是，在debug狀態(tài)下，是不能啟動Hierachy Viewer的。

　　步驟3 啟動Hierachy Viewer

　 　目前，在eclipse的ADT Android插件中，還不能啟動Hierachy Viewer，但可以從Android SDK工具包中，通過命令行的方式可以啟動，具體方法為，到Android SDK下的tools目錄下，在命令行方式下運行hierachyviewer即可。

　　在啟動后，可以看到如下的界面，會顯示當(dāng)前正在運行中的模擬器的信息，這里我們可以鼠標(biāo)點擊我們已經(jīng)啟動了的Activity:

　　同時可以看到，有兩個按鈕，分別代表兩個功能：

　　1)Load View Hierarchy (可以查看界面的控件層次)

　　2)Inspect Screenshot (進(jìn)入界面精確查看模式)

　　下面分別介紹兩者的功能。

　　步驟4 Inspecting Screenshots(界面精確查看模式)

　　先點Inspecting Screenshots按鈕，進(jìn)入界面精確查看模式。在這個模式

　　下，開發(fā)者可以隨意點界面的任意一部分，進(jìn)行放大或縮小觀察以查看界面中各控件的具體位置和情況，如下圖所示：

　　同時，還可以將截取的界面另外保存為PNG格式的圖片文件。

　　步驟5 Load View Hierarchy 查看界面的控件層次

　　接下來，我們重點學(xué)習(xí)如何在Load View Hierachy中查看界面中各個控件的層次結(jié)構(gòu)關(guān)系。首先當(dāng)點Load View Hierarchy按鈕后，會進(jìn)入如下圖所示界面：

　　要注意的是，在屏幕的左下方，有三個按鈕，當(dāng)點最左邊的按鈕時，返回的是模擬器的列表界面(也就是剛進(jìn)入Hierarchy Viwer的界面)，中間按鈕則是Load View Hierachy的主界面，用戶可以在這兩種狀態(tài)中來回切換。

　 　接下來，我們看上圖，Load View Hierachy界面被劃分為四個部分，分別是最左邊(面積最大一塊)，該部分顯示界面控件的層次結(jié)構(gòu)，我們稱之為主窗口，而右上方的一個部分，是以縮略 圖的方式顯示整個應(yīng)用中的各控件的層次關(guān)系，當(dāng)如果一個界面中的控件比較多的時候，可以通過鼠標(biāo)在 這個顯示區(qū)域進(jìn)行移動，則左邊的主窗口中會具體顯示相關(guān)的控件信息。右邊區(qū)域的中間部分，顯示的每個控件的具體屬性，是控件的屬性面版。而右下角部分的區(qū) 域，則是當(dāng)用戶點界面中的某個控件時，會在該部分顯示區(qū)域，顯示出用戶所點的控件，在界面中的具體位置，會用紅色部分標(biāo)出，方便用戶辨識。

　　步驟6 理解Hierachy Viewer的主窗口

　 　最左部分的主窗口,將一個Activity中的所有控件的層次結(jié)構(gòu)從左到右顯示了出來,其中最右部分是最低一層的控件。用我們的例子來說，如果選擇了第 一個界面(即上文提到的三張圖界面的最左邊的一張)，在主窗口的最右邊，從右往左看，可以看到最右邊的是兩個ImageView控件：魚缸的圖片和小魚的 圖片。

　　再往左看，會看到這兩個控件實際上是被包裹在FrameLayout布局中，這里可以清楚看到指出了這個布局的id為 @id/frameLayoutFishbowl。再往左邊看，可以看到再上一層的控件：LinearLayout布局控件以及它包含的一個 TextView控件(顯示“Safe”字樣)以及@id/frameLayoutFishbowl的frameLayout布局控件。

　　讀者可以嘗試，在Hierachy viewer中，查看另外兩個activity界面中的控件，熟悉其中的用法。

　　步驟7 查看每個具體控件的情況

　 　當(dāng)在主窗口中，點擊每一個控件時，將會可以看到很多關(guān)于這個控件的詳細(xì)信息，會在該控件的上方彈出一個窗口，其中會顯示該控件的實際的效果圖外，通過 view的數(shù)目顯示了該控件及其子控件的數(shù)目，該控件的該節(jié)點的測量(measure)、布局(layout)以及畫視圖(draw)的時間，如下圖：

　 　如上圖，這里1 view表明這個文本控件沒再包含其他子控件了，只有1個就是它本身。而下方的帶顏色的三個圓圈指示燈，分別說明了在測量(measure)、布局 (layout)以及畫視圖(draw)三個階段，這個控件所占用的時間百分比，如果是綠色的，表示該控件在該階段比起其他的50%的控件的速度要快，為 黃色的表示比起其他的50%的控件的速度要慢，為紅色的則表示該控件在該階段的處理速度是最慢的，如下圖：

　　當(dāng)我們按“display View”按鈕后，在當(dāng)我們點某個控件時，在稍等1-2秒后，會另外單獨打開一個小窗口，顯示該空間的單獨效果圖。

　 　我們再來看下右上角的縮略顯示窗口。當(dāng)界面里的控件太多時，可以在這個窗口中，點選某一部分，隨即會在主窗口中顯示該區(qū)域控件的情況，而在右方中部的屬 性列表中，會顯示所點擊的控件的詳細(xì)屬性情況。右下角則顯示所點擊的控件在整個界面中的實際位置，如果勾選了show extra views，則還會在這個區(qū)域中，將控件的實際圖片也顯示出來，十分清晰。下圖是我們點金魚這個圖片時，實際顯示的效果：

　　步驟8 刷新顯示

　 　要注意的是，在Hierarchy Viewer中，當(dāng)修改了界面后，需要手工點Refresh按鈕，才能同步在Hierarchy Viewer中顯示更新過后的界面情況。下圖是分別對應(yīng)用中的第2，第3個界面進(jìn)行操作的示意圖，可以看到，這兩個界面的布局比第一個界面稍微復(fù)雜了。

　 　對于Android的UI來說，invalidate和requestLayout是最重要的過程，Hierarchyviewer提供了幫助我們 Debug特定的UI執(zhí)行invalidate和requestLayout過程的途徑，方法很簡單，只要選擇希望執(zhí)行這兩種操作的View點擊按鈕就可 以。當(dāng)然，我們需要在例如onMeasure()這樣的方法中打上斷點。這個功能對于UI組件是自定義的非常有用，可以幫助單獨觀察相關(guān)界面顯示邏輯是否 正確。

　　小結(jié)

　　在本文中，通過簡單的例子，講解了在Android中一款不錯的工具Hierarchy viewer的使用，使用這個工具，用戶可以很方便地查看和調(diào)試應(yīng)用中的UI界面，分析其性能，建議用戶在開發(fā)階段多使用這款工具對UI進(jìn)行開發(fā)設(shè)計。