Destinos de diálogo

En la navegación de Android, el término destino de diálogo hace referencia a destinos dentro del gráfico de navegación de la app que adoptan la forma de ventanas de diálogo y superponen elementos y contenido de la IU de la app.

Debido a que los destinos de diálogo aparecen sobre los destinos alojados que ocupan el host de navegación, hay algunas consideraciones importantes sobre cómo los destinos de diálogo interactúan con la pila de actividades de NavController.

Elemento componible de diálogo

Para crear un destino de diálogo en Compose, agrega un destino al elemento NavHost con la función dialog(). La función se comporta, en esencia, de la misma manera que composable; la única diferencia es que crea un destino de diálogo en lugar de un destino alojado.

Consulta el siguiente ejemplo:

@Serializable
object Home
@Serializable
object Settings
@Composable
fun HomeScreen(onNavigateToSettings: () -> Unit){
    Column {
        Text("Home")
        Button(onClick = onNavigateToSettings){
            Text("Open settings")
        }
    }
}

// This screen will be displayed as a dialog
@Composable
fun SettingsScreen(){
    Text("Settings")
    // ...
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = Home) {
        composable<Home> { HomeScreen(onNavigateToSettings = { navController.navigate(route = Settings) }) }
        dialog<Settings> { SettingsScreen() }
    }
}

1. El destino de inicio usa la ruta Home. Como composable() lo agrega al gráfico, es un destino alojado.
2. El otro destino usa la ruta Settings.
   • Del mismo modo, como dialog() lo agrega al gráfico, es un destino del diálogo.
   • Cuando el usuario navega de HomeScreen a SettingsScreen, este último aparece sobre HomeScreen.
3. Aunque SettingsScreen no incluye un elemento Dialog componible, ya que es un destino de diálogo, el elemento NavHost lo muestra dentro de un objeto Dialog.

Los destinos de diálogo aparecen sobre el destino anterior en el elemento NavHost. Úsalas cuando el diálogo represente una pantalla separada en tu app que necesite su propio ciclo de vida y estado guardado, independientemente de cualquier otro destino en tu gráfico de navegación. Es posible que prefieras usar un elemento AlertDialog o uno componible relacionado si quieres un diálogo para mostrar un mensaje menos complejo, como una confirmación.

DSL de Kotlin

Si trabajas con fragmentos y usas el DSL de Kotlin para crear tu gráfico, agregar un destino de diálogo es muy similar a cuando usas Compose.

Ten en cuenta cómo, en el siguiente fragmento, también se usa la función dialog() para agregar un destino de diálogo que usa un fragmento:

// Define destinations with serializable classes or objects
@Serializable
object Home
@Serializable
object Settings

// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
    startDestination = Home
) {
    // Associate the home route with the HomeFragment.
    fragment<HomeFragment, Home> {
        label = "Home"
    }

    // Define the settings destination as a dialog using DialogFragment.
    dialog<SettingsFragment, Settings> {
        label = "Settings"
    }
}

XML

Si tienes un DialogFragment existente, usa el elemento <dialog> para agregar el diálogo a tu gráfico de navegación, como se muestra en el siguiente ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nav_graph">

...

<dialog
    android:id="@+id/my_dialog_fragment"
    android:name="androidx.navigation.myapp.MyDialogFragment">
    <argument android:name="myarg" android:defaultValue="@null" />
        <action
            android:id="@+id/myaction"
            app:destination="@+id/another_destination"/>
</dialog>

...

</navigation>