Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

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] をクリックしてください。

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

  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] をオンにします。