Jetpack Composeでの画面遷移

Transcript

1. Jetpack Composeでの画面遷移
 2022/06/30 Jetpack Compose 導入事例【おいしい健康｜Retty｜ZOZO｜アンドパッド】
 株式会社ZOZO
 ZOZOTOWNアプリ部 Android1ブロック
 Androidテックリード
 岩田直樹（いわたん）
 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 株式会社ZOZO
 ZOZOTOWNアプリ部 Android1ブロック
 Androidテックリード
 岩田直樹(いわたん)
 ＠iwata_n
 普段は二児の父親をやってます。
 Androidアプリのコードを仕事で書いてます。
 2
3. © ZOZO, Inc. https://zozo.jp/
 3 • ファッションEC
 • 1,500以上のショップ、8,400以上のブランドの取り扱い
 • 常時90万点以上の商品アイテム数と毎日平均2,600点以上の新着 商 品を掲載（2022年3月末時点）
 • ブランド古着のファッションゾーン「ZOZOUSED」や
 コスメ専門モール「ZOZOCOSME」、靴の専門モール
 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
 「ZOZOVILLA」を展開
 • 即日配送サービス
 • ギフトラッピングサービス
 • ツケ払い など

4. © ZOZO, Inc. コンテンツ
 1. 概要と結論
 2. 検討内容
 3. 移行を見据えた実装方法
 4
5. © ZOZO, Inc. コンテンツ
 1. 概要と結論
 2. 検討内容
 3. 移行を見据えた実装方法
 5
6. © ZOZO, Inc. 概要
 Jetpack Composeを使用した画面遷移に関して、公式ドキュメントには以下の記述があります。
 そこで今回は、なぜ公式ドキュメントではFragmentの使用をオススメしているのか、
 公式ドキュメントとは逆にComposeからFragmentを利用する形で検証します。
 また、公式ドキュメントに従ってFragmentをComposableのラッパーとした場合、
 どのようにComposeを実装していき移行するかを画面遷移の観点でまとめます。
 
 『ハイブリッド アプリの場合は、フラグメント ベースの Navigation コンポーネントを使用するとともに、ビューベースの画面、 Compose の画面、およびビューと Compose の両方を使用する画面を保持するフラグメントを使用することをおすすめします。ま ず、アプリの各画面フラグメントをコンポーザブルのラッパーにします。次に、それらの画面すべてを一緒に Navigation Compose に 関連付けて、すべてのフラグメントを削除します。』 Android Developers Compose を使用したナビゲーションより引用 https://developer.android.com/jetpack/compose/navigation?hl=ja#interoperability 
 
 
 6
7. © ZOZO, Inc. 結論
 7 • Jetpack Composeでの画面遷移は公式ドキュメントの記載通りにFragmentでComposeをラップする実装で行うと問 題点が少なく実装が可能です
 • 既存実装が残る限りJetpack ComposeのNavigationは使うのが難しい
 ◦ Jetpack Composeと既存実装が併存する間、新規画面は移行を考えた実装が必要です

8. © ZOZO, Inc. コンテンツ
 1. 概要と結論
 2. 検討内容
 3. 移行を見据えた実装方法
 8
9. © ZOZO, Inc. 検討内容
 以下の画面遷移の方法について検討しました
 
 1. Compose→Fragmentとなる遷移
 2. Compose→Fragment→Fragmentとなる遷移
 3. Compose→Fragment→Composeとなる遷移
 9
10. © ZOZO, Inc. Compose→Fragmentとなる遷移
 Navigation Componentを使っている場合は公式ドキュメントの通りで良い。
 FragmentManagerを使っている場合も、同様に公式ドキュメント相当の実装で実現可能です。
 https://developer.android.com/jetpack/compose/navigation?hl=ja#navigate-from-Compose
 10 公式サイトの例はComposable側にXMLで定義したIDが入っているので移行時に少し改修が必要になる。
 Compose移行時に改修を不要にするためにコールバックに渡す引数は遷移先ではなく、遷移時に必要なパラメータ をわたすようにする。
 Compose Fragment Compose Fragment FragmentManagerでの遷移もこの コールバック内で出来る Compose内でXMLへ依 存がある
11. © ZOZO, Inc. Compose→Fragment→Fragmentとなる遷移
 11 • ComposeのAndroidViewにFragmentContainerViewを指定してNavHostFragmentを表示する
 ◦ NavHostFragmentを使わず、既存実装のFragmentを表示するとfindNavController()を実行時に、 NavHostFragmentが見つからずクラッシュする
 
 NavHostFragmentを用意してAndroidViewで表示す ることでfindNavController()が動くようにする
12. © ZOZO, Inc. Compose (NavGraph) Compose→Fragment→Fragmentとなる遷移
 NavHostFragmentを使用した場合、一見画面遷移できているように見えるが、
 Compose側が戻るボタンの処理をフックしてしまいFragmentB→Aの戻る操作が正しく行えない。
 
 ①Compose→②FragmentA→③FragmentB→戻るボタンとした際に
 期待値は②のFragmentAが表示されることだが、実際には①Composeまで戻ってしまう。
 12 Compose (AndroidView) 親Fragment(NavHostFragment) ②Fragment A findNavController() ③Fragment B ①Compose Composeの遷移 Navigation Componentの遷移 戻る処理 こちらが戻る処理を フックしてしまう
13. © ZOZO, Inc. Compose→Fragment→Composeとなる遷移
 FragmentからJetpack Composeへ遷移する際にFragment側に改修が必要になる。
 例えばリストがFragment、詳細がComposeで実装されていた場合などで、
 リストから詳細へ遷移する際にクリックイベントをJetpack Comoseへ引き回してくる必要がある。
 → Fragment Result APIで取れるが、既存実装を改修するのであればCompose化を考えたほうが良さそう。
 
 13 Compose (NavGraph) Compose (AndroidView) Fragment (リスト画面) Compose (詳細画面) 選択結果 Fragmentでの選択結果をFragment Result APIでComposeに渡す
14. © ZOZO, Inc. 検討結果
 • Composeで既存実装をラップする実装をするには、既存実装側に手を入れる必要があったり、戻る操作を正しく実現 するのに難がある
 ◦ 公式ドキュメントではFragmentでComposableをラップするのをオススメしていたと思われる
 ◦ 大半の画面をComposeで実装しても、移行するのが辛い既存実装があると完全にComposeのNavigationに移行は できない
 • 併用が必要になるのが間違いないので新規実装時にComposeへ移行することを見据えた実装が必要になる
 
 14
15. © ZOZO, Inc. コンテンツ
 1. 概要と結論
 2. 検討内容
 3. 移行を見据えた実装方法
 15
16. © ZOZO, Inc. 移行を見据えて既存実装とJetpack Composeを併用する
 新しい画面の実装手順
 1. Jetpack ComposeでステートレスなComposableをScreenとして実装する
 2. ViewModelを実装する
 3. Screenと、ステートや遷移イベントと紐付けを行うRouteを実装する
 4. Jetpack Compose内での遷移定義するNavigationを実装する
 5. RouteにThemeとNavigationを紐付けるFragmentを実装する
 6. 既存の画面遷移方法で新規Fragmentへ遷移する
 
 
 16 既存NavHostFragment 既存Fragment (手を加えない) 新規Fragment ComposeView (NavHost) Compose Screen A Compose Screen B 新規Fragment Composeの遷移 Navigation Componentの遷移 戻る処理
17. © ZOZO, Inc. Jetpack ComposeでステートレスなScreenを実装する
 • Screenは引数でステートを受け取り、イベントをコールバック で返す
 • ScreenではViewModelを引数に取らない
 ◦ Previewをしやすくする
 ◦ 不要な再Composeを減らす
 
 17 既存NavHostFragment 既存 Fragment 新規Fragment ComposeView (NavHost) Compose Screen A Compose Screen B 新規 Fragment Tips
 • Screenの単位でTopBarを定義した方がタイトルやメニューを各Screenから TopBarを管理する画面へ状態を伝える必要がなくなるので楽になる

18. © ZOZO, Inc. ViewModelを実装する
 • 画面の状態を管理するUiStateをStateFlowで提供する
 • 副作用を流すためのEffectをSharedFlowで提供する
 
 
 18
19. © ZOZO, Inc. Routeの実装
 • Screenとステートや遷移イベントと紐付けを行うRouteを実装
 
 19 既存NavHostFragment 既存 Fragment 新規Fragment ComposeView (NavHost) Compose Screen A Compose Screen B 新規 Fragment Navigation ComponentではViewModelで遷移時のパラメータ (id) を受け取れなかったので Routeで指定できるようにする ここでScreenにUIの状態を渡す
20. © ZOZO, Inc. NavigationGraphの定義
 • NavGraphBuilderの拡張関数で画面遷移の定義を行う
 • routeで{}を使うことで画面遷移時に渡すパラメータを設定できるが、FragmentでstartDestinationに遷移してきた際 に値が取れなかったので、拡張関数のグラフで値を受け取る対策をした実装で定義する
 20 理想形 対策した実装 既存NavHostFragment 既存 Fragment 新規Fragment ComposeView (NavHost) Compose Screen A Compose Screen B 新規 Fragment
21. © ZOZO, Inc. Fragmentの実装
 • FragmentのonCreateViewでNavHostを定義したComposeViewを返す
 • Composeに完全移行した際には不要になる
 ◦ Fragmentでテーマを設定することでComposeに移行時に大本でComposableのテーマを設定するだけで全体に 反映できるようになる
 21 既存NavHostFragment 既存 Fragment 新規Fragment ComposeView (NavHost) Compose Screen A Compose Screen B 新規 Fragment
22. © ZOZO, Inc. 完全にComposeに移行する
 移行手順
 1. 各フローごとにNavGraphBuilderの拡張関数でグラフを定義する
 2. アプリ全体の遷移を管理するNavHostで各フローを定義する
 3. 一番大本のComposableでテーマを設定する
 4. Fragmentを削除し、Navigation Componentを外す
 22
23. © ZOZO, Inc. まとめ
 • Jetpack Composeでの画面遷移は公式ドキュメントの記載通りにFragmentでComposeをラップする実装で行うと問 題点が少なく実装が可能です
 • 既存実装が残る限りJetpack ComposeのNavigationは使うのが難しい
 ◦ Jetpack Composeと既存実装が併存する間、新規画面は移行を考えた実装が必要です
 
 23
25. © ZOZO, Inc. Appendix
 25
26. © ZOZO, Inc. Navigationの定義方法
 1. 機能やフローなど意味のある単位ごとにNavGraphBuilderの拡張関数を定義する
 2. NavGraphBuilderの拡張関数を使ってアプリ全体の画面遷移をまとめる
 26 個別の機能やフローごとに拡張関数を定義 AppNavHostで全体をまとめる
27. © ZOZO, Inc. BottomNavigation
 ScaffoldのbottomBarにBottomNavigationを指定するだけで作れるので便利。
 27 enumで定義した設定値を forEachす るだけで要素が作れて便利 click時にnavControllerで遷移させる enumに遷移先、テキスト、アイコンを 定義する