Con Jetpack Compose, Android sta abbandonando i modi impliciti di spostarsi con transazioni di frammenti, navigazioni e intenti per le attività. Al giorno d'oggi, l'app dovrebbe dichiarare tutti i possibili percorsi che gli utenti possono intraprendere all'inizio.

La composizione di Jetpack fornisce un modo nativo per navigare tra i vari componenti. Con NavHost e NavController, puoi eseguire il push o il pop dei tuoi componenti componibili in base alle tue esigenze. Quindi arriviamo a questo.

Dipendenze

Innanzitutto, dovrai aggiungere una dipendenza al tuo progetto. Per ottenere la versione corrente, vai qui .

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

Implementazione

In primo luogo, NavHost e NavController vengono introdotti nel progetto.

NavHost ospita la dichiarazione dei percorsi che gli utenti possono intraprendere. NavController fornisce API per spostarsi lungo le rotte dichiarate. Il percorso è il percorso, che è unico per ogni schermata/altro componibile che potrebbe essere mostrato nell'app.

Istanziazione

Viene creata un'istanza di NavController con RememberNavController(), quindi anche dopo la ricostruzione dei componenti componibili, NavController è lo stesso.

Destinazione di partenza

Vengono dichiarati il ​​NavHost con il NavController e la destinazione iniziale. La destinazione di partenza è il nome del nostro primo percorso sullo schermo.

Dichiarazione di percorsi

Tutte le opzioni sono dichiarate dove un utente può spostarsi. Entrambe le schermate devono dichiarare i percorsi. Il nome della rotta è univoco perché il NavController li utilizzerà per identificare il componibile successivo da mostrare.

Qualsiasi componibile può essere mostrato tramite il navcontroller.navigate("route to composable").

Per imitare il pulsante Indietro dell'utente, è possibile utilizzare navcontroller.popBackStack(). Questo farà uscire il componibile corrente dalla pila di tutti i componibili.

Lo stack può essere visualizzato come una cronologia dei componibili/schermi, quindi il primo schermo è la radice e gli altri componibili vengono posizionati sopra di esso. Pertanto, passando alla seconda schermata, la seconda schermata viene aggiunta in cima allo stack. Estraendo la pila, il componibile superiore viene rimosso.

Pulire

Per essere più soggetto a errori in futuro, [aths dovrebbe essere dichiarato in modo più pulito. Quindi evita di aggiungere stringhe ovunque e crea il file autonomo in cui inserisci tutti i percorsi per la tua app. Successivamente, dovrebbero essere utilizzate le costanti dichiarate. Errori di battitura imbarazzanti saranno evitati in futuro. Inoltre, fornisce una visione più descrittiva di come è strutturata l'app.

Passando attraverso più schermate e tornando alla radice

D'ora in poi aggiungere schermate successive alla nostra navigazione è facile. Il NavHost deve essere esteso di un altro componibile e gli schermi devono adottare più pulsanti per spostarsi.

La terza schermata contiene un pulsante che riporta l'utente alla prima schermata e pulisce tutti i componenti impilati.

Per inserire più elementi componibili nello stack, è possibile utilizzare navController.popBackStack("Schermata in cui si desidera interrompere lo scoppiettio", incluso: false).

Il parametro inclusivo ci dice se anche il componibile mirato deve essere rimosso. La rimozione della prima schermata risulterebbe in una schermata vuota, quindi viene passato il valore falso.

Passare valore allo schermo

La maggior parte delle app desidera mostrare informazioni o dati dipendenti dalla scelta precedente dell'utente. Un altro schermo deve sapere cosa mostrare, quindi il valore deve essere passato.

Questo viene fatto inserendo il valore all'interno del percorso, quindi il valore viene codificato come una stringa e quindi analizzato in un'altra schermata.

Dichiarazione

Innanzitutto, il percorso deve dichiarare la presenza del valore, che viene fatto in questo modo:

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 prima schermata ora contiene un campo di testo, i cui contenuti vengono passati alla seconda schermata.

Non passare dati complessi alle viste nella navigazione

Alla vista dovrebbe essere passato un solo valore. Altri dati dovrebbero essere ottenuti con l'aiuto del ViewModel o di un'altra unità logica. Renderà il tuo codice molto più pulito e più testabile.

Ad esempio, se desideri mostrare i dettagli su un prodotto o un utente, un ID deve essere passato solo alla vista. L'unità logica ottiene l'ID e recupera informazioni più dettagliate da Internet o da un database. I dati vengono quindi passati direttamente alla vista senza l'ausilio dei componenti di navigazione.

Risorse:

Altro dallo sviluppo Android: