Android Studio の Layout Inspector を使用すると、アプリ レイアウトをデザイン モックアップと比較したり、アプリを拡大表示したり、実行時のレイアウトを詳細に検証したりすることができます。レイアウトを全面的に XML で指定するのではなく、実行時に形成するように設定していて、レイアウトが想定どおりに機能しない場合に、Layout Inspector は役立ちます。
Layout Inspector の機能の多くは、以前は Hierarchy Viewer ツールや Pixel Perfect ツールによって提供されていましたが、どちらのツールもサポートが終了しています。
Layout Inspector を開く
Layout Inspector を開くには:
- 接続しているデバイスまたはエミュレータでアプリを実行します。
- [Tools] > [Layout Inspector] をクリックします。
[Choose Process] ダイアログが表示されたら、検査対象のアプリプロセスを選択して、[OK] をクリックします。
図 1. [Choose Process] ダイアログ
デフォルトでは、Android Studio 内で現在開いているプロジェクトのプロセスのうち、デバイスやエミュレータ上で実行中のプロセスだけが、[Choose Process] ダイアログにリスト表示されます。 デバイス上の別のアプリを検査する場合は、[Show all processes] チェックボックスをオンにします。ルート権限取得済みのデバイスや、Google Play ストアが入っていないエミュレータを使用している場合は、実行中のアプリがすべて表示されます。そうでない場合は、デバッグ可能な実行中のアプリだけが表示されます。
Layout Inspector では、スナップショットをキャプチャして .li ファイルとして保存し、そのファイルを開くことができます。
図 2 のように、Layout Inspector には次の内容が表示されます。
- ビューツリー: レイアウト内のビューの階層。
- Layout Inspector ツールバー: Layout Inspector の各種ツール。
- スクリーンショット: デバイス上に表示されているとおりのアプリ レイアウトのスクリーンショット。各ビューのレイアウト境界が表示されます。
- プロパティ テーブル: 選択したビューのレイアウト プロパティ。
図 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 ファイルをダブルクリックすると、以前のスクリーンショットを再読み込みできます。