Android實用工具Hierarchy Viewer實戰 – Android移動開發技術文章_手機開發 Android移動開發教學課程

在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)的時間,如下圖: 

[img] 
http://image20.it168.com/201108_240x180/718/83e6f4cb70a2070d.jpg 
[/img] 
 如上圖,這裡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進行開發設計。 

作者“jackyrong”
 

發佈留言