Google的零容忍
hierarchy viewer：布局層級查看工具，已廢棄……
Pixel Perfect：布局性能查看工具，已廢棄……
工具都廢棄了……還有什么工具可以查看布局層次結構呢？（View樹結構）
工具主角：Layout Inspector
1、工具在哪？
Layout Inspector集成在Android Studio中，請安裝Android Studio
2、支持查看布局性能不？
Layout Inspector目前不支持查看布局性能！（對應版本：Android Studio 4.0.1）
3、如何應對經常廢棄的工具？（重要的事情：說三遍）
Google提供的工具隨時可能因為不爽就廢棄……今天的你剛學會Layout Inspector，可能明天它就廢棄了…你覺得苦不苦B呢？所以學習工具的同時，必須同時學習工具相關的理論！！
Google提供的工具隨時可能因為不爽就廢棄……今天的你剛學會Layout Inspector，可能明天它就廢棄了…你覺得苦不苦B呢？所以學習工具的同時，必須同時學習工具相關的理論！！
Google提供的工具隨時可能因為不爽就廢棄……今天的你剛學會Layout Inspector，可能明天它就廢棄了…你覺得苦不苦B呢？所以學習工具的同時，必須同時學習工具相關的理論！！
如何開啟Layout Inspector
1、打開Android Studio
2、已連接真機或模擬器
3、運行你的Debug App
（注意事項：App必須為Debug Version，App進程必須處於存活狀態）
image
4、點擊Android Studio頂部菜單欄的 Tools > Layout Inspector
image
5、Layout Inspector窗口中選擇設備與已經運行的Debug進程
image
6、成功啟動Layout Inspector后的窗口截圖
image
窗口組成介紹
Layout Inspector由3個子窗口組成，從左到右，依次介紹一下……
Component Tree窗口（最左側）
image
位於最左側的就是Component Tree窗口，此窗口提供以下功能
1、Component Tree窗口可用於查看整個View樹
2、Component Tree窗口可用於切換View樹，當同時打開多個Activity時，可以指定查看哪一個View樹
3、Component Tree窗口可用於選中View樹中的某一個控件，被選中的控件屬性信息會在Attrsibutes窗口中展示
通用窗口（居中）
image
位於中間的為通用窗口（屏幕截圖窗口，沒找到合適的名字），此窗口提供這些功能
1、選擇設備與進程
2、設置設備實時截圖的選項
3、提供Overlay功能，可覆蓋一張透明的設計圖與實際的截圖進行對比
image
4、更新當前屏幕截圖功能
image
5、勾選按鈕后，手機上的畫面將隨着實時更新，注意：此時的手機畫面流暢度會下降
image
6、屏幕截圖操作，放大、縮小、拖拽，注意其中一個正方形的功能，在API 29的設備上才可使用
image
image
Attributes窗口（最右側）
image
位於最右側Attributes窗口，提供以下功能
1、展示控件的屬性信息
2、控件所在View樹的布局信息
3、控件相對屏幕的屬性信息
4、支持搜索某個屬性
image
image
Layout Inspector使用場景
使用場景1：查看動態添加的View
控件是在代碼中動態添加的，你很關心動態生成的控件在View樹中的位置結構是否合理？那就使用Layout Inspector吧！
使用場景2：插樁測試定位控件
編寫Android App的插樁測試項目，需要查看控件的Id屬性或者其它可以用於定位控件的屬性
使用場景3：原型對比
使用當前布局的結構圖與設計師的原型圖進行對比，檢查實際開發圖與設計圖的差別
使用場景4：學習View樹結構
需要學習Android的控件原理，通過查看當前Window實際的View樹結構是什么樣的？看看頂級View是否為DecorView
使用場景5：查看競品布局
查看競爭對手的App的界面是如何實現的（必須Root設備或模擬器），因為競品與你的需求是相似的，通過參考競品的App的View樹結構，將非常有利於提高自己的開發速度，斗膽猜測這是Google故意提供的功能，開發者們越快開發出App，越利於Android生態的建設！（注意：必須Root手機或者模擬器才可查看Release版本的App，日常情況下只能查看Debug版本的App）
使用場景6：復雜布局Debug
明明寫好的界面，為什么那里有個空白的bug？當某個頁面很復雜，又出現莫名其妙的bug時，別着急，先用Layout Inspector工具看下View樹結構，再來修改bug也不遲……
如何選中一個View
屬性表窗口中展示選中的控件的所有屬性
1、Component Tree窗口下，點擊任意一個View，即選中一個View
image
2、屏幕截圖窗口下，點擊任意一個View，即可選中一個View
image
3、重疊的View如何選中
如果布局中包含重疊的View，只能在View樹窗口中選擇對應的控件
隔離View功能
1、在View樹窗口右鍵選中只展示子View
image
2、在屏幕截圖窗口，對着選中的View，選中只展示子樹
image
3、另外在View樹窗口與屏幕截圖窗口也可以右鍵選中只展示父View
image
控制布局邊界顯示選項
image
勾選Show Borders選項，屏幕截圖中的View邊界會
1、隱藏
或者
2、顯示
控制控件類型信息顯示選項
image
image
勾選Show View Label后，可以控制在屏幕截圖中選中View后展示的View的類型信息
放大與縮小功能
要放大屏幕截圖，請點擊 Zoom In 圖標
要縮小屏幕截圖，請點擊 Zoom Out 圖標
image
實際布局與設計圖比較功能
1、要將應用布局與參考圖像進行比較，可以在布局檢查器中加載一個位圖圖像作為疊加層
請點擊布局檢查器頂部的 Load Overlay 圖標，然后選中一張設計圖，疊加層將會縮放以適合當前布局
image
要調整疊加層的透明度，請使用 Alpha 滑塊
image
要移除疊加層，請點擊 Clear Overlay 圖標
image
Android Studio4.0.1版本截圖
image
當前頁面改變，手動刷新並獲取新的屏幕截圖
image
Android Studio 4.0.1版本的Layout Inspector（再次介紹）
在Android Studio 4.0.1版本中，Layout Inspector工具進行了重大更新（坑爹），工具窗口相對舊版本發生變化，很多功能的操作也改變了，還有一部分功能直接廢棄了……
新的窗口布局
image
從左側到右側共計3個子窗口
第一個窗口：Component Tree窗口
第二個窗口：屏幕截圖窗口
第三個窗口：控件信息窗口
功能區
1、選擇debug應用的位置
選擇已運行的debug應用，集成在窗口中（舊版本是個對話框）
image
2、多個Activity的View樹呈現在列表中（舊版是個選中Activity的對話框）
最下方的View樹是當前屏幕的Activity
image
3、查看屏幕控件的全局選項固定為兩個
image
4、View隔離功能，集成在屏幕窗口中、以及View樹窗口中，使用右鍵彈出選項
image
image
5、刷新當前屏幕的View樹功能按鈕
image
6、控件信息窗口展示的信息更全面
image
7、最亮點的功能按鈕，我沒用……電腦配置太差
image
image
最亮點的功能需要配置-Layout Inspector Image Server
image
1、首先打開SDK Manager安裝Layout Inspector的image server
2、必須是API 29-30之間的設備
3、我們來看下這個牛X的功能，未完，待續！
總結
1、Layout Inspector是用於在Android平台查看View樹層級的好工具……
2、缺點：Layout Inspector無法查看布局性能
3、缺點：日常只能查看正在運行的debug App，想看競品release App的布局，官方建議使用root手機或者模擬器設備
4、缺點：Layout Inspector工具更新太快了………………我就艹了…………