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

Android Studio の Layout Inspector を使用すると、ビュー階層を表示して、各ビューのプロパティを検査し、アプリのレイアウトをデバッグできます。Layout Inspector では、アプリ レイアウトとデザイン モックアップの比較、アプリの拡大表示または 3D ビューの表示、ランタイムでのレイアウトの詳細な検証が可能になります。レイアウトを全面的に XML で指定するのではなく、ランタイムに構築するように設定しており、レイアウトが想定どおりに機能しない場合に、Layout Inspector は特に便利です。

図 1. Jetchat アプリ用の埋め込みの Layout Inspector。

始める

Layout Inspector を起動するには、アプリを実行し、[Running Devices] ウィンドウに移動して、[Toggle Layout Inspector] 埋め込みの Layout Inspector の切り替えボタン をクリックします。複数のデバイスやプロジェクトの間で切り替えを行うと、Layout Inspector は、接続されたデバイスのフォアグラウンドで実行されているデバッグ可能なプロセスに自動的に接続します。

一般的なタスクの実行方法は次のとおりです。

  • 階層を表示して、各ビューのプロパティを検査するには、[Component Tree] と [Attributes] ツール ウィンドウを使用します。Layout Inspector で属性にアクセスするには、アクティビティの再起動が必要になることがあります。詳細については、属性の検査を表示するをご覧ください。
  • ビューを直接 1 回クリックしてビューを選択するか、ビューをダブルクリックしてコードに移動するには、[Toggle Deep Inspect] Deep Inspect の切り替えボタン を有効にします。
  • アプリを操作するには、[Toggle Deep Inspect] Deep Inspect の切り替えボタン を無効にします。
  • 実機を検査するには、デバイスのミラーリングを有効にします。
  • アプリの UI を更新する際にライブ アップデートを有効にするには、[ライブ編集] が有効になっていることを確認します。
  • 3D モードを使用するには、Layout Inspector のスナップショット Layout Inspector のスナップショット を撮ってから、[3D モード] 3D ボタン をクリックします。

ビューを選択または分離する

ビューは通常、ユーザーが閲覧でき、操作できるものを表示します。コンポーネント ツリーには、アプリの階層と各ビューのコンポーネントがリアルタイムで表示されます。アプリ内の要素とそれに関連する値を可視化できるため、アプリのレイアウトをデバッグする際に便利です。

ビューを選択するには、[Component Tree] または [Layout Display] でそのビューをクリックします。選択したビューのすべてのレイアウト属性が属性パネルに表示されます。

レイアウト内で複数のビューが重なっている部分がある場合、詳細検査モード Deep Inspect の切り替えボタン で右クリックすると、その領域にあるすべてのビューを確認できます。前面にないビューを選択するには、[Component Tree] でビューをクリックするか、レイアウトを回転します。

複雑なレイアウトの場合には、個々のビューを分離し、レイアウトのサブセットのみコンポーネント ツリーに表示して、レイアウト表示にレンダリングできます。ビューを分離するには、スナップショット Layout Inspector のスナップショット を取得し、[Component Tree] で該当ビューを右クリックして、[Show Only Subtree] または [Show Only Parents] を選択します。全体表示に戻るには、そのビューを右クリックして [Show All] を選択します。ビューを分離する前に、スナップショットを作成する必要があります。

レイアウト境界とビューラベルを非表示にする

レイアウト要素の境界ボックスとビューラベルを非表示にするには、[Layout Display] の上にある [View Options] アイコン View Options ボタン をクリックし、[Show Borders] または [Show View Label] を切り替えます。

レイアウト階層のスナップショットをキャプチャする

Layout Inspector を使用すると、実行中のアプリのレイアウト階層のスナップショットを保存できるので、他のユーザーと共有したり、後で参照したりできます。

スナップショットには、Layout Inspector の使用時に通常表示されるデータがキャプチャされます。たとえば、レイアウトの詳細な 3D レンダリングや、View レイアウト、Compose レイアウト、ハイブリッド レイアウトのコンポーネント ツリー、UI の各コンポーネントの詳細な属性などです。スナップショットを保存するには、[スナップショットのエクスポート/インポート] スナップショットのエクスポート/インポート、[スナップショットのエクスポート] の順にクリックします。

[スナップショットをインポート] をクリックして、以前に保存した Layout Inspector スナップショットを読み込みます。

3D モード

レイアウト表示には、ランタイム時のアプリのビュー階層を高度な 3D で視覚化する機能があります。この機能を使用するには、スナップショット スナップショットのエクスポート/インポート を撮り、スナップショット インスペクタ ウィンドウで [3D Mode] ボタン 3D ボタン をクリックし、マウスをドラッグして回転させます。

Layout Inspector: 3D ビュー
図 2. レイアウトを回転した 3D ビュー。
Layout Inspector: Layer Spacing ビュー
図 3. レイアウトのレイヤを拡大または縮小するには、[Layer Spacing] スライダーを使用します。

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

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

  • オーバーレイを読み込むには、[Layout Inspector] ツールバーから [Load Overlay] オプションを選択します。オーバーレイはレイアウトに合わせて拡大または縮小されます。
  • オーバーレイの透明度を調整するには、[Overlay Alpha] スライダーを使用します。
  • オーバーレイを削除するには、[オーバーレイのクリア] をクリックします。

Compose を確認する

Layout Inspector を使用すると、エミュレータまたは物理デバイスで実行中のアプリ内の Compose レイアウトを検査できます。Layout Inspector では、コンポーザブルが再コンポーズまたはスキップされる頻度を確認できるため、アプリに関する問題の特定に役立ちます。たとえば、コーディング エラーによって UI が過度に再コンポーズされ、結果としてパフォーマンスの低下につながる場合があります。また、コーディング エラーによって UI が再コンポーズできなくなり、UI の変更が画面に表示されないことがあります。

Layout Inspector の Compose 対応の詳細

表示属性検査

Layout Inspector が適切に機能するには、次の全般設定が必要です。

adb shell settings put global debug_view_attributes 1

このオプションでは、デバイス上のすべてのプロセスを検査するための追加情報が生成されます。

レイアウト インスペクタは、起動時にこの設定を自動的に有効にします。これにより、現在のフォアグラウンド アクティビティが再起動します。デバイスでフラグを手動で無効にしない限り、アクティビティの再起動は行われません。

フラグを無効にするには、次の adb コマンドを実行します。

adb shell settings delete global debug_view_attributes

または、デバイスの開発者向けオプションから [表示属性検査を有効にする] をオフにします。

スタンドアロンの Layout Inspector

最適なパフォーマンスを得るには、レイアウト インスペクタをデフォルトの埋め込みモードで使用することをおすすめします。Layout Inspector を埋め込まないようにするには、[File](macOS の場合は [Android Studio])> [Settings] > [Tools] > [Layout Inspector] に移動して、[Enable embedded Layout Inspector] チェックボックスをオフにします。

スタンドアロン モードでライブ アップデートを有効にするには、[Layout Inspector] ツールバーから [Live Updates] オプションを選択します。