Creare un menu scorrevole con il componente riquadro di navigazione

Il componente menu a scomparsa è un menu scorrevole che consente agli utenti di accedere a varie sezioni dell'app. Gli utenti possono attivarlo scorrendo lateralmente o toccando un'icona del menu.

Prendi in considerazione questi tre casi d'uso per l'implementazione di un riquadro di navigazione:

  • Organizzazione dei contenuti: consenti agli utenti di passare da una categoria all'altra, ad esempio nelle app di notizie o di blogging.
  • Gestione dell'account:fornisci link rapidi alle impostazioni dell'account e alle sezioni del profilo nelle app con account utente.
  • Rilevamento delle funzionalità:organizza più funzionalità e impostazioni in un unico menu per facilitare il rilevamento e l'accesso da parte degli utenti in app complesse.

In Material Design esistono due tipi di riquadri di navigazione:

  • Standard:condividi lo spazio all'interno di uno schermo con altri contenuti.
  • Modale:viene visualizzato sopra altri contenuti all'interno di una schermata.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Implementare un riquadro di navigazione a scomparsa

Puoi utilizzare il composable ModalNavigationDrawer per implementare un riquadro di navigazione:

Punti chiave

  • Utilizza lo slot drawerContent per fornire un ModalDrawerSheet e fornire i contenuti del riquadro.

  • ModalNavigationDrawer accetta una serie di parametri del riquadro aggiuntivi. Ad esempio, puoi attivare o disattivare la risposta del riquadro a trascinamenti con il parametro gesturesEnabled, come nell'esempio seguente:

Controllare il comportamento del riquadro di navigazione

Per controllare l'apertura e la chiusura del riquadro a scomparsa, utilizza DrawerState:

Punti chiave

  • Passa un DrawerState a ModalNavigationDrawer utilizzando il parametro drawerState.
  • DrawerState fornisce l'accesso alle funzioni open e close, nonché alle proprietà relative allo stato corrente del riquadro. Queste funzioni di sospensione richiedono un CoroutineScope, che puoi creare utilizzando rememberCoroutineScope. Puoi anche chiamare le funzioni di sospensione in risposta agli eventi dell'interfaccia utente.

Risultati

Figura 1. Un riquadro di navigazione standard (a sinistra) e un riquadro di navigazione modale (a destra).

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback