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

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

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

Layout Inspector を開く

Layout Inspector を開くには:

  1. コネクテッド デバイスやエミュレータ上で、アプリを実行します。
  2. [Tools] > [Layout Inspector] をクリックします。

図 1 のように、Layout Inspector には以下の内容が表示されます。

  1. コンポーネント ツリー: レイアウト内のビューの階層。
  2. レイアウト表示: デバイスまたはエミュレータで表示される際のアプリ レイアウトのレンダリング。各ビューのレイアウト境界も表示されます。
  3. Layout Inspector ツールバー: Layout Inspector の各種ツール。
  4. 属性: 選択したビューのレイアウト属性。

コンポーネント ツリー、Lauout Inspector ツールバー、レイアウト表示、属性を示すラベルが付いた Layout Inspector のスクリーンショット

図 1. Layout Inspector

ビューを選択する

ビューを選択するには、コンポーネント ツリー内またはレイアウト表示内でそのビューをクリックします。選択したビューのすべてのレイアウト属性が属性パネルに表示されます。

レイアウト内で複数のビューが重なる部分がある場合、前面にないビューを選択するには、コンポーネント ツリー内でクリックするか、レイアウトを回転して、目的のビューをクリックします。

ビューを分離する

複雑なレイアウトで作業する場合は、個々のビューを分離して、レイアウトのサブセットのみコンポーネント ツリー内に表示し、レイアウト表示内にレンダリングできます。

ビューを分離するには、[Component Tree] でそのビューを右クリックし、[Show Only Subtree] または [Show Only Parents] を選択します。

全体表示に戻るには、そのビューを右クリックして [Show All] を選択します。

レイアウト境界とビューラベルを非表示にする

レイアウト要素の境界ボックスやビューラベルを非表示にするには、レイアウト表示の上部にある表示オプション アイコン Live Layout Inspector の表示オプション アイコン をクリックし、[Show Borders] または [Show View Label] を切り替えます。

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

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

  • オーバーレイを読み込むには、Layout Inspector の上部にあるオーバーレイの読み込みアイコン をクリックします。オーバーレイは、レイアウトに合わせて拡大縮小されます。
  • オーバーレイの透明度を調整するには、[Overlay Alpha] スライダーを使用します。
  • オーバーレイを削除するには、オーバーレイのクリア アイコン をクリックします。

Live Layout Inspector

Live Layout Inspector は、API レベル 29 以上を実行するデバイスやエミュレータにデプロイされたアプリの UI を、リアルタイムで詳しく分析します。

Live Layout Inspector を有効にするには、[File] > [Settings] > [Experimental] に移動し、[Enable Live Layout Inspector] の横にあるチェックボックスをオンにします。次に、レイアウト表示の上にある [Live updates] の横のチェックボックスをオンにします。

Live Layout Inspector には動的なレイアウト階層機能が組み込まれており、デバイス上のビューが変更されると、コンポーネント ツリーやレイアウト表示が更新されます。

さらに、プロパティ値の解決スタックを使用すると、リソースのプロパティ値が最初にソースコードのどこにあるかを調べ、プロパティ ペインのハイパーリンクをたどってその場所に移動できます。

プロパティ値解決スタック

図 2. 属性パネルのプロパティ値とプロパティ定義へのハイパーリンク

最後に、レイアウト表示には、ランタイム時のアプリのビュー階層に対する高度な 3D 視覚化機能があります。この機能を使用するには、[Live Layout Inspector] ウィンドウでレイアウトをクリックし、マウスでドラッグして回転します。レイアウトのレイヤを拡大または縮小するには、[Layer Spacing] スライダーを使用します。

Layout inspector: 3D ビュー

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

Layout Validation

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

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

図 4. [Layout Validation] タブ

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

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


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

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

参照デバイス

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

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

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

カスタム

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

Layout Validation ツールでデバイス表示をカスタマイズする方法を示すアニメーション

図 7. Layout Validation ツールでのカスタム表示の設定

色覚特性

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

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

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

フォントサイズ

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

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

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

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

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

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

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

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

Sunflower サンプルアプリの Layout Inspector のスナップショット

図 10. Sunflower サンプルアプリの Layout Inspector のスナップショット

Compose のセマンティクスを検査する

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

Layout Inspector を使用して表示されているセマンティック情報

図 11. Layout Inspector を使用して表示されているセマンティック情報

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