布局檢測與優(yōu)化(三):Hierarchy Viewer與Layout Inspactor工具

工具推薦

UI檢測的工具,Hierarchy Viewer和Layout Inspector。

Hierarchy Viewer官方地址

Layout Inspector官方地址

雖然Hierarchy Viewer已經(jīng)廢棄了,但感覺還是有必要介紹一下的。

Hierarchy Viewer

工具打開方式

AS版本:3.3.2 打開方式:

  • 本地安裝SDK目錄->sdk->tools->monitor.bat

老版的AS打開方式:

  • 本地安裝SDK目錄->sdk->tools->hierarchyviewer.bat
  • Android Studio : 工具欄->Tools->Android->Android Device Monitor
  • 在命令行輸入 hierarchyviewer

工具的使用

設(shè)備連接(真機(jī)需要手機(jī)root權(quán)限)

成功后左側(cè)Windows小手機(jī)會看到設(shè)備信息


在這里插入圖片描述
打開Hierarchy View

點擊Window->Open Perspective->Hierarchy View


在這里插入圖片描述

若期間出現(xiàn)此問題

在這里插入圖片描述

選擇使用本地IP,并關(guān)閉,重新啟動即可

在這里插入圖片描述

此時,應(yīng)該會看到如下圖了:


在這里插入圖片描述
  • Tree View:顯示視圖層次結(jié)構(gòu)的樹視圖。 可以使用鼠標(biāo)拖動并放大樹底部的縮放控件
  • Tree Overview:為應(yīng)用程序的完整視圖層次結(jié)構(gòu)提供鳥瞰圖。 移動灰色矩形以更改樹視圖中可見的視口。
  • Layout View:顯示布局的線框視圖。 當(dāng)前所選視圖的輪廓為紅色,其父視圖為淺紅色。單擊此處的視圖也會在樹視圖中選擇它,反之亦然。
  • hierarchy view 視圖層次結(jié)構(gòu)是布局的快照,因此不會自動更新。 要更新層次結(jié)構(gòu)視圖,點擊右上角藍(lán)色金字塔(Reload the view hierarchy)。
  • 要想保存Tree View,點擊右上角藍(lán)色金字塔左邊小文檔,左邊是PNG格式,右邊是PS的PSD格式。
獲取布局的繪制
  • 選擇一個節(jié)點,點擊Profile Mode按鈕,可以獲取到布局繪制的時間,如圖:
在這里插入圖片描述
  • 綠:表示該View的此項性能比該View Tree中超過50%的View都要快;例如,一個綠點的測量時間意味著這個視圖的測量時間快于樹中的視圖對象的50%。
  • 黃: 表示該View的此項性能比該View Tree中超過50%的View都要慢;例如,一個黃點布局意味著這種觀點有較慢的布局時間超過50%的樹視圖對象。
  • 紅: 表示該View的此項性能是View Tree中最慢的;例如,一個紅點的繪制時間意味著花費時間最多的這一觀點在樹上畫所有的視圖對象。
布局性能分析

紅色節(jié)點是代表應(yīng)用性能慢的一個潛在問題,下面是幾個例子,如何來分析和解釋紅點的出現(xiàn)原因?

  • 如果在葉節(jié)點或者ViewGroup中,只有極少的子節(jié)點,這可能反映出一個問題,應(yīng)用可能在設(shè)備上運行并不慢,但是你需要指導(dǎo)為什么這個節(jié)點是紅色的,可以借助Systrace或者Traceview工具,獲取更多額外的信息;
  • 如果一個視圖組里面有許多的子節(jié)點,并且測量階段呈現(xiàn)為紅色,則需要觀察下子節(jié)點的繪制情況;
  • 如果視圖層級結(jié)構(gòu)中的根視圖,Messure階段為紅色,Layout階段為紅色,Draw階段為黃色,這個是比較常見的,因為這個節(jié)點是所有其它視圖的父類;
  • 如果視圖結(jié)構(gòu)中的一個葉子節(jié)點,有20個視圖是紅色的Draw階段,這是有問題的,需要檢查代碼里面的onDraw方法,不應(yīng)該在那里調(diào)用。

Layout Inspector

工具打開方式

  • 在連接的設(shè)備或模擬器上運行應(yīng)用;
  • 點擊 Tools > Android > Layout Inspector;
  • 在出現(xiàn)的 Choose Process 對話框中,選擇想要檢查的應(yīng)用進(jìn)程,然后點擊 OK


    在這里插入圖片描述

工具的使用

布局檢查器會捕獲快照,將它保存為 .li 文件并打開。如圖所示,布局檢查器將顯示以下內(nèi)容:

  • View Tree:視圖在布局中的層次結(jié)構(gòu)。
  • Screenshot:帶每個視圖可視邊界的設(shè)備屏幕截圖。
  • Properties Table:選定視圖的布局屬性。


    在這里插入圖片描述

如果布局包括重疊視圖,則默認(rèn)情況下,只有前面的視圖可以在屏幕截圖中點擊。 要讓后面的視圖可以在屏幕截圖中點擊,請執(zhí)行以下操作:

在 View Tree 中右鍵點擊前面的視圖,然后取消選中 Show in preview。 此操作不會讓視圖內(nèi)容消失;僅會讓屏幕截圖中的可點擊邊界消失,以便可以點擊在它后面的視圖。

如果設(shè)備上的布局發(fā)生變化,布局檢查器不會更新。 必須再次點擊 Tools > Android > Layout Inspector,創(chuàng)建一個新的快照。每一個快照都將保存到 project-name/captures/ 內(nèi)一個單獨的 .li 文件中。

結(jié)論

Hierarchy Viewer雖然已經(jīng)廢棄了,但實際應(yīng)用中還是不能放棄的,相比較而言,Layout Inspector看布局的層級較為輕松,但Hierarchy Viewer看布局的繪制時間更為輕松,兩者相結(jié)合,對布局的檢測優(yōu)化更為輕松,所以自我感覺兩者都不能放棄。

具體如何進(jìn)行優(yōu)化,以及一些優(yōu)化的建議,請聽下回分解~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容