Material Design fornisce componenti e layout che si adattano all'XR. Con la libreria Material 3 esistente, i componenti e i layout adattabili vengono migliorati con i comportamenti dell'interfaccia utente spaziale.
Puoi adattare l'attuale implementazione di M3 aggiungendo il wrapper EnableXrComponentOverrides. Aggiungi la libreria XR Compose Material3 alle dipendenze della tua app.
Utilizzare EnableXrComponentOverrides per adattare l'app esistente
Tutta l'interfaccia utente di Compose di M3 all'interno del wrapper
EnableXrComponentOverrides si adatterà ai dispositivi VR. Questo wrapper ti consente di scegliere i componenti da escludere da questo comportamento.
Aggiungi il wrapper EnableXrComponentOverrides per adattare la tua app a Material Design per XR.
Modalità di navigazione laterale
La barra di navigazione in qualsiasi layout di Componi, incluso NavigationSuiteScaffold, si adatterà automaticamente a XR Orbiter. Per ulteriori informazioni, leggi le linee guida di Material Design.
Barra di navigazione non spazializzata
Barra di navigazione spazializzata (adattata all'XR)
Barra di navigazione
La barra di navigazione in qualsiasi layout di composizione, incluso NavigationSuiteScaffold, si adatterà automaticamente all'orbiter XR. Per ulteriori informazioni, leggi le linee guida di Material Design.
Barra di navigazione non spazializzata
Barra di navigazione spazializzata (adattata all'XR)
Finestre di dialogo
Un BasicAlertDialog si adatterà all'XR, aggiungendo elevazione al componente.
Scopri di più su Dialoghi e sulle linee guida per il design adattivo.
Dialogo non spazializzato
Dialogo spazializzato (adattato per XR)
Barre delle app superiori
Un TopAppBar si adatterà automaticamente all'orbiter XR.
Scopri di più sulle barre delle app superiori e sulle linee guida per il design adattivo.
Barra delle app superiore non spazializzata
Barra delle app superiore spazializzata (adattata all'XR)
Layout elenco dettagliato per XR
I layout adattabili di Material 3 in XR hanno una mappatura 1:1 in cui ogni riquadro è posizionato all'interno del proprio riquadro spaziale XR. Scopri di più su
ListDetailPaneScaffold e sulle linee guida per il design adattivo.
Non spazializzato ListDetailPaneScaffold
ListDetailPaneScaffold spazializzato (adattato per XR)
Layout del riquadro di assistenza per XR
I layout adattabili di Material 3 in XR hanno una mappatura 1:1 in cui ogni riquadro è posizionato all'interno del proprio riquadro spaziale XR. Scopri di più su
SupportingPaneScaffold e sulle linee guida per il design adattivo.
SupportingPaneScaffold non spazializzato
SupportingPaneScaffold spazializzato (adattato per XR)
Inizia a progettare con il Material 3 Design Kit per Figma
Scarica il kit di progettazione Material 3 per iniziare
Vedi anche
- Sviluppare l'interfaccia utente con Jetpack Compose per XR
- Linee guida per la progettazione di UI spaziali