[Trace Code] 02-使用Layout Inspector尋找當前所在Layout

發表於 更新於 閱讀次數：

情境

  • 可以快速找到顯示錯誤資訊的元件，進而查詢錯誤原因。
  • 確認元件當前的 Attribute，例如：textSize, textColor, background, visibility…等。

在Android開發中，有時我們會遇到畫面上某些元件未如預期顯示的問題。例如，一個應該顯示文字的TextView突然消失了。這時，我們該如何診斷問題呢？

我製作了一個範例，其中應該顯示三個TextView，但實際上一個都看不到。在不偷看 Layout 程式碼的狀況下，試試你能找出問題嗎？

GitHub: https://github.com/dreambo4/LayoutInspectorDemo

工具介紹

Layout Inspector是一個強大的工具，可以即時觀察元件的狀態，若會在程式中動態調整元件狀態，這個功能就很實用。

使用 Layout Inspector 的步驟

  1. 在 Android Studio 的工具列中找到”Running Device”選項。
  2. 連接實體設備或啟動虛擬機。
  3. 在右上角找到並開啟Layout Inspector。

對 Component 連點兩下就就可以快速導航到 Layout，很方便。早期還要另外搜尋 id 再自己尋找對應 Layout，現在已經改進很多了！

Layout Inspector 位置

即使某些元件在畫面上不可見，Layout Inspector仍能顯示它們的當前狀態。

以範例中的三個TextView為例，它們不可見的原因如下：

  1. textView1: 寬度和高度均為0
  2. textView2: 文字顏色與背景顏色相同（白色）
  3. textView3: visibility 屬性設為 invisible

在實際開發中，可能因為 Layout 沒拉好、visibility 控制判斷邏輯有誤，導致元件不可見，這些都是常見原因！

使用 Layout Inspector 觀察 Component

Layout Inspector 的新舊版本比較

舊版的 Layout Inspector 是一個獨立的工具。

新版Layout Inspector已整合到Running Device功能中。但如果你更喜歡舊版的獨立工具，還是可調整設定
Setting > Tools > Layout Inspector > Enable embedded Layout Inspector。

  • 勾選: 在 Running Devices 中使用 Layout Inspector
  • 取消勾選: Layout Inspector 作為獨立工具使用

Layout Inspector Setting

工具優缺

  • 優點
    • 快速定位目標 Layout
    • 即時觀察元件狀態
  • 缺點
    • 需要在debug模式下使用，且需要電腦
    • 在沒有電腦的情況下，可以使用 Android 裝置的「顯示版面配置界限」功能進行簡單測試（這部分將在後續文章中詳細介紹）

參考資料