Google は、黒人コミュニティに対する人種平等の促進に取り組んでいます。取り組みを見る

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] タブのスクリーンショット

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

  • Pixel Devices(Pixel デバイス)
  • カスタム
  • 色覚特性
  • Font Sizes(フォントサイズ)


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

Pixel デバイス

Pixel デバイスでレイアウトがどのように表示されるかをプレビューします。

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

図 4. Layout Validation ツールでの Pixel デバイス プレビュー

カスタム

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

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

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

色覚特性

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

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

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

フォントサイズ

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

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

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