在Android的SDK工具包中，有很多十分有用的工具，可以幫助程序員開發和測試Android應用程序，大大提高其工作效率。其中的一款叫Hierachy Viewer的可視化調試工具，可以很方便地在開發者設計，調試和調整界面時，提高用戶的開發效率。本文將以一個實際例子講解如何使用該款工具運用在Android的開發過程中。本文的讀者對象為具備初步Android知識的用戶。
步驟1 設計界面
在我們的這個例子中，有三個不同的界面，以方便我們演示使用Hierarchy Viewer。每一個界面都使用了LinearLayout和FrameLayout布局，以及文本框TextView及圖片框ImageView控件。如下圖，三個界面中的圖案分別用了一只小貓，一個魚缸，一條金魚，它們各自的位置布局見下圖：
在上面的三個圖中，最左面的一個圖，使用了一個垂直布局的LinearLayout，並且劃分為兩行，第一行是一個TextView文本框，裡面的文字是“Safe”，第2行是一個FrameLayout幀布局，分別包含了一條魚和一個魚缸子。
中間的圖中，使用了一個垂直布局的LinearLayout，並且劃分為兩行，第一行是寫有“Unsafe”文本的文本框，第二行也有一個LinearLayout的水平布局，分別又包含了兩個ImageView控件：一個魚缸及魚，還有一只小貓。
最右邊的圖中，使用了一個垂直布局的LinearLayout，並且劃分為兩行，第一行是寫有“Yum” 文本的文本框，第2行是一個FrameLayout幀布局，分別包含了一條小貓和一條魚。跟第一張圖有點相象。
步驟2 啟動應用程序
在設計界面後，我們直接用模擬器啟動我們的應用程序，要注意的是，在debug狀態下，是不能啟動Hierachy Viewer的。
步驟3 啟動Hierachy Viewer
目前，在eclipse的ADT Android插件中，還不能啟動Hierachy Viewer，但可以從Android SDK工具包中，通過命令行的方式可以啟動，具體方法為，到Android SDK下的tools目錄下，在命令行方式下運行hierachyviewer即可。
在啟動後，可以看到如下的界面，會顯示當前正在運行中的模擬器的信息，這裡我們可以鼠標點擊我們已經啟動了的Activity:
同時可以看到，有兩個按鈕，分別代表兩個功能：
1)Load View Hierarchy (可以查看界面的控件層次)
2)Inspect Screenshot (進入界面精確查看模式)
下面分別介紹兩者的功能。
步驟4 Inspecting Screenshots(界面精確查看模式)
先點Inspecting Screenshots按鈕，進入界面精確查看模式。在這個模式
下，開發者可以隨意點界面的任意一部分，進行放大或縮小觀察以查看界面中各控件的具體位置和情況，如下圖所示：
同時，還可以將截取的界面另外保存為PNG格式的圖片文件。
步驟5 Load View Hierarchy 查看界面的控件層次
接下來，我們重點學習如何在Load View Hierachy中查看界面中各個控件的層次結構關系。首先當點Load View Hierarchy按鈕後，會進入如下圖所示界面：
要注意的是，在屏幕的左下方，有三個按鈕，當點最左邊的按鈕時，返回的是模擬器的列表界面(也就是剛進入Hierarchy Viwer的界面)，中間按鈕則是Load View Hierachy的主界面，用戶可以在這兩種狀態中來回切換。
接下來，我們看上圖，Load View Hierachy界面被劃分為四個部分，分別是最左邊(面積最大一塊)，該部分顯示界面控件的層次結構，我們稱之為主窗口，而右上方的一個部分，是以縮略圖的方式顯示整個應用中的各控件的層次關系，當如果一個界面中的控件比較多的時候，可以通過鼠標在這個顯示區域進行移動，則左邊的主窗口中會具體顯示相關的控件信息。右邊區域的中間部分，顯示的每個控件的具體屬性，是控件的屬性面版。而右下角部分的區域，則是當用戶點界面中的某個控件時，會在該部分顯示區域，顯示出用戶所點的控件，在界面中的具體位置，會用紅色部分標出，方便用戶辨識。
步驟6 理解Hierachy Viewer的主窗口
最左部分的主窗口,將一個Activity中的所有控件的層次結構從左到右顯示了出來,其中最右部分是最低一層的控件。用我們的例子來說，如果選擇了第一個界面(即上文提到的三張圖界面的最左邊的一張)，在主窗口的最右邊，從右往左看，可以看到最右邊的是兩個ImageView控件：魚缸的圖片和小魚的圖片。
再往左看，會看到這兩個控件實際上是被包裹在FrameLayout布局中，這裡可以清楚看到指出了這個布局的id為@id/frameLayoutFishbowl。再往左邊看，可以看到再上一層的控件：LinearLayout布局控件以及它包含的一個TextView控件(顯示“Safe”字樣)以及@id/frameLayoutFishbowl的frameLayout布局控件。
讀者可以嘗試，在Hierachy viewer中，查看另外兩個activity界面中的控件，熟悉其中的用法。
步驟7 查看每個具體控件的情況
當在主窗口中，點擊每一個控件時，將會可以看到很多關於這個控件的詳細信息，會在該控件的上方彈出一個窗口，其中會顯示該控件的實際的效果圖外，通過view的數目顯示了該控件及其子控件的數目，該控件的該節點的測量(measure)、布局(layout)以及畫視圖(draw)的時間，如下圖：
如上圖，這裡1 view表明這個文本控件沒再包含其他子控件了，只有1個就是它本身。而下方的帶顏色的三個圓圈指示燈，分別說明了在測量(measure)、布局(layout)以及畫視圖(draw)三個階段，這個控件所占用的時間百分比，如果是綠色的，表示該控件在該階段比起其他的50%的控件的速度要快，為黃色的表示比起其他的50%的控件的速度要慢，為紅色的則表示該控件在該階段的處理速度是最慢的，如下圖：
當我們按“display View”按鈕後，在當我們點某個控件時，在稍等1-2秒後，會另外單獨打開一個小窗口，顯示該空間的單獨效果圖。
我們再來看下右上角的縮略顯示窗口。當界面裡的控件太多時，可以在這個窗口中，點選某一部分，隨即會在主窗口中顯示該區域控件的情況，而在右方中部的屬性列表中，會顯示所點擊的控件的詳細屬性情況。右下角則顯示所點擊的控件在整個界面中的實際位置，如果勾選了show extra views，則還會在這個區域中，將控件的實際圖片也顯示出來，十分清晰。下圖是我們點金魚這個圖片時，實際顯示的效果：
步驟8 刷新顯示
要注意的是，在Hierarchy Viewer中，當修改了界面後，需要手工點Refresh按鈕，才能同步在Hierarchy Viewer中顯示更新過後的界面情況。下圖是分別對應用中的第2，第3個界面進行操作的示意圖，可以看到，這兩個界面的布局比第一個界面稍微復雜了。
對於Android的UI來說，invalidate和requestLayout是最重要的過程，Hierarchyviewer提供了幫助我們Debug特定的UI執行invalidate和requestLayout過程的途徑，方法很簡單，只要選擇希望執行這兩種操作的View點擊按鈕就可以。當然，我們需要在例如onMeasure()這樣的方法中打上斷點。這個功能對於UI組件是自定義的非常有用，可以幫助單獨觀察相關界面顯示邏輯是否正確。
小結
在本文中，通過簡單的例子，講解了在Android中一款不錯的工具Hierarchy viewer的使用，使用這個工具，用戶可以很方便地查看和調試應用中的UI界面，分析其性能，建議用戶在開發階段多使用這款工具對UI進行開發設計。
