Android Studio 如何調試布局

前面的小節(jié)我們介紹了如何分析堆棧信息，可以有效的幫助我們分析代碼異常，從本小結我們學習如何分析調試布局，可以有效的幫助我們分析界面異常。

1. 布局檢查器

Android Studio 中的布局檢查器即 Layout Inspector。通過 Layout Inspector，我們可以將應用布局與設計模型進行比較、顯示應用的放大視圖以及在運行時檢查應用布局的細節(jié)。如果我們的布局是在運行時（而不是完全在 XML 中）構建的并且布局表現出意外行為，這會更加有效的幫助我們。

Tips：Layout Inspector 中的大部分功能以前是由 Hierarchy Viewer 和 Pixel Perfect 工具提供的，但這些工具現已棄用。

2. 啟動 Layout Inspector

2.1 打開 Layout Inspector

如需打開 Layout Inspector，請執(zhí)行以下操作：

1. 在連接的設備或模擬器上運行需要調試的應用。

2. 依次點擊 Tools > Layout Inspector。
   

3. 在隨即顯示的 Choose Process 對話框中，選擇想要檢查的應用進程，然后點擊 OK。
   

4. 布局檢查器會拍攝快照，將其另存為 .li 文件并打開。

Tips：每個屏幕截圖都保存在 project-name/captures/ 下的一個單獨的 .li 文件中并在一個新標簽頁中打開。

2.2 選擇應用進程

默認情況下，Choose Process 對話框僅列出當前在 Android Studio 中打開且正在設備或模擬器上運行的項目的進程。如果我們想查看所有可調試的應用，請勾選 Show all processes。

如果我們使用的是已取得 root 權限的設備或模擬器，那么我們會看到所有正在運行的應用。

2.3 Layout Inspector 主界面

Layout Inspector 啟動后的主界面如下圖所示：

1. View Tree：布局中視圖的層次結構。

2. Layout Inspector 工具欄：Layout Inspector 的工具。

3. 屏幕截圖：設備上顯示的應用布局的屏幕截圖，其中顯示了每個視圖的布局邊界。

4. Properties Table：選定視圖的布局屬性。

3. 常規(guī)操作

3.1 選擇視圖

要選擇某個視圖，請在 View Tree 或屏幕截圖中點擊該視圖。選定視圖的所有布局屬性都會顯示在 Properties Table 中。

如果我們的布局包含重疊的視圖，則只有前面的視圖可以在屏幕截圖中點擊。要選擇某個不在前面的視圖，請在 View Tree 中點擊該視圖。

3.2 參考網格

我們可以使用 Layout Editor 工具欄中的按鈕控制屏幕截圖的網格疊加層和縮放級別：

• 要放大屏幕截圖，請點擊 Zoom In 圖標。

• 要縮小屏幕截圖，請點擊 Zoom Out 圖標。

• 要按屏幕截圖中的一個像素對應于設備上的一個像素這一放大率來查看布局，請點擊 1:1 圖標 。

• 要疊加像素網格，請點擊 Grid 圖標，網格僅在高縮放級別下可用。

3.3 疊加參考圖像

要將應用布局與參考圖像（如界面模型）進行比較，我們可以在布局檢查器中加載位圖圖像疊加層。

• 要加載疊加層，請點擊布局檢查器頂部的 Load Overlay 圖標。疊加層將會縮放以適合布局。

• 要調整疊加層的透明度，請使用 Alpha 滑塊。

• 要移除疊加層，請點擊 Clear Overlay 圖標。

未疊加參考圖時顯示如下圖：

疊加參考圖后顯示如下圖：

把參考設計圖疊加上后查看，發(fā)現 SWITCH TO USING MEDIASESSION 按鈕的坐標與設計參考圖不符。

4. 小結

本節(jié)課程我們主要學習了如何使用布局檢測器調試布局。本節(jié)課程的重點如下：

• 掌握如何打開布局檢查器；
• 掌握如何查看各視圖的邊界及屬性。