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

Android Studio の Layout Inspector を使用すると、エミュレータまたは実機で実行中のアプリ内のレイアウトを検査してデバッグできます。各コンポーネントの属性を検査したり、アプリ レイアウトとデザイン モックアップを比較したり、アプリの拡大表示を行ったりできます。

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

詳細については、Compose UI をデバッグするをご覧ください。

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

始める

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

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

  • ビュー階層を表示して、各コンポーネントの属性を検査するには、[Component Tree] と [Attributes] ツール ウィンドウを使用します。Layout Inspector で属性にアクセスするには、アクティビティの再起動が必要になる場合があります。
  • コンポーネントを選択するには、まず [Toggle Deep Inspect] Deep Inspect の切り替えボタン を有効にしてから、コンポーネントをクリックします。または、コンポーネントをダブルクリックしてコードに移動します。
  • アプリを操作するには、[Toggle Deep Inspect] Deep Inspect の切り替えボタン を無効にします。
  • 実機を検査するには、デバイスのミラーリングを有効にします。
  • アプリの UI を更新する際にライブ アップデートを有効にするには、[ライブ編集] が有効になっていることを確認します。

コンポーネントを選択または分離する

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

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

レイアウトに重なり合うコンポーネントが含まれている場合、詳細検査モード Deep Inspect の切り替えボタン で右クリックすると、領域内のすべてのコンポーネントを確認できます。前面にないコンポーネントを選択するには、[Component Tree] でそのコンポーネントをクリックします。

複雑なレイアウトの場合には、個々のコンポーネントを分離し、レイアウトのサブセットのみコンポーネント ツリーに表示して、レイアウト表示にレンダリングできます。コンポーネントを分離するには、[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 の使用時に通常表示されるデータがキャプチャされます。たとえば、レイアウトの詳細なレンダリングや、Compose レイアウト、View レイアウト、ハイブリッド レイアウトのコンポーネント ツリー、UI の各コンポーネントの詳細な属性などです。スナップショットを保存するには、[スナップショットのエクスポート/インポート] スナップショットのエクスポート/インポート、[スナップショットのエクスポート] の順にクリックします。

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

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

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

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

スタンドアロンの Layout Inspector

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

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

参考情報

コンテンツの閲覧