はじめに
5月28日（現地時間）にAndroidStudio4.0がリリースされましたね。
約3年ぶりのメジャーアップデートということで、Jetpack Composeのサポート や Motion Layout など色々新しい機能が追加されています。
今回はその中でも Layout Inspector について書いてみようかと思います。
確認した環境
AndroidStudio4.2 Canary 4
Layout Inspector とは？
実機/エミュレーターで動作中のアプリのViewを立体的に確認できる機能です。Xcode の Capture View Hierarchy のような機能ですね。
以前にも Layout Inspector はありましたが、AndroidStudio4.0 で3D表示で確認することが可能になりました。これによりさらに的確にレイアウトの問題点などを発見することができそうです。
あと自分はあまり使ってなかったのですが、Layout Inspector の機能のほとんどは、以前から提供されていた Hierarchy Viewer や Pixel Perfect の機能です。今ではどちらもサポート終了しているので、素直に Layout Inspector を使いましょう。
- レイアウト階層内の各ビューの確認や、レンダリング速度の測定などができ、パフォーマンスのボトルネックの発見に使える。
- Layout Inspector ではレンダリング速度は確認できないので、 Window.OnFrameMetricsAvailableListener を使うようです(本記事では触れません)
- レイアウト内の個々のピクセルの位置やプロパティの確認
- アプリのレイアウトとモックアップ画像とを重ね合わせての比較
実行手順
AndroidStudioのメニューバー Tools > Layout Inspector で起動します。
コード、エミュレータと同時に表示すると結構狭くなるので、別ウィンドウで表示しても良いかもしれません。
別ウィンドウは右端の歯車アイコンのView Modeで変更可能です。この辺はLogcatとかの操作と同じですね。
便利な機能
Live updates
Layout Inspector 上部の Live updates にチェックを入れると、アプリ上のViewがリアルタイムに反映されます。
いちいち Layout Inspector 再実行し直さなくても、気軽に確認できるのは良いですね！
Show Only Subtree / Show Only Parents / Hide Subtree
特定のViewを見たいけど階層が複雑で、少し見づらいときなどは Show Only Subtree を使うと便利です。
対象のViewか左側の Component Tree の上で、右クリックすると選択できます。
実行するとそのViewの下位階層のViewのみ表示されます。
その他にも、 そのView下位階層のViewのみ非表示(Hide Subtree)、親Viewのみ表示(Show Only Parents) 等あるので、確認したいViewをうまく表示して確認しましょう。
デザインとの比較
Zeplinなどのデザインツールから出力した画像と重ね合わせて比較ができます。画像のアルファ値を変えて、現状の実装と比べて位置や色などの違いをわかりやすく確認できるので便利です。
Layout Inspector ウィンドウ上部の Load Overlayボタンで読み込む画像を選択できます。
下の画像は、分かりやすいようにわざとズレた画像で試しています。
Overlay Alphaのつまみで画像のアルファ値を変更できます。
終了する時には、もう一度 Load Overlayボタンを押すと画像が非表示になります。
コード上での使用箇所のリンク表示
Layout Inspectorウィンドウ右側に表示されている Attributes の各プロパティの値には、画像のように文字リンク表示されている箇所があり、クリックすると対象のコード部分を表示してくれます。
テキストはstrings.xmlの方も開けるようになってますね！👍
2D/3D Viewの表示切り替え
表示されてる3D表示は、2D表示(通常のアプリの見え方)に簡単に切り替えできます。
もう一度押すと 3D表示に戻りますが、前回見ていた角度は保持してくれないようです。少し残念。
Layout Inspector の終了
Layout Inspector ウィンドウ上部にあります。
まとめ
以上 Layout Inspector の機能紹介でした。3D表示や Live updates が追加されて、さらに使いやすくなった気がします。
レイアウトの不具合はハマるときはハマりますからね。
Layout Inspector は力強い武器の一つになってくれそうです。
その他にもデザインツール周りは便利な機能が追加されているので、気になった方はこちらのAndroid Developers公式の動画を確認してみてください。
参考文献
Layout Inspector を使用してレイアウトをデバッグするhttps://developer.android.com/studio/debug/layout-inspector?hl=ja
