Android Studio の Layout Inspector を使用すると、ビュー階層を表示して、各ビューのプロパティを検査し、アプリのレイアウトをデバッグできます。Layout Inspector では、アプリ レイアウトとデザイン モックアップの比較、アプリの拡大表示または 3D ビューの表示、ランタイムでのレイアウトの詳細な検証が可能になります。レイアウトを全面的に XML で指定するのではなく、ランタイムに構築するように設定しており、レイアウトが想定どおりに機能しない場合に、Layout Inspector は特に便利です。
Layout Validation を使用すると、変更可能なフォントサイズやユーザー言語など、各種のデバイスと表示設定上でレイアウトを同時にプレビューできるため、さまざまなレイアウトの一般的な問題を簡単にテストできます。
Layout Inspector を開くには、接続されたデバイスまたはエミュレータでアプリを実行し、[Tools] > [Layout Inspector] を選択します。
図 1. Sunflower サンプルアプリの Layout Inspector のスナップショット。Layout Inspector では、左から右にコンポーネント ツリー、レイアウト表示、属性が表示されます。
- コンポーネント ツリー: レイアウト内のビューの階層。
- レイアウト表示: デバイスまたはエミュレータで表示される際のアプリ レイアウトのレンダリング。各ビューのレイアウト境界も表示されます。
- 属性: 選択したビューのレイアウト属性。Layout Inspector で属性にアクセスするには、アクティビティの再起動が必要です。詳細については、アクティビティの再起動をご覧ください。
Layout Editor の詳細については、Layout Editor の概要をご覧ください。
リアルタイムの更新情報
レイアウト表示では、デバイスまたはエミュレータで表示される際のアプリ レイアウトをレンダリングし、各ビューのレイアウト境界を表示します。各コンポーネントをクリックすると、詳細を確認できます。
Live Layout Inspector は、API レベル 29 以上を実行するデバイスまたはエミュレータにデプロイされたアプリの UI を、リアルタイムで詳しく分析します。
Live Layout Inspector を有効にするには、[Layout Inspector] ツールバーから [Live Updates] 
オプションを選択します。
Live Layout Inspector には動的なレイアウト階層機能が組み込まれており、デバイス上のビューが変更されると、コンポーネント ツリーとレイアウト表示が更新されます。
ビューを選択または分離する
ビューは通常、ユーザーが閲覧でき、操作できるものを表示します。コンポーネント ツリーには、アプリの階層と各ビューのコンポーネントがリアルタイムで表示されます。アプリ内の要素とそれに関連する値を可視化できるため、アプリのレイアウトをデバッグする際に便利です。
ビューを選択するには、[Component Tree] または [Layout Display] でそのビューをクリックします。選択したビューのすべてのレイアウト属性が [Attributes] パネルに表示されます。
レイアウトで複数のビューが重なっている場合に、前面にないビューを選択するには、[Component Tree] でビューをクリックするか、レイアウトを回転します。
複雑なレイアウトの場合には、個々のビューを分離し、レイアウトのサブセットのみコンポーネント ツリーに表示して、レイアウト表示にレンダリングできます。
図 2. ビューを分離するには、[Component Tree] でそのビューを右クリックし、[Show Only Subtree] または [Show Only Parents] を選択します。
全体表示に戻るには、そのビューを右クリックして [Show All] を選択します。
レイアウト境界とビューラベルを非表示にする
レイアウト要素の境界ボックスとビューラベルを非表示にするには、[Layout Display] の上にある [View Options] アイコン 
をクリックし、[Show Borders] または [Show View Label] を切り替えます。
図 3. レイアウト境界とビューラベルを非表示にするには、[Layout Inspector] ツールバーの 2 つ目の [View Options] をクリックします。
3D モード
レイアウト表示には、ランタイム時のアプリのビュー階層を高度な 3D で視覚化する機能があります。この機能を使用するには、[Live Layout Inspector] ウィンドウで [3D Mode] ボタン 
をクリックし、マウスをドラッグして回転させます。
図 4. レイアウトを回転した 3D ビュー。
図 5. レイアウトのレイヤを拡大または縮小するには、[Layer Spacing] スライダーを使用します。
アプリ レイアウトと参照イメージ オーバーレイを比較する
アプリ レイアウトと UI モックアップなどの参照イメージを比較するには、Layout Inspector でビットマップ イメージ オーバーレイを読み込みます。
- オーバーレイを読み込むには、[Layout Inspector] ツールバーから [Load Overlay]
オプションを選択します。オーバーレイはレイアウトに合わせて拡大または縮小されます。 - オーバーレイの透明度を調整するには、[Overlay Alpha] スライダーを使用します。
- オーバーレイを削除するには、[Clear Overlay]
をクリックします。
Layout Validation
Layout Validation は、さまざまなデバイスや表示設定のレイアウトを同時にプレビューするビジュアル ツールであり、プロセスの早期にレイアウトの問題を把握できます。この機能にアクセスするには、IDE ウィンドウの右上にある [Layout Validation] タブをクリックします。
図 6. Layout Validation タブ。
使用可能な設定セット間を切り替えるには、[Layout Validation] ウィンドウの上部にある [Reference Devices] プルダウンから次のいずれかを選択します。
- 参照デバイス
- カスタム
- 色覚特性
- Font Sizes（フォントサイズ）
図 7. 参照デバイス プルダウン メニュー オプション。
参照デバイス
参照デバイスとは、テスト対象として推奨される一連のデバイスのことです。スマートフォン、折りたたみ式、タブレット、パソコン用のインターフェースが含まれます。この一連の参照デバイスでレイアウトがどのように表示されるかをプレビューする必要があります。
図 8. Layout Validation ツールの参照デバイスのプレビュー。
カスタム
プレビューする表示設定をカスタマイズするには、言語、デバイス、画面の向きなど、各種設定を選択します。
図 9. Layout Validation ツールでのカスタム表示設定。
色覚特性
色覚特性のあるユーザー向けにアプリをより使いやすくするために、一般的な色覚特性をシミュレートしてレイアウトを検証します。
図 10. Layout Validation ツールで色覚特性をシミュレートしたプレビュー。
フォントサイズ
さまざまなフォントサイズでレイアウトを検証し、大きなフォントでレイアウトをテストすることで、視覚障がいのユーザー向けにアプリのユーザー補助を改善します。
図 11. Layout Validation ツールでのさまざまなフォントサイズのプレビュー。
レイアウト階層のスナップショットをキャプチャする
Layout Inspector を使用すると、実行中のアプリのレイアウト階層のスナップショットを保存できるので、他のユーザーと簡単に共有したり、後で参照したりできます。
スナップショットには、Layout Inspector の使用時に通常表示されるデータが保存されます。たとえば、レイアウトの詳細な 3D レンダリングや、View レイアウト、Compose レイアウト、ハイブリッド レイアウトのコンポーネント ツリー、UI の各コンポーネントの詳細な属性などです。スナップショットを保存する手順は次のとおりです。
- Layout Inspector を開きます。
- Layout Inspector がアプリプロセスに自動で接続されます。接続されない場合は、プルダウン メニューからアプリプロセスを選択します。
- スナップショットをキャプチャする際は、Layout Inspector ツールバーのスナップショットのエクスポート ボタン
をクリックします。 - 表示されるシステム ダイアログで、スナップショットの名前と保存する場所を指定します。必ず拡張子
*.liを付けてファイルを保存してください。
メイン メニューバーで [File] > [Open] を選択し、*.li ファイルを開くと、Layout Inspector のスナップショットを読み込めます。
図 12. Layout Inspector でのスナップショットのキャプチャ。
Compose を確認する
Layout Inspector を使用すると、エミュレータまたは実機で実行中のアプリの Compose レイアウトを確認できます。Layout Inspector では、コンポーザブルが再コンポーズまたはスキップされる頻度を確認できるため、アプリに関する問題の特定に役立ちます。たとえば、コーディング エラーによって UI が過度に再コンポーズされ、結果としてパフォーマンスの低下につながる場合があります。また、コーディング エラーによって UI が再コンポーズできなくなり、UI の変更が画面に表示されないことがあります。
Layout Inspector での Compose 再コンポーズ回数
Compose レイアウトをデバッグするときには、UI が正しく実装されていることを確認するために、コンポーザブルの再コンポーズのタイミングを把握することが重要です。たとえば、頻繁に再コンポーズが行われている場合、アプリが必要以上の処理を行っている可能性があります。一方、想定どおりに再コンポーズしていないコンポーネントは、予期しない動作が発生する可能性があります。
Layout Inspector を使用すると、レイアウト階層内の個々のコンポーザブルが再コンポーズまたはスキップしたタイミングを確認できます。この情報はアプリの操作中に、リアルタイムで表示されます。
この機能を使用するにはまず、アプリで API レベル 29 以上と Compose 1.2.0-alpha03 以上を使用していることを確認します。その後、通常どおりにアプリをデプロイします。
図 13. Layout Inspector のコンポジションとスキップ カウンタ。
[Layout Inspector] ウィンドウを開き、アプリプロセスに接続します。[Component Tree] には、レイアウト階層の横に 2 つの列が表示されます。最初の列には各ノードのコンポジション回数が表示され、2 番目の列には各ノードのスキップ回数が表示されます。コンポーザブル ノードを選択すると、コンポーザブルのディメンションとパラメータが表示されます。ただし、インライン関数の場合、パラメータは表示されません。[Component Tree] または [Layout Display] からコンポーザブルを選択すると、[Attributes] ペインにも同様の情報が表示されます。
カウントをリセットすることによって、アプリでの特定の操作中の再コンポジションまたはスキップが把握できます。カウントをリセットするには、[Component Tree] ペインの上部にある [Reset] をクリックします。
図 14. Layout Inspector でのコンポジションとスキップ カウンタの有効化。
Compose のセマンティクス
Compose では、セマンティクスによって、ユーザー補助サービスとテスト フレームワークが認識しやすい別の方法で UI が記述されます。Layout Inspector を使用すると、Compose レイアウト内のセマンティック情報を検査できます。
図 15. Layout Inspector を使用して表示したセマンティック情報。
Compose ノードを選択するときに、[Attributes] ペインを使用して、ノードがセマンティック情報を直接宣言しているか、子のセマンティクスを結合しているか、その両方かを確認します。宣言しているか結合しているかにかかわらず、セマンティクスを含むノードをすばやく調べるには、[Component Tree] ペインで [View options] プルダウンを選択し、[Highlight Semantics Layers] を選択します。これにより、ツリー内のセマンティクスを含むノードのみがハイライト表示され、キーボードを使用してそのノード間をすばやく移動できます。
アクティビティの再起動を回避する
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] チェックボックスをオンにします。
図 16. 実行 / デバッグ構成の自動更新の有効化。
または、デバイスの開発者向けオプションを有効にして、デバイスのデベロッパー向けの設定から [表示属性検査を有効にする] をオンにします。