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

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

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

Layout Inspector を開く

Layout Inspector を開くには:

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

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

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

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

図 1. Layout Inspector

ビューを選択する

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

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

ビューを分離する

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

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

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

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

レイアウト要素の境界ボックスやビューラベルを非表示にするには、レイアウト表示の上部にある表示オプション アイコンをクリックし、[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] スライダーを使用します。

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

Layout Validation

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

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

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

Pixel デバイス

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

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

カスタム

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

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

色覚特性

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

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

フォントサイズ

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

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