Layout Inspector を使用してレイアウトをデバッグする

Android Studio の Layout Inspector を使用すると、アプリ レイアウトをデザイン モックアップと比較したり、アプリを拡大表示したり、実行時のレイアウトを詳細に検証したりすることができます。レイアウトを全面的に XML で指定するのではなく、実行時に形成するように設定していて、レイアウトが想定どおりに機能しない場合に、Layout Inspector は役立ちます。

Layout Inspector の機能の多くは、以前は Hierarchy Viewer ツールや Pixel Perfect ツールによって提供されていましたが、どちらのツールもサポートが終了しています。

Layout Inspector を開く

Layout Inspector を開くには:

  1. コネクテッド デバイスやエミュレータ上で、アプリを実行します。
  2. [Tools] > [Layout Inspector] をクリックします。
  3. [Choose Process] ダイアログが表示されたら、検査対象のアプリプロセスを選択して、[OK] をクリックします。

    図 1: [Choose Process] ダイアログ

    デフォルトでは、Android Studio 内で現在開いているプロジェクトのプロセスのうち、デバイスやエミュレータ上で実行中のプロセスだけが、[Choose Process] ダイアログにリスト表示されます。デバイス上の別のアプリを検査する場合は、[Show all processes] チェックボックスをオンにします。ルート権限取得済みのデバイスや、Google Play ストアが入っていないエミュレータを使用している場合は、実行中のアプリがすべて表示されます。そうでない場合は、デバッグ可能な実行中のアプリだけが表示されます。

Layout Inspector は、スナップショットを撮影して .li ファイルとして保存し、そのファイルを開くことができます。

図 2 のように、Layout Inspector には次の内容が表示されます。

  1. ビューツリー: レイアウト内のビューの階層。
  2. Layout Inspector ツールバー: Layout Inspector の各種ツール。
  3. スクリーンショット: デバイス上に表示されているとおりのアプリ レイアウトのスクリーンショット。各ビューのレイアウト境界が表示されます。
  4. プロパティ テーブル: 選択したビューのレイアウト プロパティ。

図 2: Layout Inspector

ビューを選択する

ビューを選択するには、[View Tree] またはスクリーンショット内で、目的のビューをクリックします。選択したビューのすべてのレイアウト属性が [Properties Table] に表示されます。

レイアウト内で複数のビューが重なっている部分がある場合、スクリーンショット上でクリックできるのは、デフォルトでは、前面に表示されているビューだけに限られます。前面にないビューを選択するには、[View Tree] 内で、目的のビューをクリックします。

ビューを分離する

複雑なレイアウトを使用する場合は、各ビューを分離することで、レイアウト内の特定のサブセットだけを [View Tree] 内に表示したり、スクリーンショット内にレンダリングしたりすることができます。

ビューを分離できるのは、デバイスの接続状態が維持されている場合に限られます。ビューを分離するには、Layout Inspector が別のスクリーンショットを撮影できるように、デバイスがレイアウトをレンダリングする必要があります。

ビューを分離するには、次のいずれかを行います。

  • スクリーンショット内のビューをダブルクリックします。
  • [View Tree] 内のビューを右クリックして、[Render Subtree Preview] を選択します。

全体ビューに戻るには、[View Tree] の左上隅にある矢印をクリックします。

レイアウト境界を非表示にする

レイアウト要素の境界ボックスを非表示にするには、[View Tree] 内で要素を右クリックして、[Show layout bounds] チェックボックスをオフにします。

[Show layout bounds] チェックボックスをオフにしたレイアウト要素は、スクリーンショット内でクリックしても選択できません。

ズームイン機能や参照グリッドを使用して、レイアウトを詳細に検証する

Layout Editor ツールバーのボタンを使用すると、スクリーンショットのグリッド オーバーレイやズームレベルを制御できます。

  • スクリーンショットをズームインするには、[Zoom In]()をクリックします。
  • スクリーンショットをズームアウトするには、[Zoom Out]()をクリックします。
  • スクリーンショット内の 1 ピクセルとデバイス上の 1 ピクセルが一致する倍率でレイアウトを表示するには、[Actual Size]()をクリックします。
  • ピクセル グリッドをオーバーレイ表示するには、[Grid]()をクリックします。グリッドは、ズームレベルが高い場合に限り利用できます。

アプリ レイアウトと参照イメージ オーバーレイを比較する

アプリ レイアウトと、UI モックアップなどの参照イメージを比較するには、Layout Inspector 内でビットマップ イメージ オーバーレイをロードします。

  • オーバーレイをロードするには、Layout Inspector の上部にある [Load Overlay]()をクリックします。オーバーレイは、レイアウトに合わせて拡大縮小されます。
  • オーバーレイの透明度を調整するには、[Alpha] スライダーを使用します。
  • オーバーレイを削除するには、[Clear Overlay]()をクリックします。

レイアウトの変更内容を把握するために新しいスクリーンショットを撮影する

デバイス上でレイアウトを変更しても、Layout Inspector が自動的に更新されることはありません。レイアウトの変更内容を把握するには、もう一度 [Tools] > [Layout Inspector] をクリックして、新しいスクリーンショットを作成してください。

各スクリーンショットは、個別の .li ファイルとして project-name/captures/ 内に保存され、新しいタブで開きます。

図 3: [Project] ウィンドウに表示された Layout Inspector スクリーンショット(.li ファイル)

project-name/captures/ 内の .li ファイルをダブルクリックすると、以前のスクリーンショットをリロードできます。