Material Design fornisce componenti e layout per XR. Utilizzando la libreria Material 3, i layout adattivi e la libreria XR Compose Material 3, puoi creare comportamenti della UI spaziale nella tua app Compose.
Aggiungi la libreria XR Compose Material 3 alle dipendenze della tua app per utilizzare i componenti Material 3 per XR o inserisci i componenti Material 3 standard direttamente all'interno dei container Jetpack Compose per XR, come Orbiter, SpatialDialog e SpatialPanel.
Utilizza i componenti Material 3 per XR
La libreria androidx.xr.compose.material3 fornisce componenti Material 3 per XR per i pattern UI spaziali comuni, tra cui barre e barre di navigazione, barre delle app in alto, barre degli strumenti mobili, finestre di dialogo, layout elenco-dettagli e un pulsante di attivazione/disattivazione per passare dallo spazio Home allo spazio intero. I composabili Spatial* spazializzati in questa libreria sono sperimentali e richiedono l'attivazione con @OptIn(ExperimentalMaterial3XrApi::class).
Seleziona LocalSpatialCapabilities.current.isSpatialUiEnabled per eseguire il rendering dei componenti Material 3 per XR quando la UI spaziale è attiva e dei componenti Material 3 standard quando la UI spaziale non è attiva. Per saperne di più, consulta Verifica delle funzionalità spaziali.
Modalità di navigazione laterale
Utilizza SpatialNavigationRail o SpatialWideNavigationRail per visualizzare una barra di navigazione Material 3 in un Orbiter allineato all'inizio quando la UI spaziale è attiva. Per ulteriori informazioni, consulta le linee guida di Material Design.
Barra di navigazione non spazializzata
Barra di navigazione spazializzata (adattata per XR)
Barra di navigazione
Utilizza SpatialNavigationBar o SpatialShortNavigationBar per visualizzare
una barra di navigazione Material 3 in un Orbiter allineato in basso quando la UI spaziale
è attiva. Per ulteriori informazioni, consulta le linee guida di Material Design.
Barra di navigazione non spazializzata
Barra di navigazione spazializzata (adattata alla XR)
Finestre di dialogo
Utilizza SpatialBasicAlertDialog per visualizzare una finestra di dialogo di avviso di base all'interno di un SpatialDialog con elevazione spaziale o inserisci i contenuti della finestra di dialogo Material 3 standard direttamente in SpatialDialog.
Per ulteriori informazioni, consulta Finestre di dialogo e le linee guida per il design adattivo.
Dialogo non spazializzato
Finestra di dialogo spazializzata (adattata per XR)
Barre dell'app in alto
Utilizza SpatialTopAppBar o SpatialTwoRowsTopAppBar per visualizzare una barra dell'app in alto di Material 3 all'interno di un Orbiter allineato in alto quando la UI spaziale è attiva.
Per saperne di più, consulta Barre delle app in alto e le linee guida per il design adattivo.
Barra dell'app in alto non spazializzata
Barra dell'app in alto spazializzata (adattata per XR)
Layout elenco-dettagli per XR
Utilizza SpatialListDetailPaneScaffold quando la UI spaziale è attiva per visualizzare un layout elenco-dettagli adattivo di Material 3 in cui ogni riquadro è posizionato all'interno del proprio SpatialPanel. Quando la UI spaziale non è attiva, utilizza ListDetailPaneScaffold. Per saperne di più, consulta layout list-detail e le linee guida per il design adattivo.
ListDetailPaneScaffold non spazializzato
ListDetailPaneScaffold spazializzato (adattato per XR)
Layout del riquadro di assistenza per XR
Quando la UI spaziale è attiva, posiziona il riquadro principale e quello di supporto in contenitori SpatialPanel separati all'interno di un SpatialRow all'interno di un Subspace. Quando la UI spaziale non è attiva, utilizza SupportingPaneScaffold. Per saperne di più, consulta Riquadro di supporto
e le linee guida per il design adattivo.
SupportingPaneScaffold non spazializzato
SupportingPaneScaffold spazializzato (adattato per XR)
Inizia a progettare con il kit di progettazione Material 3 per Figma
Scarica il kit di progettazione Material 3 per iniziare
Vedi anche
- Sviluppa l'UI con Jetpack Compose per XR
- Transizione dallo spazio Home allo spazio intero
- Linee guida per la progettazione della UI spaziale