Pixel Perfect!

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

Pixel Perfect 已淘汰。從 Android Studio 3.1 開始,請改用版面配置檢查器來比對應用程式版面配置與設計模擬圖,顯示應用程式的放大檢視畫面,以及檢查版面配置的細節。

Pixel Perfect 是 Android Device Monitor 的內建工具,可顯示應用程式的放大檢視畫面,方便您檢查版面配置中個別像素的位置和屬性,並協助讓應用程式的版面配置符合設計模擬圖的樣貌。

啟動 Pixel Perfect

圖 1. Android 裝置監視器

  1. 將裝置連接到電腦。如果裝置顯示對話方塊,詢問是否「Allow USB debugging?」,請輕觸「OK」
  2. 在 Android Studio 中開啟專案,並在裝置上建構及執行該專案。
  3. 啟動 Android Device Monitor。Android Studio 可能會顯示「Disable adb integration」對話方塊,這是因為一次只有一個程序可透過 ADB 連接至裝置,並且 Android Device Monitor 正在要求建立連線時。這時請按一下「Yes」

    圖 1 呈現 Android Device Monitor 最初的顯示畫面。

  4. 在選單列中,依序選取「Window」>「Open Perspective」,然後按一下「Pixel Perfect」
  5. 在左側的「Windows」分頁標籤中,按兩下裝置名稱。系統會在窗格中顯示裝置的螢幕畫面,並切換至「Pixel Perfect Tree」分頁標籤。

熟悉工具的使用方式

您應該會看到以下三個窗格:

  • View Object (左):這是螢幕上顯示的 View 物件 (包含系統擁有的物件) 階層清單。當您點選某個檢視畫面時,右側的「Pixel Perfect」窗格中會醒目顯示該檢視畫面的位置。
  • Pixel Perfect Loupe (中):這是放大的螢幕畫面,上面疊加了格線,其中每個正方形代表一個像素。如要查看某個像素的資訊,請點選對應的方格。其色彩資訊和 X/Y 座標會顯示在窗格的底部。

    窗格中的十字瞄準線會對應至「Pixel Perfect」窗格 (右) 中十字瞄準線的位置。

    如要縮放,請使用窗格底部的「Zoom」滑桿,或使用滑鼠滾輪。

  • Pixel Perfect (右):這裡會顯示裝置的螢幕畫面。

    這個窗格中的十字瞄準線會對應至「Loupe」窗格中的十字瞄準線。

    「View Object」窗格中所選的檢視畫面也會以紅色粗體外框標示,同級和上層檢視畫面則會有淺紅色方框。

    版面配置方塊的內部或外部都可能會有其他矩形,而每個矩形都代表檢視畫面的一部分。紫色或綠色矩形代表檢視畫面的定界框。版面配置方塊內的白色或黑色方塊代表檢視畫面的邊框間距,外框為白色或黑色的矩形則代表邊界。如果版面配置背景為黑色,邊框間距和邊界方塊就是白色,反之亦然。

    如要儲存螢幕截圖,請按一下視窗頂端的「Save as PNG」

圖 2. Pixel Perfect 視窗

根據預設,當螢幕上的 UI 變更時,這些窗格都不會重新整理。如要啟用自動重新整理功能,請啟用視窗頂端的「Auto Refresh」,然後使用「Loupe」窗格底部的「Refresh Rate」滑桿來設定重新整理頻率。

或者,您也可以按一下視窗頂端的「Refresh Screenshot」,手動重新整理「Pixel Perfect」窗格和「Loupe」窗格。您可能還需要按一下視窗頂端的「Refresh Tree」來重新整理「View Object」窗格。

新增重疊圖像

您可以在 Pixel Perfect 視窗中載入點陣圖做為重疊圖層,方便您比對應用程式版面配置與模擬圖像的差異。

如要使用點陣圖圖片做為重疊圖層,請按照下列步驟操作:

  • 在 Pixel Perfect 頂端,按一下「Load Overlay」並選取圖片。
  • Pixel Perfect 會在「Pixel Perfect」窗格的畫面上顯示重疊圖層。點陣圖圖片的左下角 (X=0、Y=最大值) 會固定在螢幕最左側的下方 (X=0, Y=螢幕的最大值)。

    重疊圖層的預設透明度為 50%。如要調整這項設定,請使用「Loupe」窗格底部的「Overlay」滑桿。

    此外,在預設情況下,重疊圖層也不會顯示在「Loupe」窗格中。如要顯示,請在視窗頂端的「Show in Loupe」進行設定。