Android Studio 如何調(diào)試布局

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

1. 布局檢查器

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

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

2. 啟動(dòng) Layout Inspector

2.1 打開 Layout Inspector

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

1. 在連接的設(shè)備或模擬器上運(yùn)行需要調(diào)試的應(yīng)用。

2. 依次點(diǎn)擊 Tools > Layout Inspector。
   

3. 在隨即顯示的 Choose Process 對(duì)話框中，選擇想要檢查的應(yīng)用進(jìn)程，然后點(diǎn)擊 OK。
   

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

Tips：每個(gè)屏幕截圖都保存在 project-name/captures/ 下的一個(gè)單獨(dú)的 .li 文件中并在一個(gè)新標(biāo)簽頁中打開。

2.2 選擇應(yīng)用進(jìn)程

默認(rèn)情況下，Choose Process 對(duì)話框僅列出當(dāng)前在 Android Studio 中打開且正在設(shè)備或模擬器上運(yùn)行的項(xiàng)目的進(jìn)程。如果我們想查看所有可調(diào)試的應(yīng)用，請(qǐng)勾選 Show all processes。

如果我們使用的是已取得 root 權(quán)限的設(shè)備或模擬器，那么我們會(huì)看到所有正在運(yùn)行的應(yīng)用。

2.3 Layout Inspector 主界面

Layout Inspector 啟動(dòng)后的主界面如下圖所示：

1. View Tree：布局中視圖的層次結(jié)構(gòu)。

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

3. 屏幕截圖：設(shè)備上顯示的應(yīng)用布局的屏幕截圖，其中顯示了每個(gè)視圖的布局邊界。

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

3. 常規(guī)操作

3.1 選擇視圖

要選擇某個(gè)視圖，請(qǐng)?jiān)?View Tree 或屏幕截圖中點(diǎn)擊該視圖。選定視圖的所有布局屬性都會(huì)顯示在 Properties Table 中。

如果我們的布局包含重疊的視圖，則只有前面的視圖可以在屏幕截圖中點(diǎn)擊。要選擇某個(gè)不在前面的視圖，請(qǐng)?jiān)?View Tree 中點(diǎn)擊該視圖。

3.2 參考網(wǎng)格

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

• 要放大屏幕截圖，請(qǐng)點(diǎn)擊 Zoom In 圖標(biāo)。

• 要縮小屏幕截圖，請(qǐng)點(diǎn)擊 Zoom Out 圖標(biāo)。

• 要按屏幕截圖中的一個(gè)像素對(duì)應(yīng)于設(shè)備上的一個(gè)像素這一放大率來查看布局，請(qǐng)點(diǎn)擊 1:1 圖標(biāo) 。

• 要疊加像素網(wǎng)格，請(qǐng)點(diǎn)擊 Grid 圖標(biāo)，網(wǎng)格僅在高縮放級(jí)別下可用。

3.3 疊加參考圖像

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

• 要加載疊加層，請(qǐng)點(diǎn)擊布局檢查器頂部的 Load Overlay 圖標(biāo)。疊加層將會(huì)縮放以適合布局。

• 要調(diào)整疊加層的透明度，請(qǐng)使用 Alpha 滑塊。

• 要移除疊加層，請(qǐng)點(diǎn)擊 Clear Overlay 圖標(biāo)。

未疊加參考圖時(shí)顯示如下圖：

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

把參考設(shè)計(jì)圖疊加上后查看，發(fā)現(xiàn) SWITCH TO USING MEDIASESSION 按鈕的坐標(biāo)與設(shè)計(jì)參考圖不符。

4. 小結(jié)

本節(jié)課程我們主要學(xué)習(xí)了如何使用布局檢測(cè)器調(diào)試布局。本節(jié)課程的重點(diǎn)如下：

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