AndroidアプリのレスポンシブUIを確認するにはVRヘッドセットが最適という夢を見た

この記事は Calendar for Akerun | Advent Calendar 2022 - Qiita の 12 日目の記事です。

こんにちは、Webエンジニアのohioshirt - Qiitaです。
主にAndroidアプリの開発を担当しています。

今回はView-BasedなAndroidアプリの話です。
Composeの話はほぼ出てきません。また別の機会で書きます。

まずはレスポンシブUI・マルチフォームファクタの話

Android アプリ開発において、今年になってForm Factorsの話がよく見られるようになった印象があります。
Form Factorsの話とは、ざっくりと言えばスマートフォン以外のデバイスにも対応することを指します。
Android OSはスマートフォンだけに搭載されるものではありませんからね。

これについてAndroid デベロッパーサイトを探すと、以下のようなページが見つかります。

Migrate your UI to responsive layouts/UI をレスポンシブレイアウトに移行する https://developer.android.com/guide/topics/large-screens/migrate-to-responsive-layouts
Build adaptive layouts/アダプティブレイアウトを作成する https://developer.android.com/jetpack/compose/layouts/adaptive

また、YouTubeでも多くのセッションが観られますので、ぜひ探してみてください。
www.youtube.com

AkerunアプリでレスポンシブUIに対応してみる

さて、AkerunアプリではレスポンシブUIに対応しているのかというと、
ご覧の通り最適化の余地がありそうです。

せっかくなので、この場で折りたたみデバイスへの対応を試しましょう。

まずは折りたたみデバイスに対応するとはどういうものか、
こちらのトレーニングコースを参考に見てみます。
https://developer.android.com/codelabs/basic-android-kotlin-training-adaptive-layouts
https://github.com/google-developer-training/basic-android-kotlin-training-sports

このアプリでは、2画面への対応としてリスト / 詳細パターンを採用しています。
左の画面にリスト、右の画面にその詳細を表示するレイアウトはよく見るパターンですね。
https://developer.android.com/codelabs/basic-android-kotlin-training-adaptive-layouts#3
iOS アプリ開発でもUISplitViewControllerの名前で見たことがあるかもしれません。
https://developer.apple.com/documentation/uikit/uisplitviewcontroller

Akerunアプリでもリストを表示する画面が存在するので、導入としてちょうどよさそうです。
このAkerunアプリのリストはドロワーのような表示ですが、
先ほどのサンプルに合わせてレイアウトを変更します。

Androidでドロワーを実現する標準的なコンポーネントは以下、
https://developer.android.com/jetpack/androidx/releases/drawerlayout
トレーニングコースではSlidingpanelayoutを使用しています。
https://developer.android.com/jetpack/androidx/releases/slidingpanelayout
レイアウトの詳しいところは省略しますが、上記を参考にするとこのような構成になります。
一般的には左側にリストを置きますが、今回は既存の画面構成をそのまま踏襲するということでご容赦ください。

<Slidingpanelayout>
    <ドア（レスポンシブなwidth） />
    <ドアリスト />
</Slidingpanelayout>

それでは表示を確認しましょう。
折りたたみに対応したスマートフォンの実機を使うには金銭面でのハードルが高いですが、
Android Studio Electric Eelからはリサイズ可能なエミュレーターが使えます。
https://developer.android.com/studio/preview/features#resizable-emulator

どうでしょう、それらしく見えませんか？
※個人の感想です。操作性など全然考慮できていません。

ようやくVRヘッドセットの出番

このようにスマートフォン、折りたたみ、タブレットと３種類のレイアウトを確認することができました。
さらに多様なサイズに対応できているか確認したくなるかもしれません。
そんな時におすすめなのが、Meta QuestやPico 4などのVRヘッドセットです。
AndroidベースのOSを搭載するVRヘッドセットでは、Androidアプリを動作させることができます。
Android スマートフォンと同様に開発者モードを有効にしてUSBデバッグしましょう。
（apkファイルをインストールできるようになりますが、Android スマートフォンと同様にリスクが生じます）
このようにウィンドウサイズも自由に変更できます。