Navegación avanzada en Jetpack Compose

La navegación en Jetpack Compose es compleja de gestionar cuando crece.

En esta charla vemos las bases de cómo hacerlo con la librería de Navigation Compose, así como algunos temas avanzados como son la navegación anidada o la organización del código.

https://github.com/antoniolg/compose-navigation-sample

Transcript

1. Navegación avanzada en Jetpack Compose Antonio Leiva Formador - GDE Kotlin / Android - Jetbrains Training Partner https://devexperto.com | @devexperto1
3. Qué vamos a ver
4. Qué vamos a ver 1. Introducción
5. Qué vamos a ver 1. Introducción 2. Navegación con Compose Navigation
6. Qué vamos a ver 1. Introducción 2. Navegación con Compose Navigation 3. Navegar con argumentos
7. Qué vamos a ver 1. Introducción 2. Navegación con Compose Navigation 3. Navegar con argumentos 4. Navegación anidada
8. Qué vamos a ver 1. Introducción 2. Navegación con Compose Navigation 3. Navegar con argumentos 4. Navegación anidada 5. Cómo organizar el código de navegación
9. Qué vamos a ver 1. Introducción 2. Navegación con Compose Navigation 3. Navegar con argumentos 4. Navegación anidada 5. Cómo organizar el código de navegación 6. Librería Compose Destinations
10. 1. Introducción No os voy a engañar... La navegación en Compose es:
11. 1. Introducción No os voy a engañar... La navegación en Compose es: — Tediosa
12. 1. Introducción No os voy a engañar... La navegación en Compose es: — Tediosa — Fea
13. 1. Introducción No os voy a engañar... La navegación en Compose es: — Tediosa — Fea — Repetitiva
14. 1. Introducción No os voy a engañar... La navegación en Compose es: — Tediosa — Fea — Repetitiva — Crece mal
15. 1. Introducción Con limitaciones:
16. 1. Introducción Con limitaciones: — No podemos pasar Parcelables
17. 1. Introducción Con limitaciones: — No podemos pasar Parcelables — No tenemos diseñador
18. 1. Introducción Con limitaciones: — No podemos pasar Parcelables — No tenemos diseñador — No hay safe args
19. 1. Introducción Por eso hoy quiero daros algunas claves para llevarla lo mejor posible
20. 2. Navegación con Compose Navigation
21. 2. Navegación con Compose Navigation Configuración en build.gradle: dependencies { implementation 'androidx.navigation:navigation-compose:2.5.1' }
22. 2. Navegación con Compose Navigation Navegar entre pantallas val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { composable("home") { Home(onNavigate = { navController.navigate("detail") }) } composable("detail") { Detail() } }
23. 2. Navegación con Compose Navigation Navegar entre pantallas val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { composable("home") { Home(onNavigate = { navController.navigate("detail") }) } composable("detail") { Detail() } }
24. 2. Navegación con Compose Navigation Navegar entre pantallas val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { composable("home") { Home(onNavigate = { navController.navigate("detail") }) } composable("detail") { Detail() } }
25. 2. Navegación con Compose Navigation Navegar entre pantallas val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { composable("home") { Home(onNavigate = { navController.navigate("detail") }) } composable("detail") { Detail() } }
26. 2. Navegación con Compose Navigation Navegar entre pantallas val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { composable("home") { Home(onNavigate = { navController.navigate("detail") }) } composable("detail") { Detail() } }
27. 2. Navegación con Compose Navigation Navegar entre pantallas val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { composable("home") { Home(onNavigate = { navController.navigate("detail") }) } composable("detail") { Detail() } }
28. 2. Navegación con Compose Navigation Navegar hacia atrás
29. 2. Navegación con Compose Navigation Navegar hacia atrás composable("detail") { Detail(onUpclick = { navController.popBackStack() }) }
30. 3. Navegación con argumentos 1. Definir la ruta y el listado de argumentos con su tipo (si es String, es opcional) composable( route = "detail/{text}", arguments = listOf(navArgument("text") { type = NavType.StringType }) ) { ... }
31. 3. Navegación con argumentos 2. Buscar el argumento una vez se ha navegado composable( route = "detail/{text}", arguments = listOf(navArgument("text") { type = NavType.StringType }) ) { backStackEntry -> val text = backStackEntry.arguments?.getString("text") ?: "" Detail(text, onUpclick = { navController.popBackStack() }) }
32. 3. Navegación con argumentos 3. Al navegar, pasar el argumento composable("home") { Home(onNavigate = { navController.navigate("detail/${System.currentTimeMillis()}") }) }
34. 4. Navegación anidada Bottom Navigation -> Una pila de navegación por cada opción navigation(startDestination = "$navDestination/home", route = navDestination) { composable( route = "$navDestination/home" ) { /* */ } composable( route = "$navDestination/detail/{text}" ) { /* */ } }
35. 4. Navegación anidada navController.navigate(navItem.title) { popUpTo(navController.graph.findStartDestination().id) { saveState = true } launchSingleTop = true restoreState = true }
36. 4. Navegación anidada navController.navigate(navItem.title) { popUpTo(navController.graph.findStartDestination().id) { saveState = true } launchSingleTop = true restoreState = true }
37. 4. Navegación anidada navController.navigate(navItem.title) { popUpTo(navController.graph.findStartDestination().id) { saveState = true } launchSingleTop = true restoreState = true }
38. 4. Navegación anidada navController.navigate(navItem.title) { popUpTo(navController.graph.findStartDestination().id) { saveState = true } launchSingleTop = true restoreState = true }
39. 4. Navegación anidada navController.navigate(navItem.title) { popUpTo(navController.graph.findStartDestination().id) { saveState = true } launchSingleTop = true restoreState = true }
40. 4. Navegación anidada navController.navigate(navItem.title) { popUpTo(navController.graph.findStartDestination().id) { saveState = true } launchSingleTop = true restoreState = true }
42. 5. Cómo organizar el código de navegación Dependiendo de las necesidades, puedes necesitar otras formas. Yo aquí te muestro una para inspirarte
43. 5. Cómo organizar el código de navegación Feature enum class Feature(val route: String) { HOME("home"), SEARCH("search"), FAVORITE("favorite"), SETTINGS("settings") }
44. 5. Cómo organizar el código de navegación NavCommand sealed class NavCommand( val feature: Feature, val subRoute: String, val navArgs: List<NavArg> = emptyList() )
45. 5. Cómo organizar el código de navegación NavCommand sealed class NavCommand( val feature: Feature, val subRoute: String, val navArgs: List<NavArg> = emptyList() ) { class Home(feature: Feature) : NavCommand(feature, "home") class Detail(feature: Feature) : NavCommand(feature, "detail", listOf(NavArg.ItemId)) }
46. 5. Cómo organizar el código de navegación NavCommand sealed class NavCommand( val feature: Feature, val subRoute: String, val navArgs: List<NavArg> = emptyList() ) { class Home(feature: Feature) : NavCommand(feature, "home") class Detail(feature: Feature) : NavCommand(feature, "detail", listOf(NavArg.ItemId)) // search/detail/25 val route = run { val argValues = navArgs.map { "{${it.key}}" } listOf(feature.route) .plus(subRoute) .plus(argValues) .joinToString("/") } val args = navArgs.map { navArgument(it.key) { type = it.navType } } }
47. 5. Cómo organizar el código de navegación NavCommand sealed class NavCommand( val feature: Feature, val subRoute: String, val navArgs: List<NavArg> = emptyList() ) { class Home(feature: Feature) : NavCommand(feature, "home") class Detail(feature: Feature) : NavCommand(feature, "detail", listOf(NavArg.ItemId)) // search/detail/25 val route = run { val argValues = navArgs.map { "{${it.key}}" } listOf(feature.route) .plus(subRoute) .plus(argValues) .joinToString("/") } val args = navArgs.map { navArgument(it.key) { type = it.navType } } }
48. 5. Cómo organizar el código de navegación NavArg enum class NavArg(val key: String, val navType: NavType<*>) { ItemId("itemId", NavType.LongType) }
49. 5. Cómo organizar el código de navegación BottomNavItem enum class BottomNavItem( val icon: ImageVector, val feature: Feature, @StringRes val title: Int ) { HOME(Icons.Default.Home, Feature.HOME, R.string.home), SEARCH(Icons.Default.Search, Feature.SEARCH, R.string.search), FAVORITE(Icons.Default.Favorite, Feature.FAVORITE, R.string.favorite), SETTINGS(Icons.Default.Settings, Feature.SETTINGS, R.string.settings) }
50. 5. Cómo organizar el código de navegación Simplificar con funciones de extensión fun NavGraphBuilder.composable( navCommand: NavCommand, content: @Composable (NavBackStackEntry) -> Unit ) { composable( route = navCommand.route, arguments = navCommand.args, content = content ) } /* ------ */ composable(homeNavCommand) { Content(text = stringResource(navDestination.title), onClick = { navController.navigate( "$navDestination/detail/${System.currentTimeMillis()}" ) }) }
51. 5. Cómo organizar el código de navegación Simplificar con funciones de extensión fun NavGraphBuilder.composable( navCommand: NavCommand, content: @Composable (NavBackStackEntry) -> Unit ) { composable( route = navCommand.route, arguments = navCommand.args, content = content ) } /* ------ */ composable(homeNavCommand) { Content(text = stringResource(navDestination.title), onClick = { navController.navigate( "$navDestination/detail/${System.currentTimeMillis()}" ) }) }
52. 5. Cómo organizar el código de navegación Simplificar con funciones de extensión fun NavGraphBuilder.composable( navCommand: NavCommand, content: @Composable (NavBackStackEntry) -> Unit ) { composable( route = navCommand.route, arguments = navCommand.args, content = content ) } /* ------ */ composable(homeNavCommand) { Content(text = stringResource(navDestination.title), onClick = { navController.navigate( "$navDestination/detail/${System.currentTimeMillis()}" ) }) }
53. 5. Cómo organizar el código de navegación fun NavGraphBuilder.bottomNavigation( navDestination: BottomNavItem, navController: NavHostController ) { val homeNavCommand = NavCommand.Home(navDestination.feature) val detailNavCommand = NavCommand.Detail(navDestination.feature) navigation( startDestination = homeNavCommand.route, route = navDestination.feature.route ) { composable(homeNavCommand) { Content(text = stringResource(navDestination.title), onClick = { navController.navigate( "$navDestination/detail/${System.currentTimeMillis()}" ) }) } composable(detailNavCommand) { backStackEntry -> val text = backStackEntry.arguments?.getLong(NavArg.ItemId.key) ?: "" Content(text = "$navDestination Detail: $text") } } }
54. 5. Cómo organizar el código de navegación fun NavGraphBuilder.bottomNavigation( navDestination: BottomNavItem, navController: NavHostController ) { val homeNavCommand = NavCommand.Home(navDestination.feature) val detailNavCommand = NavCommand.Detail(navDestination.feature) navigation( startDestination = homeNavCommand.route, route = navDestination.feature.route ) { composable(homeNavCommand) { Content(text = stringResource(navDestination.title), onClick = { navController.navigate( "$navDestination/detail/${System.currentTimeMillis()}" ) }) } composable(detailNavCommand) { backStackEntry -> val text = backStackEntry.arguments?.getLong(NavArg.ItemId.key) ?: "" Content(text = "$navDestination Detail: $text") } } }
55. 5. Cómo organizar el código de navegación Simplificar con funciones de extensión @Composable fun Navigation(navController: NavHostController) { NavHost(navController = navController, startDestination = Feature.HOME.route) { BottomNavItem.values().forEach { bottomNavigation(it, navController) } } }
56. 6. Compose Destinations Librería de Rafael Costa que soluciona muchos de los problemas:
57. 6. Compose Destinations Librería de Rafael Costa que soluciona muchos de los problemas: — Argumentos de navegación seguros
58. 6. Compose Destinations Librería de Rafael Costa que soluciona muchos de los problemas: — Argumentos de navegación seguros — Soporta Parcelable
59. 6. Compose Destinations Librería de Rafael Costa que soluciona muchos de los problemas: — Argumentos de navegación seguros — Soporta Parcelable — Navegación hacia atrás y con resultados con tipos seguros
60. 6. Compose Destinations Librería de Rafael Costa que soluciona muchos de los problemas: — Argumentos de navegación seguros — Soporta Parcelable — Navegación hacia atrás y con resultados con tipos seguros — Todo lo que se puede hacer con la librería oficial, pero más sencillo
61. 6. Compose Destinations Definir un destino de navegación @Destination @Composable fun ProfileScreen() { /*...*/ }
62. 6. Compose Destinations Si quieres usar argumentos @Destination @Composable fun ProfileScreen( id: Int, // <-- argumento de navegación obligatorio groupName: String?, // <-- argumento de navegación opcional )
63. 6. Compose Destinations Para definir cuál es el root de navegación (el que carga la primera vez) @RootNavGraph(start = true) @Destination @Composable fun HomeScreen( navigator: DestinationsNavigator ) { /*...*/ navigator.navigate(ProfileScreenDestination(id = 7, groupName = "Kotlin programmers")) }
64. 6. Compose Destinations Para definir cuál es el root de navegación (el que carga la primera vez) @RootNavGraph(start = true) @Destination @Composable fun HomeScreen( navigator: DestinationsNavigator ) { /*...*/ navigator.navigate(ProfileScreenDestination(id = 7, groupName = "Kotlin programmers")) }
65. https://compose.expert
66. Enlaces
67. Enlaces — Proyecto de ejemplo
68. Enlaces — Proyecto de ejemplo — Compose Expert
69. Enlaces — Proyecto de ejemplo — Compose Expert — Repositorio Compose Destinations
70. ¿Preguntas? ✋ https://devexperto.com | @devexperto1
71. ¡Gracias! ! https://devexperto.com | @devexperto1