Road to Single Activity Uncovered

DroidKaigiの「Road to Single Activity」のセッションで時間の関係でカバーできなかったトピックについての発表です。
https://2024.droidkaigi.jp/timetable/690950/

具体的には以下の内容を扱います。
- Typesafe navigation arguments
- Complex Navigating

Transcript

1. Road to Single Activity Uncovered
2. About me yurihondo 2個目のサブ冷凍庫が欲しい X : yurihondo @yuyuyuyuyuri
3. Agenda • Recap of Road to Single Activity • Typesafe navigation arguments • Complex Navigating
4. Recap of Road to Single Activity
5. https://2024.droidkaigi.jp/timetable/690950/
6. Activity Activity Activity Framgent Fragment Transaction Before
7. Single Activity NavGraph Navigation Screen （Composable） Activity After
8. Single Activity NavGraph Navigation Screen （Composable） Activity After • メンテナンス性⤴ • 拡張性⤴
9. Samples Navigation 2.7.7 https://github.com/yurihondo/screentransitionsample Navigation 2.8.x https://github.com/yurihondo/screentransitionsample/tree/feature/navigation_v2.8.x Compose Destinations https://github.com/yurihondo/screentransitionsample/tree/feature/compose_destinations
10. Typesafe navigation arguments
11. Navigation ~2.7.x fun NavController.navigateToHogeRoute( arg: String, navOptions: NavOptions? = null ) { this.navigate( route = "hoge_route/$arg", navOptions = navOptions ) }
12. Navigation ~2.7.x fun NavController.navigateToHogeRoute( arg: String, navOptions: NavOptions? = null ) { this.navigate( route = "hoge_route/$arg", navOptions = navOptions ) } ←型を定義
13. Navigation ~2.7.x composable( ... ) { entry -> HogeRoute( arg = entry.arguments?.getString("hoge_arg")!!, ... ) }
14. Navigation ~2.7.x composable( ... ) { entry -> HogeRoute( arg = entry.arguments?.getString("hoge_arg")!!, ... ) } ←型を指定
15. Navigation 2.8.0~ @Serializable data class HogeDestination( @SerialName("arg") val arg: String, ) navController.navigate(HogeDestination("hoge"))
16. Navigation 2.8.0~ @Serializable data class HogeDestination( @SerialName("arg") val arg: String, ) navController.navigate(HogeDestination("hoge")) Routeを定義
17. Navigation 2.8.0~ @Serializable data class HogeDestination( @SerialName("arg") val arg: String, ) navController.navigate(HogeDestination("hoge")) ←引数を定義
18. Navigation 2.8.0~ @Serializable data class HogeDestination( @SerialName("arg") val arg: String, ) navController.navigate(HogeDestination("hoge"))←Newして渡す
19. Navigation 2.8.0~ composable<HogeDestination>( … ) { backStackEntry -> HogeRoute( arg = backStackEntry.toRoute<HogeDestination>().arg, … ) }
20. Navigation 2.8.0~ composable<HogeDestination>( … ) { backStackEntry -> HogeRoute( arg = backStackEntry.toRoute<HogeDestination>().arg, … ) } ↑型を指定
21. Navigation 2.8.0~ composable<HogeDestination>( … ) { backStackEntry -> HogeRoute( arg = backStackEntry.toRoute<HogeDestination>().arg, … ) } ↑型を指定 記述を 間違ったら...
22. Navigation 2.8.0~ composable<HogeDestination>( … ) { backStackEntry -> HogeRoute( arg = backStackEntry.toRoute(), … ) } ← Runtimeでクラッシュ💥
23. Navigation 2.8.0~ composable<HogeDestination>( … ) { backStackEntry -> HogeRoute( arg = backStackEntry.toRoute(), … ) } ← Runtimeでクラッシュ💥 引数 受け取りも 型安全に実装したい
24. Compose Destinations https://github.com/raamcosta/compose-destinations
25. Compose Destinations Navigation ボイラープレートを自動生成してくれるKSPライブラリ NavGraphを自動生成してくれたり、色々書かずに済む Destinationへ 引数受け渡しだけで なく、受け取りも型安全にできる
26. Compose Destinations @Destination<HogeGraph> @Composable internal fun HogeRoute( arg: String, … ) {...} destinationsNavigator.navigate(HogeRouteDestination("hoge"))
27. Compose Destinations @Destination<HogeGraph> @Composable internal fun HogeRoute( arg: String, … ) {...} destinationsNavigator.navigate(HogeRouteDestination("hoge")) ← 引数を設定
28. Compose Destinations @Destination<HogeGraph> @Composable internal fun HogeRoute( arg: String, … ) {...} destinationsNavigator.navigate(HogeRouteDestination("hoge")) 引数を渡すため Routeオブジェクトが 自動生成される ↓
29. Compose Destinations @Destination<HogeGraph> @Composable internal fun HogeRoute( arg: String, … ) {...} destinationsNavigator.navigate(HogeRouteDestination("hoge")) ロジック不要 型安全に受け取れる
30. Compose Destinations @Destination<HogeGraph> @Composable internal fun HogeRoute( arg: String, … ) {...} destinationsNavigator.navigate(HogeRouteDestination("hoge")) 一体どうやって... ↓
31. Compose Destinations public data object HogeRouteDestination : BaseRoute(), TypedDestinationSpec<HogeRouteDestinationNavArgs> { public operator fun invoke( arg: String, ): Direction { return Direction( route = "$baseRoute" + "/${stringNavType.serializeValue("arg", arg)}" ) } @Composable override fun DestinationScope<HogeRouteDestinationNavArgs>.Content() { val dependencyContainer = buildDependencies() val (arg) = navArgs HogeRoute( arg = arg, … ) } }
32. Compose Destinations public data object HogeRouteDestination : BaseRoute(), TypedDestinationSpec<HogeRouteDestinationNavArgs> { public operator fun invoke( arg: String, ): Direction { return Direction( route = "$baseRoute" + "/${stringNavType.serializeValue("arg", arg)}" ) } @Composable override fun DestinationScope<HogeRouteDestinationNavArgs>.Content() { val dependencyContainer = buildDependencies() val (arg) = navArgs HogeRoute( arg = arg, … ) } } ← 👀
33. Compose Destinations public data object HogeRouteDestination : …{ public operator fun invoke( arg: String, ): Direction { return Direction( route = "$baseRoute" + "/${stringNavType.serializeValue("arg", arg)}" ) } } ↓引数あり URLを自動生成
34. Compose Destinations public data object HogeRouteDestination : BaseRoute(), TypedDestinationSpec<HogeRouteDestinationNavArgs> { public operator fun invoke( arg: String, ): Direction { return Direction( route = "$baseRoute" + "/${stringNavType.serializeValue("arg", arg)}" ) } @Composable override fun DestinationScope<HogeRouteDestinationNavArgs>.Content() { val dependencyContainer = buildDependencies() val (arg) = navArgs HogeRoute( arg = arg, … ) } } ← 👁 👁
35. Compose Destinations @Composable override fun DestinationScope<HogeRouteDestinationNavArgs>.Content() { val dependencyContainer = buildDependencies() val (arg) = navArgs HogeRoute( arg = arg, … ) } ←引数を取り出してセット
36. Compose Destinations @Composable override fun DestinationScope<HogeRouteDestinationNavArgs>.Content() { val dependencyContainer = buildDependencies() val (arg) = navArgs HogeRoute( arg = arg, … ) } ←引数を取り出してセット 自動生成で型安全な 引数 受け取りを実現
37. Typesafe navigation arguments アプリ規模 画面数 ナビゲーションの複雑さ Vanilla Navigation Compose Compose Destinations 小規模アプリ 10画面未満 シンプル ◎ 最適 △ オーバースペック気味 中規模アプリ 10〜30画面 中程度 〇 使いやすい 〇 開発効率が向上 大規模アプリ 31画面以上 複雑 △ 管理が大変になる可能性 ◎ 型安全・管理が容易
38. Complex Navigating
39. Activities Main Activity Common Screen (Activity) Activity Activity Activity
40. MainActivity CommonScreen (Activity) MainGraph NestedGraph Graph Composable
41. MainActivity CommonScreen (Activity) MainGraph NestedGraph Graph Composable
42. MainActivity CommonScreen (Activity) MainGraph NestedGraph Graph Composable もうちょっと 複雑なケースを考える
43. MainActivity MainGraph HogeActivity FugaActivity StartActivity
44. MainActivity MainGraph HogeActivity FugaActivity StartActivity
45. MainActivity MainGraph FugaActivity HogeScreen (Composable)
46. MainActivity Graph FugaActivity HogeScreen (Composable) HogeScreenをFugaActivity Graphにも所属させれ 良いが...
47. HogeScreen PiyoScreen TotoScreen TeteScreen navigate navigate navigate
48. 依存する画面やGraphなどなど全 て組み込む ツライ
49. MainActivity Graphを 共通利用すれ いい で ！！
50. MainActivity MainGraph FugaActivity HogeScreen (Composable) BridgeActivity StartActivity
51. BridgeActivity • 集約先 MainActivityに実装されている画面を別 Activityから開くため 橋渡し • Activity等がMainActivityへ統合されれ 自然と 不要になる で、一時的な実装として有効
52. BridgeActivity MainGraph BridgeRoute BridgeActivity HogeScreen navigate Inten t
53. BridgeActivity MainGraph BridgeRoute BridgeActivity HogeScreen navigate Inten t
54. data class BridgeState( val hasBridged: Boolean = false, val request: Request? = null ) : Serializable { @Parcelize sealed interface Request : Parcelable @Parcelize data class ShowHoge( val arg: String, ) : Request } private var state = BridgeState()
55. data class BridgeState( val hasBridged: Boolean = false, val request: Request? = null ) : Serializable { @Parcelize sealed interface Request : Parcelable @Parcelize data class ShowHoge( val arg: String, ) : Request } private var state = BridgeState() ← 遷移したかどうか 状態
56. data class BridgeState( val hasBridged: Boolean = false, val request: Request? = null ) : Serializable { @Parcelize sealed interface Request : Parcelable @Parcelize data class ShowHoge( val arg: String, ) : Request } private var state = BridgeState() ← 遷移リクエスト ← 画面引数など
57. class BridgeActivity : AppCompatActivity() { companion object { private const val KEY_REQUEST = "key_request" fun createIntentForHoge( activityContext: Context, arg: String, ): Intent { return Intent(activityContext, BridgeActivity::class.java).apply { putExtra(KEY_REQUEST, ShowHoge(arg)) } } } }
58. class BridgeActivity : AppCompatActivity() { companion object { private const val KEY_REQUEST = "key_request" fun createIntentForHoge( activityContext: Context, arg: String, ): Intent { return Intent(activityContext, BridgeActivity::class.java).apply { putExtra(KEY_REQUEST, ShowHoge(arg)) } } } }
59. class BridgeActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { if (savedInstanceState == null) { state = BridgeState( hasBridged = false, request = IntentCompat.getParcelableExtra(intent, ...) ) } setContent { Surface(…) { MainNavHost( startDirection = NavGraphs.Bridge … ) } } } }
60. class BridgeActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { if (savedInstanceState == null) { state = BridgeState( hasBridged = false, request = IntentCompat.getParcelableExtra(intent, ...) ) } setContent { Surface(…) { MainNavHost( startDirection = NavGraphs.Bridge … ) } } } } ↑ Intentからstateを生成
61. class BridgeActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { if (savedInstanceState == null) { state = BridgeState( hasBridged = false, request = IntentCompat.getParcelableExtra(intent, ...) ) } setContent { Surface(…) { MainNavHost( startDirection = NavGraphs.Bridge … ) } } } } ←MainGraphを呼び出す
62. class BridgeActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { if (savedInstanceState == null) { state = BridgeState( hasBridged = false, request = IntentCompat.getParcelableExtra(intent, ...) ) } setContent { Surface(…) { MainNavHost( startDirection = NavGraphs.Bridge … ) } } } } ↑BridgeRouteを渡し、 NavHost StartDestinationに設定する
63. BridgeActivity MainGraph BridgeRoute BridgeActivity HogeScreen navigate Inten t
64. BridgeActivity MainGraph BridgeRoute BridgeActivity HogeScreen navigate Inten t
65. @Destination<BridgeNavGraph>(start = true) @Composable internal fun BridgeRoute( mainNavigator: MainNavigator, ) { if (state.hasBridged) { LocalContext.current.findActivity().finish() return } when (val request = state.request) { is ShowHoge -> { mainNavigator.navigateToHoge( arg = request.arg, ) } else -> LocalContext.current.findActivity().finish() } state = state.copy(hasBridged = true) }
66. @Destination<BridgeNavGraph>(start = true) @Composable internal fun BridgeRoute( mainNavigator: MainNavigator, ) { if (state.hasBridged) { LocalContext.current.findActivity().finish() return } when (val request = state.request) { is ShowHoge -> { mainNavigator.navigateToHoge( arg = request.arg, ) } else -> LocalContext.current.findActivity().finish() } state = state.copy(hasBridged = true) } ←RequestみてHogeScreenを起動
67. @Destination<BridgeNavGraph>(start = true) @Composable internal fun BridgeRoute( mainNavigator: MainNavigator, ) { if (state.hasBridged) { LocalContext.current.findActivity().finish() return } when (val request = state.request) { is ShowHoge -> { mainNavigator.navigateToHoge( arg = request.arg, ) } else -> LocalContext.current.findActivity().finish() } state = state.copy(hasBridged = true) } ←遷移させたらhasBridgedをtrueに
68. BridgeActivity MainGraph BridgeRoute BridgeActivity HogeScreen navigate Inten t
69. BridgeActivity MainGraph BridgeRoute BridgeActivity HogeScreen back Inten t
70. @Destination<BridgeNavGraph>(start = true) @Composable internal fun BridgeRoute( mainNavigator: MainNavigator, ) { if (state.hasBridged) { LocalContext.current.findActivity().finish() return } when (val request = state.request) { is ShowHoge -> { mainNavigator.navigateToHoge( arg = request.arg, ) } else -> LocalContext.current.findActivity().finish() } state = state.copy(hasBridged = true) } ←BridgeRouteに戻ってきたら BridgeActivity自体を閉じる
71. MainActivity MainGraph FugaActivity HogeScreen (Composable) BridgeActivity StartActivity
72. MainActivity MainGraph FugaActivity HogeScreen (Composable) BridgeActivity StartActivity 画面を開く時 アニメーションに Navigation Transitionアニメーショ ンが適用されない...
73. Complex Navigating • BridgeActivityを導入すること 、複数Activityが ある場合に有効 • 副作用もある で、あくまで一時的な対応にした 方が良い
74. Wrap up
75. Wrap up • Navigation便利だけど、状況によって複雑な実装になること ある。 ◦ シチュエーションに合わせて楽に使える方法を検討・調整 して行く が吉。 • Compose Destinationsを検討してみる あり
76. Thanks