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.

Dado que los destinos de diálogo aparecen sobre los destinos alojados que llenan el de navegación, hay algunas consideraciones importantes sobre cómo los los destinos 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. Porque composable() lo agrega al gráfico, es un destino alojado.
2. El otro destino usa la ruta Settings.
   • De manera similar, como dialog() lo agrega al gráfico, es un diálogo destino.
   • Cuando el usuario navegue de HomeScreen a SettingsScreen, el 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. Usa cuando el diálogo represente una pantalla separada en tu app que necesite su propia pantalla y el 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 agrega 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>