Pixel Perfect!

Pixel Perfect 已弃用。从 Android Studio 3.1 开始,您应改用布局检查器来比较应用布局与设计模型、显示应用的放大视图,以及检查应用布局的细节。

Pixel Perfect 是 Android Device Monitor 中内置的一种工具,可以显示应用的放大视图,以便您检查布局中各个像素的位置和属性,而且可以帮助您使应用布局与设计模型相匹配。

启动 Pixel Perfect

图 1. Android Device Monitor

  1. 将设备连接到计算机。如果设备上显示对话框提示您允许 USB 调试吗?,请点按确定
  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(右侧):此窗格显示设备屏幕。

    此窗格中的十字光标对应于“Pixel Perfect Loupe”窗格中的十字光标。

    在“View Object”窗格中选择的视图也会在此窗格中以红色粗体线条框出。同级和父级视图采用浅红色框。

    布局框的内部或外部可能有其他矩形,每个矩形表示视图的一部分。紫色或绿色矩形表示视图边界框。布局框内部的白色或黑色框表示视图内边距。外部的白色或黑色矩形表示外边距。如果布局背景为黑色,内边距和外边距框将为白色,反之亦然。

    您可以通过点击窗口顶部的 Save as PNG 保存屏幕截图。

图 2. “Pixel Perfect”窗口

默认情况下,屏幕上的界面发生变化时,这些窗格不会刷新。如需启用自动刷新,请启用窗口顶部的 Auto Refresh,然后使用“Pixel Perfect Loupe”窗格底部的 Refresh Rate 滑块设置刷新频率。

另外,您也可以手动刷新“Pixel Perfect”窗格和“Pixel Perfect Loupe”窗格,只需点击窗口顶部的 Refresh Screenshot 即可。您可能还需要刷新“View Object”窗格,只需点击窗口顶部的 Refresh Tree 即可。

添加叠加图像

在“Pixel Perfect”窗口中,您可以加载位图作为叠加层,从而将应用布局与模型图像相匹配。

如需将位图图像用作叠加层,请按以下步骤操作:

  • 在“Pixel Perfect”窗口顶部,点击 Load Overlay,然后选择您的图像。
  • Pixel Perfect 会在“Pixel Perfect”窗格中的屏幕上面显示叠加层。位图图像的左下角(X=0, Y=最大值)固定在屏幕的最左下方像素处(X=0, Y=最大屏幕值)。

    默认情况下,叠加层的透明度为 50%。您可以使用“Pixel Perfect Loupe”窗格底部的 Overlay 滑块对其进行调整。

    此外,默认情况下,叠加层不会显示在“Pixel Perfect Loupe”窗格中。如需显示叠加层,请设置窗口顶部的 Show in Loupe