Pixel Perfect

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Pixel Perfect はサポートが終了しています。Android Studio 3.1 以降でアプリ レイアウトをデザイン モックアップと比較する、アプリを拡大表示する、および実行時のレイアウトを詳細に検証するには、代わりに Layout Inspector を使用する必要があります。

Pixel Perfect は Android Device Monitor に組み込まれているツールであり、アプリを拡大表示してレイアウト内の個々のピクセルの位置やプロパティを調べたり、アプリ レイアウトをデザイン モックアップと比較したりするのに便利です。

Pixel Perfect を使い始める

図 1. Android Device Monitor

  1. デバイスをパソコンに接続します。デバイス上に [USB デバッグを許可しますか？] と尋ねるダイアログが表示されたら、[OK] をタップします。
  2. Android Studio 内でプロジェクトを開き、デバイス上でビルドして実行します。
  3. Android Device Monitor を起動します。adb 経由でデバイスに接続できるのは同時に 1 つのプロセスだけに限られます。そのため、Android Device Monitor が接続をリクエストすると、Android Studio 内に [Disable adb integration] ダイアログが表示される場合があります。その場合は、[Yes] をクリックしてください。

    Android Device Monitor に最初に表示される画面を図 1 に示します。

  4. メニューバーで [Window] > [Open Perspective] を選択して、[Pixel Perfect] をクリックします。
  5. 左側の [Windows] タブでデバイス名をダブルクリックします。これにより、ペインにデバイスの画面が表示され、[Pixel Perfect Tree] タブに切り替わります。

ツールに慣れる

次の 3 つのペインが表示されます。

  • View Object（左）: 画面に表示される View オブジェクトの階層リストで、システムのオブジェクトも含まれます。ビューをクリックすると、その位置が右側の Pixel Perfect ペインでハイライト表示されます。
  • Pixel Perfect Loupe（中央）: 拡大された画面イメージです。各正方形が 1 つのピクセルを表すグリッドでオーバーレイされています。ピクセルの情報を見るには、正方形をクリックします。ピクセルの色情報と 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 ペインを手動更新することもできます。また、View Object ペインの更新が必要な場合は、ウィンドウ上部の [Refresh Tree] をクリックします。

オーバーレイ画像を追加する

Pixel Perfect ウィンドウには、ビットマップをオーバーレイとして読み込めるため、これを利用してアプリのレイアウトをモックアップ画像と比較できます。

ビットマップ画像をオーバーレイとして使用するには、次の手順を行います。

  • Pixel Perfect 上部の [Load Overlay] をクリックし、画像を選択します。
  • Pixel Perfect ペインの画面上にオーバーレイが表示されます。ビットマップ画像の左下隅（X=0、Y= 最大値）は、Pixel Perfect ペインの画面の左下隅のピクセル（X=0、Y= 画面の高さ）に固定されています。

    デフォルトでは、オーバーレイの透明度は 50% です。 透明度は、Loupe ペインの下部にある [Overlay] スライダーで調整できます。

    また、デフォルトでは、オーバーレイは Loupe ペインに表示されません。オーバーレイを表示するには、ウィンドウの上部にある [Show in Loupe] をオンにします。