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

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

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

Layout Inspector を開くには、接続されたデバイスまたはエミュレータでアプリを実行し、[Tools] > [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 再コンポーズ回数

Compose レイアウトをデバッグするときは、UI が適切に実装されているかどうかを確認するため、コンポーザブルの再コンポーズのタイミングを把握することが重要です。たとえば、再コンポーズ回数が多すぎる場合は、アプリが必要以上の処理を行っている可能性があります。一方、コンポーネントが想定どおりに再コンポーズしていないと、予期しない動作が発生する可能性があります。

Layout Inspector は、アプリを操作したときにレイアウト階層内の個々のコンポーザブルが再コンポーズまたはスキップしたタイミングを表示します。Android Studio Electric Eel では、再コンポーズがハイライト表示されるので、UI 内のどこでコンポーザブルが再コンポーズするかを見つけるのに役立ちます。

再コンポーズのレンダリングのハイライト表示

図 7. Layout Inspector で再コンポーズがハイライト表示される。

ハイライト表示された部分では、Layout Inspector の画像セクションにコンポーザブルのグラデーション オーバーレイが表示されて徐々に消えます。これにより、再コンポーズ回数が最も多いコンポーザブルが UI 内のどこで見つかるかを把握できます。あるコンポーザブルの再コンポーズ回数が別のコンポーザブルより多い場合、そのコンポーザブルのグラデーション オーバーレイの色がより濃厚になります。

再コンポーズ回数を表示するには、アプリが API レベル 29 以上および Compose 1.2.0-alpha03 以降を使用していることを確認します。確認できたら、通常どおりにアプリをデプロイします。

Layout Inspector のコンポーズおよびスキップ カウンタ

図 8. Layout Inspector のコンポーズおよびスキップ カウンタ。

[Layout Inspector] ウィンドウを開き、アプリプロセスに接続します。[Component Tree] には、レイアウト階層の横に 2 つの列が表示されます。最初の列には各ノードのコンポーズ回数が表示され、2 番目の列には各ノードのスキップ回数が表示されます。コンポーザブル ノードを選択すると、コンポーザブルのディメンションとパラメータが表示されます。ただし、インライン関数の場合、パラメータは表示されません。[Component Tree] または [Layout Display] からコンポーザブルを選択すると、[Attributes] ペインにも同様の情報が表示されます。

回数をリセットすると、アプリで特定の操作を行っているときの再コンポーズまたはスキップを把握しやすくなります。回数をリセットするには、[Component Tree] ペインの上部にある [Reset] をクリックします。

Layout Inspector でコンポーズおよびスキップ カウンタを有効にする

図 9. Layout Inspector でコンポーズおよびスキップ カウンタを有効にします。

Compose のセマンティクス

Compose では、セマンティクスによって、ユーザー補助サービスとテスト フレームワークが認識しやすい別の方法で UI が記述されます。Layout Inspector を使用すると、Compose レイアウト内のセマンティック情報を検査できます。

Layout Inspector を使用して表示したセマンティック情報

図 10. Layout Inspector を使用して表示したセマンティック情報。

Compose ノードを選択するときに、[Attributes] ペインを使用して、ノードがセマンティック情報を直接宣言しているか、子のセマンティクスを結合しているか、その両方かを確認します。宣言しているか結合しているかにかかわらず、セマンティクスを含むノードをすばやく調べるには、[Component Tree] ペインで [View options] プルダウンを選択し、[Highlight Semantics Layers] を選択します。これにより、ツリー内のセマンティクスを含むノードのみがハイライト表示され、キーボードを使用してそのノード間をすばやく移動できます。

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

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 ツールでのさまざまなフォントサイズのプレビュー。