Layout Inspector でレイアウトをデバッグする

Android Studio の Layout Inspector を使用すると、Android Studio IDE で実行中のアプリのビュー階層を調査することができます。 この機能が特に役立つのは、レイアウトが XML で完全に指定されているのはなく、実行時に流動的に形成され、レイアウトが想定どおりに機能しない場合です。

Layout Inspector の起動方法は次のとおりです。

  1. 接続済みの端末またはエミュレータでアプリを実行します
  2. [Tools] > [Android] > [Layout Inspector] をクリックします。
  3. [Choose Process] ダイアログが表示されたら調査対象のアプリプロセスを選択して、[OK] をクリックします。

    図 1. [Choose Process] ダイアログ

    デフォルトでは、現在 Android Studio で開いているプロジェクトのプロセス(かつ端末上で実行中のプロセス)のみが、[Choose Process] ダイアログに一覧表示されます。 端末上の別のアプリを調査したい場合は、[Show all processes] をオンにしてください。 ルート権限を取得された端末、または Google Play ストアが入っていないエミュレータを使用している場合は、実行中のアプリがすべて表示されます。 そうでない場合は、デバッグ可能な実行中のアプリのみが表示されます。

Layout Inspector ではスナップショットを撮影して .li ファイルとして保存し、そのファイルを開くことができます。 図 2 のように、Layout Inspector には次の内容が表示されます。

  1. ビューツリー: レイアウトのビュー階層です。
  2. スクリーンショット: 各ビューの表示領域が表示された端末のスクリーンショット
  3. プロパティ テーブル選択されたビューのレイアウト プロパティ

図 2. Layout Inspector

[View Tree] の任意のビューをクリックすると、スクリーンショット内の対応するビューが選択されます。逆も同様です。 ビューのレイアウト属性はすべて [Properties Table] に表示されます。

レイアウト上で複数のビューが重なっている場合は、デフォルトで、上に表示されたビューのみをスクリーンショット上でクリックできます。 スクリーンショットで下のビューをクリック可能にするには、 [View Tree] で上のビューを右クリックして、[Show in preview] チェックボックスをオフにします。 この操作では、下のビューをクリック可能にするために、スクリーンショット上のクリック可能領域を消しているだけなので、ビュー コンテンツ自体が消えることはありません。

なお、端末上のレイアウトが変更された場合、Layout Inspector は更新されません。 そのため、再度 [Tools] > [Android] > [Layout Inspector] をクリックして、新しいスナップショットを作成する必要があります。 各スナップショットは別々の .li ファイルとして project-name/captures/ に保存されます。

図 3. [Project] ウィンドウに表示された Layout Inspector のスナップショット(.li ファイル)