Window size classes に基づいてアプリのレイアウトを変更する

[private-yusuke]

概要

409 で、画面の orientation が portrait であるかどうかをフラグとしてレイアウトを変更するような変更を加えたが、これは multi-window mode でキレイな見た目にならないことがある。例えば、split-screen mode で 2 つのアプリを同時に画面上に表示して、片側には Google Maps などのナビアプリを開いているときのスクリーンショットを掲載する。

A. landscape で 1:1	B. portrait で 1:1	C. portrait で約 3:1

A は肝心の交差点のボタンが押しづらく、Interscheckin を使用中の 99 % は不要な右側が領域を食いすぎている。 B は画面スクロールができないこともあり画面下部が領域を食いすぎている。 C は A と同様。

A, B, C どの場合であっても、基本は Venue の一覧だけを画面に表示し、shout を書くためのダイアログを出すボタン、設定画面に遷移するボタン、位置情報定期更新頻度を表示していて押下したらその設定に遷移するボタン、運転モード切り替えボタン、Venue 更新ボタン、そしてチェックインをするボタンのみが押せるようになっていてほしい。 これら全てのボタンを常時表示し続けるスペースは無いので、ハンバーガーメニューのようなアイコンが書かれたアイコンで以下のボタンをまとめておくと良さそう。

• ハンバーガーメニューアイコンのボタン
  • タップすると以下のボタンが画面上に展開される
  • 設定画面に遷移するボタン
  • 運転モード切り替えボタン
• Venue 一覧更新ボタン
  • ラベルとして位置情報定期更新頻度を表示
  • タップすると Venue 一覧が更新される（位置情報が更新される）
  • ロングタップすると位置情報定期更新頻度変更画面に遷移する
• チェックインをするボタン

https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes を参考にして、まずは以下のような場合分けで MainScreen が表示する画面を構成するとよさそう。

• compact width かつ compact height
• compact width かつ medium height 以上
• medium width 以上かつ compact height 以上

この判定は https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes#manage_layouts_with_window_size_classes を参考にして行う。