はじめに
この記事は BASE Advent Calendar 2019 の19日目の記事です。 devblog.thebase.in
こんにちは、BASE株式会社 Native Application Groupの小林です。 主にAndroidのアプリ開発をしています。
「BASE」のAndroidアプリは3種類リリースしています。
その中でも、ショッピングアプリ「BASE」のレイアウトをより見やすく、使いやすくしていく活動をデザイナーと共に行っています。
その中で、レイアウトがちょっとずれている原因を調べる時に使っている手段を紹介したいと思います。
Android StudioのLayout Inspector
「画像の高さが違う」、「データは来てるはずなのに画面に文字が表示されない」といったレイアウト違いを調べたいときに便利な機能です。
起動中のアプリで表示している画面で、Viewの設定値を知りたい場合に、Android StudioのLayout Inspectorを使って知ることができます。
使用方法
1.Android StudioのメニューバーからTools → Layout Inspectorを選択
2.デバッグ起動しているアプリの一覧が表示されます。 本番用に起動しているアプリは基本的に選択肢に表示されないので、テスト版のアプリで試しましょう。
(root化していたりエミュレータの場合は本番用のアプリも表示されます)
3.起動中のアプリにスタックされているActiivtyが表示されます。 画面に表示されているActivityを選択します。
余談ですがこの機能、プロジェクトに参画したての時に画面に紐づくActivity名がわからない時によく使ってます
4.暫く待つと、このように画面の構成要素が表示されます
この機能でできること
Layout Inspector ではxmlに記述していた高さや幅、動的に変更している値の結果を確認することができます。
(画像の高さを確認しています)
よく使うのは、判定式で表示/非表示を切り替えてる動的な高さを持つViewが表示されない原因調査です。
・そもそもViewは表示されてるなのか？ →Visibility=INVISIBLE/GONEになってないか
・VISIBLEの上で高さが0dpなのか？ →height weight が0dpになってないか
・高さもあるが、透明な状態なのか？ →Textが入っているか、backgroundcolorが設定されているか、x,yが0やマイナスになっていないか
こういった調査をこの機能1回で調べられます。
Live Layout Inspector
現在のLayout Inspectorは、取得時点のレイアウト情報を表示していて、端末側で操作しても反映されません。
Android Studio 4.0ではLive Layout Inspectorという機能が追加され、リアルタイムに反映されるそうです。
リンク
[Android Developers] Layout Inspector https://developer.android.com/studio/debug/layout-inspector
[Android Developers] Live Layout Inspector https://developer.android.com/studio/preview/features?hl=en#4.0-live-layout-inspector
開発者オプションのレイアウト境界を表示
View間の余白がずれていてどちらのViewが幅を取っているのか知りたいときに便利なAndroid OSの機能です。
Viewが確保しているスペースやmarginをわかりやすくするための「レイアウト境界を表示」という開発者オプションがあります。
使用方法
設定するには、開発者オプション→描画項目にある「レイアウト境界を表示」をONにします
ショッピングアプリ「BASE」の場合、このように表示されます
| 通常 | レイアウト境界ON |
|---|---|
 |
 |
Viewの高さや幅の設定で確保されているスペースを赤と青角の線、merginで確保されているスペースが赤く塗りつぶされて表示されています。
Android 9からはトップのクイックタイルに登録してワンタップで切り替えができるようになり、より気軽にチェックができるようになっています
開発者オプション→クイック設定開発者用タイル→レイアウト場所を表示をON→クイックタイルから切り替え
リンク
[Android Developers] デバイスの開発者オプションを設定する https://developer.android.com/studio/debug/dev-options#drawing
さいごに
今回はAndroid Studioからレイアウト構成を調べる方法と、端末の開発者オプションから余白を調べる方法を記載しました。
どちらかでも新しく知っていただいた方がいればとても嬉しいです。
レイアウトがずれてる原因は様々で、一つの方法ですべてが分かることがない事が多いです。
いろんな調べ方を組み合わせて、素早くレイアウトの改善につなげていきたいです。
明日はDataStrategyの岡さんとPAY株式会社のテックリードの東さんです。お楽しみに!
