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

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

Layout Validation を使用すると、変更可能なフォントサイズやユーザー言語など、各種のデバイスと表示設定上でレイアウトを同時にプレビューできるため、さまざまなレイアウトの一般的な問題を簡単にテストできます。

Layout Inspector を開くには、接続されたデバイスまたはエミュレータでアプリを実行し、[Tools] > [Layout Inspector] を選択します。複数のデバイスやプロジェクトの間で切り替えを行うと、Layout Inspector は、接続されたデバイスのフォアグラウンドで実行されているデバッグ可能なプロセスに自動的に接続します。

Sunflower サンプルアプリの 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] アイコン View Options ボタン をクリックし、[Show Borders] または [Show View Label] を切り替えます。

View Options のプルダウン メニュー

図 3. レイアウト境界とビューラベルを非表示にするには、[Layout Inspector] ツールバーの 2 つ目の [View Options] をクリックします。

3D モード

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

Layout inspector: 3D ビュー

図 4. レイアウトを回転した 3D ビュー。

Layout Inspector: Layer Spacing ビュー

図 5. レイアウトのレイヤを拡大または縮小するには、[Layer Spacing] スライダーを使用します。

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

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

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

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

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

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

  1. Layout Inspector を開きます。
  2. Layout Inspector がアプリプロセスに自動で接続されます。接続されない場合は、プルダウン メニューからアプリプロセスを選択します。
  3. スナップショットをキャプチャする際は、Layout Inspector ツールバーのスナップショットのエクスポート ボタン エクスポート アイコン をクリックします。
  4. 表示されるシステム ダイアログで、スナップショットの名前と保存する場所を指定します。必ず拡張子 *.li を付けてファイルを保存してください。

メイン メニューバーで [File] > [Open] を選択し、*.li ファイルを開くと、Layout Inspector のスナップショットを読み込めます。

Layout Inspector スナップショットの GIF

図 6. Layout Inspector でスナップショットをキャプチャします。

Compose を確認する

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

Layout Inspector の Compose 対応の詳細

アクティビティの再起動を回避する

Layout Inspector が適切に機能するには、次のどちらかの全般設定が必要です。全般設定を指定しなかった場合は、Layout Inspector で自動的に設定されます。

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    このオプションでは、指定されたプロセスを検査するための追加情報が生成されます。

  2. 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] チェックボックスをオンにします。

実行構成でのアクティビティ再起動オプション

図 11. 実行 / デバッグ構成で自動更新を有効にします。

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

Layout Validation

Layout Validation は、さまざまなデバイスや表示設定のレイアウトを同時にプレビューするビジュアル ツールであり、プロセスの早期にレイアウトの問題を把握できます。この機能にアクセスするには、IDE ウィンドウの右上にある [Layout Validation] タブをクリックします。

[Layout Validation] タブのスクリーンショット

図 12. [Layout Validation] タブ。

使用可能な構成セットを切り替えるには、[Layout Validation] ウィンドウの上部にある [Reference Devices] プルダウンから次のいずれかを選択します。

  • 参照デバイス
  • カスタム
  • 色覚特性
  • Font Sizes（フォントサイズ）

Layout Validation ツールのプルダウン メニューのスクリーンショット

図 13. [Reference Devices] プルダウン メニュー オプション。

参照デバイス

参照デバイスとは、テスト対象として推奨される一連のデバイスのことです。スマートフォン、折りたたみ式、タブレット、パソコン用のインターフェースが含まれます。この一連の参照デバイスでレイアウトがどのように表示されるかをプレビューする必要があります。

さまざまな参照デバイスのレイアウト プレビューのスクリーンショット

図 14. Layout Validation ツールの参照デバイスのプレビュー。

カスタム

プレビューする表示設定をカスタマイズするには、言語、デバイス、画面の向きなど、各種設定を選択します。

Layout Validation ツールでデバイス表示をカスタマイズする

図 15. Layout Validation ツールでカスタム表示を設定します。

色覚特性

色覚特性のあるユーザー向けにアプリをより使いやすくするために、一般的な色覚特性をシミュレートしてレイアウトを検証します。

さまざまな色覚特性をシミュレートしたプレビューのスクリーンショット

図 16. Layout Validation ツールで色覚特性をシミュレートしたプレビュー。

フォントサイズ

さまざまなフォントサイズでレイアウトを検証し、大きなフォントでレイアウトをテストすることで、視覚障がいのユーザー向けにアプリのユーザー補助を改善します。

さまざまなフォントサイズでのアプリ レイアウトのプレビュー（大きなフォントの場合にレイアウトのエラーが発生）

図 17. Layout Validation ツールでのさまざまなフォントサイズのプレビュー。