Android 工具 + 生產力Hierarchy Viewer實戰

【IT168技術】在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進行開發設計。

轉自：http://tech.it168.com/a2011/0802/1226/000001226690.shtml