Material Design fournit des composants et des mises en page qui s'adaptent aux expériences XR. À l'aide de la bibliothèque Material 3 existante, les composants et les mises en page adaptatives sont améliorés avec des comportements d'UI spatiale.
Vous pouvez adapter votre implémentation M3 actuelle en ajoutant le wrapper EnableXrComponentOverrides. Ajoutez la bibliothèque Material3 Compose XR aux dépendances de votre application.
Utiliser EnableXrComponentOverrides pour adapter votre application existante
L'ensemble de l'interface utilisateur Compose M3 dans le wrapper EnableXrComponentOverrides s'adaptera sur les appareils XR. Ce wrapper vous permet de choisir les composants que vous souhaitez exclure de ce comportement.
Ajoutez le wrapper EnableXrComponentOverrides pour adapter votre application à Material Design pour XR.
Rail de navigation
Le rail de navigation de n'importe quelle mise en page Compose, y compris NavigationSuiteScaffold, s'adapte automatiquement à XR Orbiter. Pour en savoir plus, consultez les consignes Material Design.
Rail de navigation non spatialisé
Rail de navigation spatialisé (adapté à la XR)
Barre de navigation
La barre de navigation de n'importe quelle mise en page Compose, y compris NavigationSuiteScaffold, s'adapte automatiquement à l'orbiteur XR. Pour en savoir plus, consultez les consignes Material Design.
Barre de navigation non spatialisée
Barre de navigation spatialisée (adaptée à la RA)
Boîtes de dialogue
Un BasicAlertDialog s'adapte à la réalité XR, en ajoutant une élévation au composant.
En savoir plus sur les boîtes de dialogue et les consignes de conception adaptative
Boîte de dialogue non spatialisée
Boîte de dialogue spatialisée (adaptée à la XR)
Barres d'application supérieures
Un TopAppBar s'adapte automatiquement à l'orbiteur XR.
En savoir plus sur les barres d'application supérieures et les consignes de conception adaptative
Barre d'application supérieure non spatialisée
Barre d'application supérieure spatialisée (adaptée à la XR)
Mise en page "Liste/Détail" pour la XR
Les mises en page adaptatives Material 3 de Compose dans XR ont une mise en correspondance 1:1, où chaque volet est placé dans son propre panneau spatial XR. En savoir plus sur ListDetailPaneScaffold et les consignes de conception adaptative
ListDetailPaneScaffold non spatialisé
ListDetailPaneScaffold spatialisé (adapté à la XR)
Prise en charge de la mise en page des volets pour XR
Les mises en page adaptatives Material 3 de Compose dans XR ont une mise en correspondance 1:1, où chaque volet est placé dans son propre panneau spatial XR. En savoir plus sur SupportingPaneScaffold et les consignes de conception adaptative
SupportingPaneScaffold non spatialisé
SupportingPaneScaffold spatialisé (adapté à la XR)
Commencer à concevoir avec le kit de conception Material 3 pour Figma
Télécharger le kit de conception Material 3 pour commencer
Voir aussi
- Développer une UI avec Jetpack Compose for XR
- Consignes de conception de l'interface utilisateur spatiale