Android Studio の Layout Inspector を使用すると、各ビューのプロパティを検査できるビュー階層を表示して、アプリのレイアウトをデバッグできます。Layout Inspector を使用すると、アプリ レイアウトとデザイン モックアップを比較したり、アプリの拡大表示や 3D ビューを表示したり、実行時にレイアウトの詳細を確認したりできます。これは、レイアウトを全体的に XML でビルドするのではなく、実行時にレイアウトがビルドされ、レイアウトが予期しない動作をする場合に特に便利です。
始める
Layout Inspector を起動するには、アプリを実行し、[Running Devices] ウィンドウに移動して、[Toggle Layout Inspector] をクリックします。複数のデバイスやプロジェクトを切り替えると、Layout Inspector は、接続されたデバイスのフォアグラウンドで実行されているデバッグ可能なプロセスに自動的に接続します。
一般的なタスクの実行方法は次のとおりです。
- 階層を表示して各ビューのプロパティを検査するには、[Component Tree] と [Attributes] ツール ウィンドウを使用します。Layout Inspector が属性にアクセスするために、アクティビティの再起動が必要になることがあります。詳しくは、アクティビティの再起動を避けるをご覧ください。
- ビューを直接 1 回クリックしてビューを選択するか、ビューをダブルクリックしてコードに移動するには、[Toggle Deep Inspect]
を有効にします。
- アプリを操作するには、[Toggle Deep Inspect]
- 実機を検査するには、デバイスのミラーリングを有効にします。
- アプリの UI を更新するときにライブ アップデートを有効にするには、[ライブ編集] が有効になっていることを確認します。
- 3D モードを使用するには、Layout Inspector のスナップショット
を撮り、[3D モード]
をクリックします。
ビューを選択または分離する
ビューは通常、ユーザーが閲覧でき、操作できるものを表示します。コンポーネント ツリーには、アプリの階層と各ビューのコンポーネントがリアルタイムで表示されます。アプリ内の要素とそれに関連する値を可視化できるため、アプリのレイアウトをデバッグする際に便利です。
ビューを選択するには、[Component Tree] または [Layout Display] でそのビューをクリックします。選択したビューのすべてのレイアウト属性が [Attributes] パネルに表示されます。
レイアウトに重複するビューが含まれている場合、[Deep Inspect] モード で右クリックすると、リージョン内のすべてのビューを表示できます。前面にないビューを選択するには、[Component Tree] 内でそのビューをクリックするか、レイアウトを回転します。
複雑なレイアウトを操作するには、個々のビューを分離すると、レイアウトのサブセットのみがコンポーネント ツリーに表示され、レイアウト表示にレンダリングされます。ビューを分離するには、スナップショット を作成し、[Component Tree] のビューを右クリックして、[Show Only Subtree] または [Show Only Parents] を選択します。フルビューに戻るには、ビューを右クリックして [Show All] を選択します。ビューを分離する前に、スナップショットを取得する必要があります。
レイアウト境界とビューラベルを非表示にする
レイアウト要素の境界ボックスとビューラベルを非表示にするには、[Layout Display] の上にある [View Options] アイコン をクリックし、[Show Borders] または [Show View Label] を切り替えます。
レイアウト階層のスナップショットをキャプチャする
Layout Inspector では、実行中のアプリのレイアウト階層のスナップショットを保存できるため、他のユーザーと共有したり、後で参照したりできます。
スナップショットには、Layout Inspector の使用時に通常表示されるデータがキャプチャされます。たとえば、レイアウトの詳細な 3D レンダリングや、View レイアウト、Compose レイアウト、ハイブリッド レイアウトのコンポーネント ツリー、UI の各コンポーネントの詳細な属性などです。スナップショットを保存するには、[スナップショットのエクスポート/インポート] をクリックし、[スナップショットをエクスポート] をクリックします。
[Import Snapshot] をクリックして、以前に保存した Layout Inspector のスナップショットを読み込みます。
3D モード
レイアウト表示には、実行時にアプリのビュー階層を高度な 3D で可視化する機能があります。この機能を使用するには、スナップショット を撮り、スナップショット インスペクタ ウィンドウの [3D モード] ボタン
をクリックし、マウスをドラッグして回転させます。
アプリ レイアウトと参照イメージ オーバーレイを比較する
アプリ レイアウトと UI モックアップなどの参照イメージを比較するには、Layout Inspector でビットマップ イメージ オーバーレイを読み込みます。
- オーバーレイを読み込むには、[Layout Inspector] ツールバーで [Load Overlay]
オプションを選択します。オーバーレイはレイアウトに合わせて拡大縮小されます。
- オーバーレイの透明度を調整するには、[Overlay Alpha] スライダーを使用します。
- オーバーレイを削除するには、[Clear Overlay]
をクリックします。
Compose を確認する
Layout Inspector を使用すると、エミュレータまたは物理デバイスで実行中のアプリ内の Compose レイアウトを検査できます。Layout Inspector では、コンポーザブルが再コンポーズまたはスキップされる頻度を確認できるため、アプリに関する問題の特定に役立ちます。たとえば、コーディング エラーによって UI が過度に再コンポーズされ、結果としてパフォーマンスの低下につながる場合があります。また、コーディング エラーによって UI が再コンポーズできなくなり、UI の変更が画面に表示されないことがあります。
Layout Inspector の Compose 対応の詳細
アクティビティの再起動を避ける
Layout Inspector が適切に機能するには、次のどちらかの全般設定が必要です。全般設定を指定しなかった場合は、Layout Inspector で自動的に設定されます。
adb shell settings put global debug_view_attributes_application_package <processname>このオプションでは、指定されたプロセスを検査するための追加情報が生成されます。
adb shell settings put global debug_view_attributes 1このオプションでは、デバイス上のすべてのプロセスを検査するための追加情報が生成されます。
全般設定を変更すると、アクティビティが再起動することがあります。アクティビティが再起動しないようにするには、Android Studio で設定を変更するか、デバイスの設定で開発者向けオプションを変更します。
Android Studio で自動更新を有効にするには、メニューから [Run] > [Edit Configurations] を選択し、[Run/Debug Configurations] を開きます。次に [Miscellaneous] タブに移動し、[Layout Inspector Options] の下の [Connect to Layout Inspector without restarting activity] チェックボックスをオンにします。
または、デバイスの開発者向けオプションを有効にして、デバイスのデベロッパー向けの設定から [表示属性検査を有効にする] をオンにします。
スタンドアロン Layout Inspector
最適なパフォーマンスを得るには、Layout Inspector はデフォルトの埋め込みモードで使用することをおすすめします。Layout Inspector の埋め込みを解除するには、[File]（macOS では Android Studio）> [Settings] > [Tools] > [Layout Inspector] に移動し、[Enableembedded Layout Inspector] チェックボックスをオフにします。
スタンドアロン モードでは、[Layout Inspector] ツールバーで [Live Updates] オプションをクリックして、ライブ更新を有効にします。