天天看點

Hierarchy Viewer使用詳解

1. 功能

Hierarchy Viewer工具提供了一個可視化界面顯示布局的層次結構,讓我們可以進行調試,進而優化界面布局結構。

2. 啟動工具

啟動方式有兩種,一種是通過終端指令,輸入hierarchyviewer,進行啟動,第二種是通過打開Android Device Monitor,添加hierarchyviewer視圖。官網提示第一種方式已經過期,建議用第二種方式啟動,不過并不影響使用,功能是一樣的,隻不過是将hierarchyviewer整合到了Android Device Monitor裡面了而已

2.1第一種方式:
Hierarchy Viewer使用詳解
2.2 第二種方式
Hierarchy Viewer使用詳解

3. 分析頁面布局性能

3.1 選擇一個節點,點選右上角的的按鈕,就可以擷取到布局繪制的時間,如圖:

Hierarchy Viewer使用詳解

這裡我們主要關注下面的三個圓圈,從左到右依次,代表View的Measure, Layout和Draw的性能,不同顔色代表不同的性能等級:

1) 綠: 表示該View的此項性能比該View Tree中超過50%的View都要快;例如,一個綠點的測量時間意味着這個視圖的測量時間快于樹中的視圖對象的50%。

2)黃: 表示該View的此項性能比該View Tree中超過50%的View都要慢;例如,一個黃點布局意味着這種觀點有較慢的布局時間超過50%的樹視圖對象。

3)紅: 表示該View的此項性能是View Tree中最慢的;例如,一個紅點的繪制時間意味着花費時間最多的這一觀點在樹上畫所有的視圖對象。

一個Activity的View樹,通過這個樹可以分析出View嵌套的備援層級,左下角可以輸入View的id直接自動跳轉到中間顯示;Save as PNG用來把左側樹儲存為一張圖檔;Capture Layers用來儲存psd的PhotoShop分層素材;右側劇中顯示選中View的目前屬性狀态;右下角顯示目前View在Activity中的位置等;左下角三個進行切換;Load View Hierarchy用來手動重新整理變化(不會自動重新整理的)。當我們選擇一個View後會如下圖所示:

Hierarchy Viewer使用詳解

類似上圖可以很友善的檢視到目前View的許多資訊;上圖最底那三個彩色原點代表了目前View的性能名額,從左到右依次代表測量、布局、繪制的渲染時間,紅色和黃色的點代表速度渲染較慢的View(當然了,有些時候較慢不代表有問題,譬如ViewGroup子節點越多、結構越複雜,性能就越差)。

當然了,在自定義View的性能調試時,HierarchyViewer上面的invalidate Layout和requestLayout按鈕的功能更加強大,它可以幫助我們debug自定義View執行invalidate()和requestLayout()過程,我們隻需要在代碼的相關地方打上斷點就行了,接下來通過它觀察繪制即可。

可以發現,有了HierarchyViewer調試工具,我們的UI性能分析變得十分容易,這個工具也是我們開發中調試UI的利器,在平時寫代碼時會時常伴随我們左右。

4.2 測量結果分析

紅色節點是代表應用性能慢的一個潛在問題,下面是幾個例子,如何來分析和解釋紅點的出現原因?

1)如果在葉節點或者ViewGroup中,隻有極少的子節點,這可能反映出一個問題,應用可能在裝置上運作并不慢,但是你需要指導為什麼這個節點是紅色的,可以借助Systrace或者Traceview工具,擷取更多額外的資訊;

2)如果一個視圖組裡面有許多的子節點,并且測量階段呈現為紅色,則需要觀察下子節點的繪制情況;

3)如果視圖層級結構中的根視圖,Messure階段為紅色,Layout階段為紅色,Draw階段為黃色,這個是比較常見的,因為這個節點是所有其它視圖的父類;

4)如果視圖結構中的一個葉子節點,有20個視圖是紅色的Draw階段,這是有問題的,需要檢查代碼裡面的onDraw方法,不應該在那裡調用。

 4. 布局常見問題與優化建議

1)沒有用的父布局時指沒有背景繪制或者沒有大小限制的父布局,這樣的布局不會對UI效果産生任何影響。我們可以把沒有用的父布局,通過标簽合并來減少UI的層次;

2)使用線性布局LinearLayout排版導緻UI層次變深,如果有這類問題,我們就使用相對布局RelativeLayout代替LinearLayout,減少UI的層次;

3)不常用的UI被設定成GONE,比如異常的錯誤頁面,如果有這類問題,我們需要用标簽,代替GONE提高UI性能。

資料參考: