Android Studioの機能入門 Layout Inspector編

はじめに

アソビュー！のAndroidアプリ開発を担当している田澤です。 Android村を飛び出し数年放浪してからこの度Android村に帰ってきました。

その間に、ViewからComposeへといった変革を筆頭に様々な動きがありました。それはIDEであるAndroid Studioでも変わらないのではないかと考えています。そこで久しぶりにAndroid Studioと向き合い、現状でどのような機能があるのか、もしくは見落としていた機能はあったのかを見直し生産性の向上に繋げたいと思います。今回はLayout Inspectorについて説明してきたいと思います。

余談ではありますがAndroid Studioについては、Google I/O 2024で🐨 についての発表もあり今後の追加機能が楽しみです*1。個人的にはGeminiの扱いがどのようになるかが気になっています。また、それ以前にはリリースサイクルに関する記事がありました。今後アップデードスピードが上がりそうですね。 More frequent, focused updates for Android Studio | Android Developers Blog

実行環境

環境により使用できる機能に差が出てきます。今回、私が使用した環境は以下のとおりとなります。

macOS 13.0
targetSdk 34

Android Studio Jellyfish | 2023.3.1
Build #AI-233.14808.21.2331.11709847, built on April 13, 2024
Runtime version: 17.0.10+0-17.0.10b1087.21-11572160 aarch64

Layout Inspectorの使い所

Layout InspectorにはComponent TreeとAttributesのウィンドウが存在します。Component Treeは名称通りのままでcomponentの構成をツリー形式で表示してくれます。画面構成、階層構造が把握しやすくなります。また、component名の横にあるエリアではRecompositionの回数とskipの回数を表示します。以下のComponent Treeウィンドウの画像の 2 がRecompositionの回数になります。skip回数はその右隣に表示されます。 Attributesには対象のcomponentに指定されている各種パラメータが表示されます。

私は実装したUIが期待値通りになっていない場合に、Componentの境界が正しくなっているか、指定されているサイズは正しいか、スタックはどうなっているか等を確認するのに使用しています。また、画面が表示されるまでが遅い、スクロール時の描画が遅いと感じた場合はRecompositionが無駄に発生していないかの確認にも使用しています。今回使用している環境ではRecompositionされた回数とskipの回数が明示的に表示されるのでcomponentの生成について何が起きているかわかりやすいです。プログラムの修正によってRecompositionがどれだけ抑止できたか数値として即座に理解できます。

Recompositionの回数表示についてはAPI レベル 29 以上および Compose version 1.2.0以前だとヒートマップ形式でしか確認できませんでした。使いたい機能によってはAPIレベルなどのバージョンをあげていないと利用できないものがあります。できる限りバージョンの追従をして行きたいですね。

※ 弊社のアプリはJetpack ComposeでUIを作成しておりViewは存在しないのでRecomposition関連の調査の出番はそれなりにあります

モードについて

Android Studio Jellyfish以降ではLayout Inspectorの起動方法を埋め込みモードと別ウィンドウモードで選択することが可能になりました。*2

埋め込みモードというのは、『Running Devices のウィンドウ内でLayout Inspectorを表示することが可能になる』というものになります。別ウィンドウモードというのは以前から存在するLayout Inspector単独で別ウィンドウを使い表示するものになります。私がAndroid Studio Jellyfishをインストールした時点では、デフォルトで埋め込みモードが有効になっていました。もし埋め込みバージョンを解除したい場合は、[Tools] > [Layout Inspector] から[Enableembedded Layout Inspector] チェックボックスをオフにすることで対応が可能です。

公式ドキュメントを読む限り埋め込みモードを使用するほうがパフォーマンスは良いとのことなので、特に使用感に問題がなければ埋め込みモードを利用する方針で良いと思います。

Toggle Layout InspectorとToggle Deep Inspect

端的に言うと『Toggle Layout InspectorでLayout InspectorのOn/Offを切り替える』『Toggle Deep InspectでLayout Inspectorの動作を切り替える』ことになります。

Running Devices上でLayout Inspectorを使用するにはウィンドウの右上にあるアイコン[Toggle Layout Inspector]をクリックします。

するとLayout Inspectorで使われるComponent TreeとAttributesウィンドウが表示されようになります。

ただし、このままの状態でボタンなどをタップするとそのままタップイベントが発火してしまいます。ボタンが画面遷移の処理を有している場合は画面遷移が実行されてしまいボタンComponentのパラメータを確認できなかったりします。その場合、[Toggle Deep Inspect] をONにします。[Toggle Deep Inspect] がONの場合、先ほど例に上げたボタンComponentのタップイベントは発火しなくなりAttributesウィンドウにボタンのパラメータ情報が表示されます。

Toggle Deep Inspect をONにしているときは画面表示、レイアウトの確認として使用し、OFFにしている場合は操作時にrecomposeが発生していないかなどの動作確認として利用できるかと思われます。

実機での利用

実機でもLayout Inspectorを使用した動作確認を行うことが可能です。[Android Studio] > [Settings] > [Experimental] > [Device Streaming]で [Enable Device Streaming in Android Studio]のチェックをONにしましょう。

この設定で、実機のディスプレイに表示されている情報がRunning Devices上で表示されるようになります。

SnapShot

Layout Inspectorで表示しているその時点の画面情報をスナップショットと取得することができます。スナップショットファイルファイルの拡張子は.liです。スナップショットのデータを取り込むことで、3Dモード、Show Only Subtree、Show Only Parents、Overlayの機能が利用可能になります。

残念ながら、公式ドキュメントによるとShow Only Subtree、Show Only Parentsは現状（執筆時点2024/05/20では）利用できない状況になっています。 Show Only Subtree、Show Only Parentsは構造がネストして複雑化している場合は有用だと思いましたが残念ながら試せすことができませんでした。

Overlay

スナップショットのデータを取り込みんだ後に表示されるLoad Overlayボタンをクリックします。画像ファイルを選択するとスナップショットで表示されている画面の上にLoadした画像が重なって表示されます。デザイナーさんがデザインツールで作成した画面データをOverlayで取り込み、実装したデザインとの差があるかを直感的に理解することができます。Overlayの使用中はスライダーが表示されます。スライダーを動かすことでAlpha値を変更させることが可能です。