性能優化工具知識梳理(1) - TraceView
性能優化工具知識梳理(2) - Systrace
性能優化工具知識梳理(3) - 調試GPU過度繪制 & GPU呈現模式分析
性能優化工具知識梳理(4) - Hierarchy Viewer
性能優化工具知識梳理(5) - MAT
性能優化工具知識梳理(6) - Memory Monitor & Heap Viewer & Allocation Tracker
性能優化工具知識梳理(7) - LeakCanary
性能優化工具知識梳理(8) - Lint
一、概述
Hierarchy Viewer是我們平時開發中常用的工具，通過它我們可以得到某個界面中的布局層次，今天我們來介紹一下如何使用這個工具來優化布局。
Hierarchy工具位于SDK/tools目錄下，直
接運行之后我們會得到下面這個界面：
它提供了下面兩個功能：
Load View HierarchyInspect Screenshot
因為主要是討論如何用它來分析性能問題，所以我們主要介紹第一個功能。
二、Hierarchy分析
2.1 整體布局分析
在Hierarchy Viewer的根界面，它列出了當前手機或者模擬器中可見的Window，假如我們要分析某個Activity，那么點擊它，再點擊Load View Hierarchy后，就會得到下面這個界面：
這個界面一共分為四個部分，它們分別是：
-
Tree View
這里面將Activity的所有View呈現成為一個樹形結構，它提供了以下幾種操作方式：- 通過拖動條來放大或縮小可視范圍。
- 通過輸入類名或者
View的id來迅速定位到需要分析的View - 通過上方的
Save as PNG或者Capture Layers保存當前的樹形結構。
-
Tree Overview
這相當于是Tree View的縮小版，可以通過它快速查看或者定位。 -
Properties View
當我們選取了一個View的時候，它會列出對應View的屬性。 -
Layout View
當我們選取了一個View之后，會在這個區域內，顯示出不同顏色的矩形框，其中紅色就是我們選取的View的范圍，而淡紅色則是該View對應的父容器的范圍，其它的白色矩形框既不是該View的父容器，也不是該View的子控件。
需要注意，當Window的布局變化時，是不會主動刷新的，如果我們想要查看最新的布局情況，那么就要點擊上方的Load View Hierarchy來刷新，而如果我們想要去查看別的Window布局，那么就需要點擊下方操作欄最左邊的按鈕，重新進入選擇Window的窗口。
2.2 單個布局元素分析
對于Tree View中的每個節點，我們可以獲得以下信息：
-
View的類名 -
View所存儲的地址 -
View的id屬性值 -
View繪制的相對耗時分析，它會根據measure/layout/draw這三個階段，分為三個小點展示，而小點的顏色就代表了它在這個階段相對于View樹中的其他View在同一階段的耗時對比結果： - 綠色：在前
50% - 黃色：在后
50% - 紅色：耗時最長
-
View處于它的父容器的index。
如果我們選擇了一個View，那么會有更加詳細的信息：
-
View和它的子View在當前在屏幕上的結果。 -
View的子View個數。 -
View各繪制階段耗時，單位為ms，包括了它自己和它的子View的耗時。
2.3 如何調試
上面我們看到Hierarchy View可以得到繪制階段的耗時，這些耗時是在上一次繪制的時候計算出的，我們也可以通過這個工具主動地觸發重繪，以得到最新的結果，操作步驟為：
- 選取一個
View - 點擊窗口上方的
invalidate把這個View標記為需要重繪，那么在下次請求繪制的時候就會重繪它。 - 點擊窗口上方的
request layout，來發起一次請求，這樣它和它的子View以及需要重繪的View都會重新執行三個過程。
2.4 如何優化
Hierarchy View對于我們平時開發中的作用主要是以下幾點：
- 查看整個布局的深度，是否可以去掉一些不必要的層級，以盡量使
View樹保持扁平。 - 查看
measure、layout、draw當中那些紅色或者黃色的節點，但是由于這些節點的顏色是包含了它和它的子View的時間，因此我們分析的時候，需要根據具體情況看究竟是由于ViewGroup的子View過多，還是View過于復雜引起的這一問題。
三、小結
今天主要介紹了Hierarchy Viewer和分析性能有關的用法，如果對于Inspect Screenshot有興趣的同學可以查看下面官方文檔的其它部分：
http://android.xsoftlab.net/tools/debugging/debugging-ui.html
更多文章，歡迎訪問我的 Android 知識梳理系列：
- Android 知識梳理目錄：http://www.lxweimin.com/p/fd82d18994ce
