Con Jetpack Compose, Android está abandonando las formas implícitas de moverse con transacciones fragmentadas, navegaciones e intenciones de actividades. Hoy en día, la aplicación debe declarar todos los caminos posibles que los usuarios pueden tomar al principio.

Jetpack compose proporciona una forma nativa de navegar a través de sus múltiples componentes. Con NavHost y NavController, puede empujar o abrir sus componibles según lo necesite. Vamos a por ello.

dependencias

En primer lugar, deberá agregar una dependencia a su proyecto. Para obtener la versión actual, vaya aquí .

implementation "androidx.navigation:navigation-compose:2.5.3"

Implementación

En primer lugar, se introducen NavHost y NavController en el proyecto.

NavHost aloja la declaración de las rutas que pueden tomar los usuarios. NavController proporciona API para moverse por las rutas declaradas. La ruta es la ruta, que es única para cada pantalla/otro componible que se puede mostrar en la aplicación.

instanciación

Se crea una instancia de NavController con RememberNavController(), por lo que incluso después de la reconstrucción de componibles, el NavController es el mismo.

Destino inicial

Se declaran el NavHost con NavController y el destino inicial. El destino inicial es el nombre de nuestra ruta en la primera pantalla.

Declaración de rutas

Todas las opciones se declaran donde un usuario puede moverse. Ambas pantallas necesitan declarar rutas. El nombre de la ruta es único porque NavController los usará para identificar el siguiente componible que se mostrará.

Cualquier componible se puede mostrar a través de navcontroller.navigate ("ruta a componible").

Para imitar el botón Atrás del usuario, se puede usar navcontroller.popBackStack() . Esto hará que aparezca el componible actual de la pila de todos los componibles.

La pila se puede ver como un historial de elementos componibles/pantallas, por lo que la primera pantalla es la raíz y el otro elemento componible se coloca encima. Entonces, al navegar a la segunda pantalla, la segunda pantalla se agrega encima de la pila. Al sacar la pila, se elimina el componible superior.

Limpiar

Para ser más propenso a errores en el futuro, [aths debe declararse de manera más limpia. Por lo tanto, evite agregar cadenas en todas partes y cree el archivo independiente donde coloca todas las rutas para su aplicación. Posteriormente, se deben utilizar las constantes declaradas. Los errores tipográficos vergonzosos se evitarán en el futuro. Además, proporciona una vista más descriptiva de cómo está estructurada la aplicación.

Pasar por varias pantallas y volver a la raíz

A partir de ahora añadir pantallas posteriores a nuestra navegación es fácil. El NavHost debe ampliarse con uno más componible, y las pantallas deben adoptar más botones para moverse.

La tercera pantalla contiene un botón que lleva al usuario de vuelta a la primera pantalla y limpia todos los componentes apilados.

Para colocar varios elementos componibles en la pila, se puede utilizar navController.popBackStack(“Pantalla en la que desea detener la aparición”, inclusive: falso).

El parámetro inclusivo nos dice si el componible objetivo también debe eliminarse. Eliminar la primera pantalla daría como resultado una pantalla en blanco, por lo que se pasa el valor falso.

Pasar valor a la pantalla

La mayoría de las aplicaciones quieren mostrar información o datos que dependen de la elección previa del usuario. Otra pantalla necesita saber qué mostrar, por lo que se debe pasar el valor.

Esto se hace colocando el valor dentro de la ruta, por lo que el valor se codifica como una cadena y luego se analiza en otra pantalla.

Declaración

En primer lugar, la ruta debe declarar la presencia del valor, lo que se hace así:

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

La primera pantalla ahora contiene un campo de texto, cuyo contenido se pasa a la segunda pantalla.

No pase datos complejos a las vistas en la navegación.

Solo se debe pasar un valor a la vista. Otros datos deben obtenerse con la ayuda de ViewModel u otra unidad lógica. Hará que su código sea mucho más limpio y más comprobable.

Por ejemplo, si desea mostrar detalles sobre un producto o usuario, se debe pasar una ID solo a la vista. La unidad lógica obtiene la identificación y extrae información más detallada de Internet o de una base de datos. Luego, los datos se pasan a la vista directamente sin la ayuda de los componentes de navegación.

Recursos:

Más del desarrollo de Android: