Android優化——UI檢視利器：Hierarchy Viewer

在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的。

       hierarchyviewer.bat是sdk自帶的工具，在tools文件夾下。雙擊便可打開

1）鏈接設備真機或者模擬器（真機可能沒法鏈接，我用的2.3，鏈接上了，沒讀到內容）；

2）啓動你要觀察的應用。

3）打開Hierarchyviewer，點擊hierarchyviewer文件便可

　　步驟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進行開發設計。